import * as i0 from '@angular/core';
import { AfterViewInit, OnChanges, EventEmitter, QueryList, SimpleChanges, AfterContentInit, ElementRef, OnInit } from '@angular/core';
import { UxLinkLegacy } from '@eui/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
interface EuiTreeListFilterParams {
readonly level: number;
readonly item: EuiTreeListItemComponent;
readonly keyword: string;
}
/**
* @description
* Hierarchical tree list component for displaying nested navigation or content structures.
* Provides expand/collapse functionality, filtering, and keyboard navigation support.
* Supports optional toolbar with expand-all, collapse-all, and filter controls.
* Implements ARIA tree role for accessibility compliance.
* Commonly used for navigation menus, file explorers, or any hierarchical list display.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
*
*
*
*
*
*
* ```
*
* ### With Custom Filter
* ```html
*
*
*
* ```
*
* ```typescript
* customFilter = (params: EuiTreeListFilterParams) => {
* return params.item.label.toLowerCase().includes(params.keyword.toLowerCase());
* };
* ```
*
* ### Accessibility
* - Use role="tree" on container (automatically applied)
* - Each item has role="treeitem"
* - Keyboard navigation: Arrow keys to navigate, Enter to activate
* - Expandable items announce their state to screen readers
*
* ### Notes
* - Toolbar provides expand-all, collapse-all, and filter functionality
* - Filter function receives level, item, and keyword for custom filtering
* - Items can be nested to any depth
* - Supports keyboard navigation for accessibility
*/
declare class EuiTreeListComponent implements AfterViewInit, OnChanges {
/**
* Option to show the toolbar
* @default false
*/
isShowToolbar: boolean;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
isShowToolbarToggle: boolean;
/**
* Sets the expanded state of the tree list
*/
isExpanded: boolean;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
hasItemsUrl: boolean;
/**
* Sets the label for the filter input
* @type {string}
*/
filterLabel: string;
/**
* Function to filter the tree list items based on the provided params
* @param {EuiTreeListFilterParams} params
* @returns {boolean}
*/
filterFunction: (params: EuiTreeListFilterParams) => boolean;
/**
* Sets the label for the expand-all button
* @type {string}
*/
expandAllLabel: string;
/**
* Sets the label for the collapse-all button
* @type {string}
*/
collapseAllLabel: string;
/**
* Sets the tabindex attribute to handle the focus state
* @default '0'
*/
tabindex: string;
/**
* Sets the aria-label attribute for the tree list
* @default ''
*/
ariaLabel: string;
/**
* Sets the filter value of the toolbar
* @default ''
*/
toolbarFilterValue: string;
/**
* Sets the end-to-end attribute for the tree list
* @default 'eui-tree-list'
*/
e2eAttr: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
itemSelected: EventEmitter;
/**
* Event that emits the filter value upon filtering.
*/
filter: EventEmitter;
/**
* Event emitted upon expanding all items.
*/
expandAll: EventEmitter;
/**
* Event emitted upon collapsing all items.
*/
collapseAll: EventEmitter;
items: QueryList;
ariaOwns: string;
originalTabindex: string;
classes: string;
ariaRoleTree: string;
private elementRef;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
/**
* Getter function that returns true if the expandAllLabel exists.
* @returns {boolean}
*/
get hasExpandAllLabel(): boolean;
/**
* Getter function that returns true if the collapseAllLabel exists.
* @returns {boolean}
*/
get hasCollapseAllLabel(): boolean;
/**
* Method that sets the expanded state and emits the expand-all event.
*/
onExpandAll(event: Event): void;
/**
* Method that sets the collapsed state and emits the collapse-all event.
*/
onCollapseAll(event: Event): void;
/**
* Method that handles the visibility of the items based on the filter value and emits the filter event.
* @param {string} filterValue - The filter value to set.
*/
onFilter(filterValue: string): void;
/**
* @deprecated This method is not used anymore and will be removed in the next major version. You can use the `focus()` method instead.
*/
onFocus(): void;
/**
* Method that sets the visibility state of the tree list items.
* @param {boolean} state
*/
setVisibleState(state: boolean): void;
/**
* Method that sets the expanded state of the tree list items.
* @param {boolean} state
*/
setExpandedState(state: boolean): void;
/**
* Method that puts the focus on the first child tree item.
*/
focus(): void;
/**
* Method that makes the tree list not focusable.
*/
disableFocus(): void;
/**
* Method used to focus on the previous tree item in the list.
* @param {EuiTreeListItemComponent} currentTreeListItem - The current tree list item.
* @return {boolean} - Returns true if the focus was set on the previous tree item, false otherwise.
*/
focusOnPreviousTreeItem(currentTreeListItem: EuiTreeListItemComponent): boolean;
/**
* Method used to focus on the next tree item in the list.
* @param {EuiTreeListItemComponent} currentTreeListItem - The current tree list item.
* @return {boolean} - Returns true if the focus was set on the next tree item, false otherwise.
*/
focusOnNextTreeItem(currentTreeListItem: EuiTreeListItemComponent): boolean;
/**
* Method that sets the default filter function to filter the tree list items.
* @param {EuiTreeListFilterParams} params - The filter parameters.
* @returns {boolean} - Returns true if the item matches the filter, false otherwise.
* @private
*/
private defaultFilterFunction;
/**
* Method that filters the tree list items based on the provided params.
* @param {number} level - The level of the item in the tree list.
* @param {EuiTreeListItemComponent} item - The tree list item to filter.
* @param {string} keyword - The keyword to filter by.
* @returns {boolean} - Returns true if the item matches the filter, false otherwise.
* @private
*/
private filterMatched;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isShowToolbar: unknown;
static ngAcceptInputType_isShowToolbarToggle: unknown;
static ngAcceptInputType_isExpanded: unknown;
static ngAcceptInputType_hasItemsUrl: unknown;
}
/**
* @description
* Content projection component for custom content within eui-tree-list-item.
* Provides a structured container for rich content beyond simple labels.
* Applies consistent styling for custom item content.
* Must be used within eui-tree-list-item to define custom content areas.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
* Document.pdf
* New
*
*
*
*
*
*
*
*
*
* File Name
* Last modified: 2 hours ago
*
*
*
*
* ```
*
* ### Accessibility
* - Content should include appropriate semantic HTML
* - Images should have alt text
* - Interactive elements should be keyboard accessible
*
* ### Notes
* - Replaces default label rendering when used
* - Supports any HTML content or Angular components
* - Maintains consistent spacing and alignment
* - Works with expand/collapse functionality
*/
declare class EuiTreeListItemContentComponent {
string: string;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
/**
* @description
* Individual item component within eui-tree-list representing a single node in the hierarchical structure.
* Supports nested sub-items, expand/collapse functionality, and custom content projection.
* Implements keyboard navigation and ARIA treeitem role for accessibility.
* Integrates with BaseStatesDirective for theming variants (primary, secondary, success, warning, danger).
* Must be used as a direct child of eui-tree-list or nested within other tree list items.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ### Custom Content
* ```html
*
*
*
* Custom Content
*
*
*
*
*
*
* Bold Label
*
*
* ```
*
* ### Accessibility
* - Implements ARIA treeitem role automatically
* - Keyboard navigation: Arrow keys (up/down/left/right), Enter/Space to toggle
* - Expanded state announced to screen readers
* - Focus management with proper tabindex handling
* - Aria-label generated from label or custom content
*
* ### Notes
* - Nested items must be wrapped in eui-tree-list component
* - Supports color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)
* - isActive highlights the current/selected item
* - isAlwaysExpanded keeps item permanently expanded without toggle button
* - Custom content projections: eui-tree-list-item-label, eui-tree-list-item-details, eui-tree-list-item-sub-container
*/
declare class EuiTreeListItemComponent implements AfterContentInit {
get cssClasses(): string;
tabIndex: string;
protected ariaRole: string;
id: string;
ariaLabel: string;
e2eAttr: string;
/**
* The label of the tree list item if there is no customLabel.
* @type {string}
*/
label: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
linkUrl: string;
/**
* The sublabel of the tree list item if there is no customLabel.
* @type {string}
*/
subLabel: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
url: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
subLinks: UxLinkLegacy[];
/**
* Option that enables a corresponding class if it is set to true.
* @default false
*/
isActive: boolean;
/**
* Option to set the expanded state of the list item.
* @default false
*/
isExpanded: boolean;
/**
* Option to set the expanded state of the list item when it is always expanded.
* @default false
*/
isAlwaysExpanded: boolean;
/**
* Option to set the visible state of the list item and apply the corresponding hidden class if it is set to false.
* @default true
*/
isVisible: boolean;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
isDisplaySubLinksOnHover: boolean;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
isNavigateOnlyOnLabelClick: boolean;
/**
* Event emitted upon toggling the expanded state.
*/
toggled: EventEmitter;
isHovered: boolean;
treeListComponent: EuiTreeListComponent;
hasSub: boolean;
hasCustomContent: boolean;
focusable: ElementRef;
customLabel: QueryList;
customDetailContent: QueryList;
customSubContainerContent: QueryList;
subTreeList: QueryList;
customContent: QueryList;
protected elementRef: ElementRef;
baseStatesDirective: BaseStatesDirective;
ngAfterContentInit(): void;
/**
* Method fired when the expander button is clicked.
* @param {Event} event - The click event.
*/
toggle(event: Event): void;
/**
* Method fired when a key is pressed down.
* @param {KeyboardEvent} event - The keyboard event.
*/
onKeyDown(event: KeyboardEvent): void;
/**
* Method that sets the visible state.
* @param {boolean} state - The visible state.
*/
setVisibleState(state: boolean): void;
/**
* Method that sets the expanded state.
* @param {boolean} state - The expanded state.
*/
setExpandedState(state: boolean): void;
/**
* Method used to enable/disable the focus state.
*/
focus(): void;
/**
* Method used to focus on the last expanded tree item.
*/
focusOnLastExpandedTreeItem(): void;
/**
* Method used to focus on the next tree item.
* @returns {boolean} - Returns true if the focus was set, false otherwise.
* @protected
*/
protected focusOnNextTreeItem(): boolean;
/**
* Method used to disable the focus state.
* @protected
*/
protected disableFocus(): void;
/**
* Method used to enable the focus state.
* @protected
*/
protected enableFocus(): void;
/**
* Method used to get the CSS classes for the tree list item.
* @returns {string} - The CSS classes.
* @private
*/
private getCssClasses;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isActive: unknown;
static ngAcceptInputType_isExpanded: unknown;
static ngAcceptInputType_isAlwaysExpanded: unknown;
static ngAcceptInputType_isVisible: unknown;
static ngAcceptInputType_isDisplaySubLinksOnHover: unknown;
static ngAcceptInputType_isNavigateOnlyOnLabelClick: unknown;
}
/**
* @description
* Directive for projecting custom label content into eui-tree-list-item.
* Replaces the default label rendering with custom HTML or components.
*
* @usageNotes
* ```html
*
*
*
* Custom Label
*
*
* ```
*
* ### Accessibility
* - Ensure custom content is semantically meaningful
* - Include text alternatives for icons
*
* ### Notes
* - Overrides label and subLabel inputs when used
* - Supports any HTML content
*/
declare class EuiTreeListItemLabelTagDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting additional details content below the main label in eui-tree-list-item.
* Provides a secondary content area for metadata or additional information.
*
* @usageNotes
* ```html
*
*
* Last modified: 2 hours ago
* Draft
*
*
* ```
*
* ### Accessibility
* - Details content should be supplementary, not critical
* - Use appropriate semantic elements
*
* ### Notes
* - Renders below the main label area
* - Useful for metadata, timestamps, or status indicators
*/
declare class EuiTreeListItemDetailsContentTagDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Directive for projecting custom container content within eui-tree-list-item.
* Provides a flexible content area for complex layouts or additional UI elements.
*
* @usageNotes
* ```html
*
*
*
*
*
*
*
* ```
*
* ### Accessibility
* - Interactive elements should be keyboard accessible
* - Maintain logical tab order
*
* ### Notes
* - Renders in a dedicated container area
* - Useful for action buttons or complex UI
*/
declare class EuiTreeListItemSubContainerContentTagDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* @description
* Toolbar component for eui-tree-list providing filter and expand/collapse controls.
* Displays search input for filtering tree items and buttons for expanding or collapsing all items.
* Automatically emits filter events on initialization if filter value is provided.
* Manages toggle state for expand/collapse button display.
* Must be used within eui-tree-list component to control tree list behavior.
*
* @usageNotes
* ### Basic Usage
* ```html
*
*
*
*
*
*
*
*
*
*
* ```
*
* ```typescript
* // Listen to toolbar events
* onFilter(keyword: string): void {
* console.log('Filtering by:', keyword);
* }
*
* onExpandAll(): void {
* console.log('All items expanded');
* }
* ```
*
* ### Accessibility
* - Search input has proper placeholder and label
* - Expand/collapse buttons have aria-labels
* - Icons have descriptive aria-labels
* - Keyboard accessible controls
*
* ### Notes
* - Automatically managed by parent eui-tree-list component
* - Filter emits on initialization if filterValue is set
* - Toggle button switches between expand and collapse states
* - Supports icon-only buttons when labels are empty strings
* - Clearable search input for easy filter reset
*/
declare class EuiTreeListToolbarComponent implements OnInit, OnChanges {
classes: string;
e2eAttr: string;
/**
* Shows or hides the toolbar
* @default false
*/
isVisible: boolean;
/**
* The value of the filter placeholder
* @type {string}
*/
filterLabel: string;
/**
* The label for the expand all button
* @type {string}
*/
expandAllLabel: string;
/**
* The label for the collapse all button
* @type {string}
*/
collapseAllLabel: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
isFilterVisible: boolean;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
isToggleVisible: boolean;
/**
* Option that toggles the expanded/collapsed state of the corresponding button
* @default false
*/
isToggleExpanded: boolean;
/**
* The value of the filter input
* @default ''
*/
filterValue: string;
/**
* @deprecated This property is not used anymore and will be removed in the next major version.
*/
hasLabels: boolean;
/**
* Event emitted if there is or if a filter value changes.
*/
filter: EventEmitter;
/**
* Event emitted when the expand all button is clicked.
*/
expandAll: EventEmitter;
/**
* Event emitted when the collapse all button is clicked.
*/
collapseAll: EventEmitter;
ngOnInit(): void;
ngOnChanges(c: SimpleChanges): void;
/**
* This method is called when the filter input value changes.
* It emits the filter value to the parent component.
* @protected
*/
protected onFilter(): void;
/**
* This method is called when the expand all button is clicked.
* It emits the expand all event to the parent component.
* @param event The mouse event
* @protected
*/
protected onExpandAll(event: MouseEvent): void;
/**
* This method is called when the collapse all button is clicked.
* It emits the collapse all event to the parent component.
* @param event The mouse event
* @protected
*/
protected onCollapseAll(event: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_isVisible: unknown;
static ngAcceptInputType_isFilterVisible: unknown;
static ngAcceptInputType_isToggleVisible: unknown;
static ngAcceptInputType_isToggleExpanded: unknown;
static ngAcceptInputType_hasLabels: unknown;
}
declare const EUI_TREE_LIST: readonly [typeof EuiTreeListComponent, typeof EuiTreeListItemComponent, typeof EuiTreeListItemLabelTagDirective, typeof EuiTreeListItemDetailsContentTagDirective, typeof EuiTreeListItemSubContainerContentTagDirective, typeof EuiTreeListItemContentComponent, typeof EuiTreeListToolbarComponent];
export { EUI_TREE_LIST, EuiTreeListComponent, EuiTreeListItemComponent, EuiTreeListItemContentComponent, EuiTreeListItemDetailsContentTagDirective, EuiTreeListItemLabelTagDirective, EuiTreeListItemSubContainerContentTagDirective, EuiTreeListToolbarComponent };
export type { EuiTreeListFilterParams };
//# sourceMappingURL=eui-components-eui-tree-list.d.ts.map