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 icon *
* 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