import * as i0 from '@angular/core'; import { OnInit, OnChanges, OnDestroy, TemplateRef, EventEmitter, SimpleChanges, AfterContentInit, AfterViewInit } from '@angular/core'; import { UxLinkLegacy } from '@eui/core'; import { CdkTree, NestedTreeControl } from '@angular/cdk/tree'; import { ArrayDataSource } from '@angular/cdk/collections'; import { CdkScrollable } from '@angular/cdk/scrolling'; import { ControlValueAccessor } from '@angular/forms'; type TreeDataModel = Array; type TreeItemModel = { node: TreeNode; children?: TreeDataModel; }; type TreeNode = { treeContentBlock: EuiTreeContentBlockModel | any; } & SelectionModel & ExpandModel; interface EuiTreeContentBlockModel { id?: string | number; label: string; tooltipLabel: string; url: string; urlExternal: string; urlExternalTarget: string; typeLabel: string; typeClass: string; chips?: Array<{ label: string; typeClass?: string; isOutline?: boolean; }>; iconClass: string; iconTypeClass: string; iconSvgName?: string; rightContent?: { iconClass: string; iconTypeClass: string; iconSvgName?: string; badges?: Array<{ label: string; typeClass: string; }>; chips?: Array<{ label: string; typeClass?: string; isOutline?: boolean; }>; contextMenuMetaData?: any; }; metaData: string; [key: string]: any; } type SelectionModel = { selectable?: boolean; isSelected?: boolean; isIndeterminate?: boolean; selectConfig?: SelectConfigModel; }; interface SelectConfigModel extends MultiSelectionLogic, SingleSelectionLogic { recursive?: boolean; noAutoSelectParent?: boolean; singleSelect?: boolean; } interface MultiSelectionLogic { recursive?: boolean; noAutoSelectParent?: boolean; } interface SingleSelectionLogic { singleSelect?: boolean; } type ExpandModel = { isExpanded?: boolean; }; type EuiTreeSelectionChanges = { added: TreeDataModel; removed: TreeDataModel; selection: TreeDataModel; }; type TreeDataRunTimeModel = Array; type TreeItemRunTimeModel = { index: number; path: string; children?: Array; last?: boolean; matched?: boolean; }; type TreeItemSelectionRecursiveModel = { selectionRecursiveState: SelectionRecursiveState; children?: Array; }; type SelectionRecursiveState = 'indeterminate' | 'allSelected' | 'allNotSelected'; declare function uxTreeNodesMetaDataMapper(oldTree: Array): TreeDataModel; declare class EuiTreePagination { private data; private startPage; private totalItems; private renderedPageCount; private perPage; private totalPages; constructor(data: T[], startPage: number, renderedPageCount: number, perPage: number); paginateNext(): { startPage: number; data: T[]; }; paginatePrev(): { startPage: number; data: T[]; }; getCurrentStartPage(): number; setCurrentStartPage(startPage: number): void; isAtMax(): boolean; getViewData(): { startPage: number; data: T[]; }; } declare class CustomNodeSelectFnHelper { private compInstance; constructor(compInstance: any); select(path: string, isChecked: boolean): void; getParents(path: string): Array; getTreeItem(path: string): TreeItemModel; getSelectionRecursiveState(path: string): TreeItemSelectionRecursiveModel; } type CustomNodeSelectFn = (path: string, isChecked: boolean, treeItem: TreeItemModel, helper: CustomNodeSelectFnHelper) => void; /** * @description * The eui-tree can be used to display hierarchy data with optional added behavior inside node templates and interactions that could affect the rendered data such as expand, collapse, direct actions, extra menu actions, etc. * Hierarchical tree component for displaying and interacting with nested data structures. * Supports single and multi-select modes, recursive selection, virtual scrolling for large datasets, and custom node templates. * Provides expand/collapse functionality, path highlighting, and customizable node rendering. * Integrates with Angular CDK Tree for efficient rendering and state management. * Commonly used for file explorers, organizational charts, category navigation, and any hierarchical data visualization. * * @usageNotes * ### Basic Usage * ```html * * * ``` * * ```typescript * treeData: TreeDataModel = [ * { * id: '1', * label: 'Root', * children: [ * { id: '1.1', label: 'Child 1' }, * { id: '1.2', label: 'Child 2' } * ] * } * ]; * ``` * * ### With Custom Template * ```html * * * * * * {{ node.label }} * * ``` * * ### Accessibility * - Use role="tree" on container (automatically applied) * - Each node has role="treeitem" * - Keyboard navigation: Arrow keys to navigate, Enter to select, Space to expand/collapse * - Provide aria-label describing the tree purpose * * ### Notes * - Virtual scrolling improves performance for large trees (1000+ nodes) * - Recursive selection propagates selection to all children * - Custom templates allow full control over node rendering * - Supports lazy loading of child nodes */ declare class EuiTreeComponent implements OnInit, OnChanges, OnDestroy { get cssClasses(): string; e2eAttr: string; /** * Hierarchy of data to display in the tree */ nodes: TreeDataModel; /** * Reference to the `ng-template` used to render node item */ nodeTemplateRef: TemplateRef; nodeContentMetadataTemplateRef: TemplateRef; rightContextMenuTemplateRef: TemplateRef; customNodeSelectFn: CustomNodeSelectFn; /** * Icon to display when a node is closed * * @default 'eui-chevron-right' */ expandedSvgIconClass: string; /** * Icon to display when a node is opened * * @default 'eui-chevron-down' */ collapsedSvgIconClass: string; cdkScrollableRef: CdkScrollable; treeComponentInstance: CdkTree; /** * Whether the full node display can be clicked to toggle the node. * * @default false */ isClickTogglingNode: boolean; /** * Whether multiple nodes can be selected. * * @default false */ isMultiselect: boolean; /** * Whether only one node can be selected. Select one will unselect the previous selected. * * @default false */ isSingleSelect: boolean; /** * In combination with `isMultiselect`. Whether the selection of a node will automatically select its children. * * @default false */ isRecursiveSelection: boolean; /** * In combination with `isMultiselect`. Whether the selection of all children will automatically select the parent. * * @default true */ isRecursiveParentSelection: boolean; /** * Whether the links are underlined on hiver in the tree. * * @default true */ showUnderlinedLinks: boolean; /** * Whether the lines are displayed on the left of nodes. * * @default true */ showLines: boolean; /** * Whether i18n key can be passed to be translated with `TranslateService`. * * @default true */ autoTranslate: boolean; /** * Whether all parents till the selected are highlighted in bold. * * @default false */ highlightPath: boolean; /** * Treshold for the virtual scroll to be activated * * @default 800 */ virtualScrollThreshold: number; /** * Size of the virtaul scroll pages * * @default 400 */ virtualScrollPageSize: number; selectionChange: EventEmitter; nodeClick: EventEmitter; nodeToggle: EventEmitter; cdkArrayDataSource: ArrayDataSource; cdkTreeControl: NestedTreeControl; renderTree: boolean; uid: string; protected _isMultiLevel: boolean; private processedNodes; private treeDataRunTime; private treeDataRunTimeBackup; private runTimeSelectionRecursiveState; private selectionModel; private tempSelectionModel; private selectionModelSubs; private scrollDispatcherSubs; private _selection; private treePagination; private changeDetectorRef; private scrollDispatcher; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; getSelection(): TreeDataModel; getProcessedNodes(): TreeDataModel; trackBy(index: number, item: TreeItemRunTimeModel): any; trackByControl(item: TreeItemRunTimeModel): any; getTreeItem(path: string): TreeItemModel; expandAll(): void; expandAt(path: string, detectChanges?: boolean): void; collapseAll(): void; collapseAt(path: string, detectChanges?: boolean): void; filterTerm(filterInput: string, filterKey?: string, showChildrenOfMatchedItems?: boolean): void; setAllSelection(isChecked: boolean): void; updateTreeItem(givenTreeItem: TreeItemModel, path: string): void; onNodeClick(treeRunTimeItem: TreeItemRunTimeModel, e: any): void; onNodeToggle(treeRunTimeItem: TreeItemRunTimeModel): void; onToggleButtonClick(treeRunTimeItem: TreeItemRunTimeModel, event: Event): void; nodeSelected(evt: any, path: string): void; hasChild: (_: number, item: TreeItemRunTimeModel) => boolean; onSelectFn(path: string): (evt: any) => void; getRunTimeSelectionRecursiveState(path: string): TreeItemSelectionRecursiveModel; private initTree; private processInputs; private overrideTreeDataModelForSelection; private runScrollListener; private getSelectionIndexOfItem; private silentSelect; private selectTreeItem; private deselectTreeItem; private createTreeDataRuntime; private applyRunTimeLastItems; private createRunTimeSelectionRecursiveState; private calculateItemSelectionRecursiveState; private decideSelectionRecursiveState; private syncStateChangesAtPath; private setTreeData; private setTreeDataRunTimeBackup; private setTreeDataRunTime; private setRunTimeSelectionRecursiveStateTree; private updateRunTimeSelectionRecursiveState; private setIsCheckedForAll; private runStateChangesForAll; private syncSelectionAtPath; private resolvePath; private getParentPaths; private calculateRunTimeState; private filterTreeData; private normalizedStr; private getInitialSelection; private scanSelection; private renderInitialExpand; private expandMatched; private getRunTimeTreeItem; private findRunTimeTreeItem; private getRunTimeBackupTreeItem; private getCssClasses; private checkIfMultiLevel; private checkIfCurrentScrollable; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isClickTogglingNode: unknown; static ngAcceptInputType_isMultiselect: unknown; static ngAcceptInputType_isSingleSelect: unknown; static ngAcceptInputType_isRecursiveSelection: unknown; static ngAcceptInputType_isRecursiveParentSelection: unknown; static ngAcceptInputType_showUnderlinedLinks: unknown; static ngAcceptInputType_showLines: unknown; static ngAcceptInputType_autoTranslate: unknown; static ngAcceptInputType_highlightPath: unknown; static ngAcceptInputType_virtualScrollThreshold: unknown; static ngAcceptInputType_virtualScrollPageSize: unknown; } /** * @description * Directive that integrates eui-tree with eui-dropdown for tree-based selection in dropdown menus. * Automatically updates dropdown trigger button label based on tree selection state. * Supports custom button templates for flexible trigger rendering. * Displays selected node labels as comma-separated text in the dropdown trigger. * Must be applied to eui-dropdown component containing an eui-tree child. * * @usageNotes * ### Basic Usage * ```html * * * * * * * * ``` * * ### With Custom Button Template * ```html * * * * * * * * * * ``` * * ### Accessibility * - Dropdown trigger button maintains keyboard accessibility * - Selection state announced through button label updates * - Tree navigation remains accessible within dropdown * * ### Notes * - Button label automatically updates on selection changes * - Default label shows comma-separated selected node labels * - Custom template receives current label as $implicit context * - Works with both single and multi-select tree modes */ declare class EuiDropdownTreeDirective implements AfterContentInit, AfterViewInit { /** * Template reference for custom dropdown trigger button rendering. * Receives current selection label as template context ($implicit). * Allows complete customization of dropdown trigger appearance. */ buttonTemplateRef: TemplateRef; euiTree: EuiTreeComponent; private buttonLabel; private buttonViewRef; private changeDetectorRef; private hostElement; private renderer; private euiDropdown; ngAfterContentInit(): void; ngAfterViewInit(): void; private createButtonLabel; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @description * Form control directive that integrates eui-tree with Angular reactive and template-driven forms. * Implements ControlValueAccessor to enable two-way binding and form validation for tree selections. * Provides customizable value transformation functions for mapping between form model and tree selection. * Automatically synchronizes tree selection state with form control value. * Must be applied to eui-tree component to enable form integration. * * @usageNotes * ### Basic Usage with Reactive Forms * ```html *
* * *
* ``` * * ```typescript * myForm = this.fb.group({ * selectedNodes: [[]] * }); * * ngOnInit() { * // Set initial selection * this.myForm.patchValue({ * selectedNodes: [{ id: '1', label: 'Node 1' }] * }); * } * ``` * * ### With Custom Value Mapping * ```html * * * ``` * * ```typescript * // Extract only IDs for form value * valueSetter = (selection: TreeDataModel) => { * return selection.map(item => item.node.treeContentBlock.id); * }; * * // Map IDs back to tree items * modelMapper = (ids: string[], tree: TreeDataModel) => { * return new EuiTreeHelper(tree).getItems(ids, 'node.treeContentBlock.id'); * }; * ``` * * ### Accessibility * - Form validation states properly announced * - Error messages associated with tree control * - Required field indication supported * * ### Notes * - Works with both reactive and template-driven forms * - Default value setter extracts full tree items * - Custom mappers allow flexible data transformation * - Supports form validation and dirty state tracking * - Selection changes automatically update form value */ declare class EuiTreeFormControlDirective implements ControlValueAccessor, AfterContentInit { private onChange; private onTouched; private tree; /** * Custom function to transform tree selection into form control value. * Receives current selection and returns the value to be written to the form control. * Default implementation extracts node IDs from selected items. * * @param selection - Current tree selection as TreeDataModel * @returns Transformed value to be set on the form control */ euiTreeControlValueSetter: (selection: TreeDataModel) => any; /** * Custom function to transform form control value into tree selection items. * Receives form control value and tree data, returns array of TreeItemModel to be selected. * Default implementation passes through the value unchanged. * * @param model - Current form control value * @param tree - Complete tree data structure for reference * @returns Array of TreeItemModel objects to be selected in the tree */ euiTreeControlModelMapper: (model: any, tree?: TreeDataModel) => Array; writeValue(value: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @description * Utility class for navigating and querying hierarchical tree data structures. * Provides methods to locate nodes by value, retrieve paths, and extract items from tree data. * Supports custom identifier keys for flexible node matching across different tree schemas. * Commonly used with eui-tree component for programmatic tree manipulation and node lookup. * * @usageNotes * ### Basic Usage * ```typescript * const treeData: TreeDataModel = [ * { * node: { treeContentBlock: { id: '1', label: 'Root' } }, * children: [ * { node: { treeContentBlock: { id: '1.1', label: 'Child' } } } * ] * } * ]; * * const helper = new EuiTreeHelper(treeData); * * // Get path to a node by ID * const path = helper.getPath('1.1', 'node.treeContentBlock.id'); * // Returns: '0.0' * * // Get multiple paths * const paths = helper.getPaths(['1', '1.1'], 'node.treeContentBlock.id'); * // Returns: ['0', '0.0'] * * // Get actual tree items * const items = helper.getItems(['1.1'], 'node.treeContentBlock.id'); * // Returns: [TreeItemModel] * ``` * * ### With Custom Identifier * ```typescript * // Tree with custom structure * const customTree = [ * { node: { customId: 'abc', label: 'Item' } } * ]; * * const helper = new EuiTreeHelper(customTree); * const path = helper.getPath('abc', 'node.customId'); * ``` * * ### Accessibility * - Helper methods are synchronous and non-blocking * - No direct accessibility concerns (utility class) * * ### Notes * - Path format uses dot notation: '0.2.1' (indices at each level) * - Supports deeply nested tree structures * - Deep equality comparison for complex value matching * - Identifier key uses dot notation for nested properties * - Returns null/empty array if no matches found */ declare class EuiTreeHelper { private readonly treeData; constructor(treeData: TreeDataModel); /** * Retrieves the path string for a single node matching the provided value. * Path format uses dot notation with indices (e.g., '0.2.1' for first child, third grandchild, second great-grandchild). * * @param value - Value to search for in the tree * @param identifierKey - Dot-notation property path to use for matching (e.g., 'node.treeContentBlock.id'). Default: 'node.treeContentBlock.id' * @returns Path string to the matched node, or null if not found */ getPath(value: any, identifierKey?: string): string; /** * Retrieves path strings for multiple nodes matching the provided values. * Returns paths in the order nodes are found during tree traversal. * * @param values - Array of values to search for in the tree * @param identifierKey - Dot-notation property path to use for matching * @returns Array of path strings to matched nodes */ getPaths(values: Array, identifierKey?: string): Array; /** * Retrieves the actual TreeItemModel objects for nodes matching the provided values. * Returns full node data including children and metadata. * * @param values - Array of values to search for in the tree * @param identifierKey - Dot-notation property path to use for matching * @returns Array of TreeItemModel objects for matched nodes */ getItems(values: Array, identifierKey?: string): Array; private traverse; private getValueAtKey; private deepEqual; } declare const EUI_TREE: readonly [typeof EuiTreeComponent]; export { CustomNodeSelectFnHelper, EUI_TREE, EuiDropdownTreeDirective, EuiTreeComponent, EuiTreeFormControlDirective, EuiTreeHelper, EuiTreePagination, uxTreeNodesMetaDataMapper }; export type { CustomNodeSelectFn, EuiTreeContentBlockModel, EuiTreeSelectionChanges, ExpandModel, MultiSelectionLogic, SelectConfigModel, SelectionModel, SelectionRecursiveState, SingleSelectionLogic, TreeDataModel, TreeDataRunTimeModel, TreeItemModel, TreeItemRunTimeModel, TreeItemSelectionRecursiveModel, TreeNode }; //# sourceMappingURL=eui-components-eui-tree.d.ts.map