@eui/components 17.0.0-next.20 → 17.0.0-next.21

package/fesm2022/eui-components-eui-tree.mjs

@@ -1,49 +1,114 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output, NgModule, Directive, Host, ContentChild, forwardRef } from '@angular/core';
-import * as i1 from '@angular/common';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, ViewChild, Output, NgModule, Directive, Host, ContentChild, forwardRef } from '@angular/core';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/router';
+import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i3 from '@eui/components/eui-input-checkbox';
+import * as i4 from '@eui/components/eui-input-checkbox';
 import { EuiInputCheckboxModule } from '@eui/components/eui-input-checkbox';
-import * as i5 from '@eui/components/eui-button';
+import * as i6 from '@eui/components/eui-button';
 import { EuiButtonModule } from '@eui/components/eui-button';
-import * as i6 from '@eui/components/eui-icon';
+import * as i7 from '@eui/components/eui-icon';
 import { EuiIconModule } from '@eui/components/eui-icon';
-import * as i7 from '@eui/components/eui-label';
+import * as i8 from '@eui/components/eui-label';
 import { EuiLabelModule } from '@eui/components/eui-label';
-import * as i8 from '@eui/components/eui-badge';
+import * as i9 from '@eui/components/eui-badge';
 import { EuiBadgeModule } from '@eui/components/eui-badge';
-import * as i9 from '@eui/components/eui-chip';
+import * as i10 from '@eui/components/eui-chip';
 import { EuiChipModule } from '@eui/components/eui-chip';
-import * as i10 from '@eui/components/eui-dropdown';
+import * as i11 from '@eui/components/eui-dropdown';
 import { EuiDropdownModule } from '@eui/components/eui-dropdown';
-import * as i4 from '@angular/cdk/tree';
+import * as i5 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import { ArrayDataSource, SelectionModel } from '@angular/cdk/collections';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i11 from '@ngx-translate/core';
+import * as i12 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
+import { debounceTime } from 'rxjs';
 
-class EuiTreeComponent {
-    get cssClasses() {
-        return this.getCssClasses();
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+function uxTreeNodesMetaDataMapper(oldTree) {
+    return oldTree.map((item) => {
+        if (item?.typeClass === 'default') {
+            // default typeClass will be
+            item.typeClass = 'secondary';
+        }
+        if (item?.badgeLabel) {
+            // default typeClass will be
+            if (item?.badges?.length > 0) {
+                item.badges.push({ label: item?.badgeLabel, typeClass: 'secondary' });
+            }
+            else {
+                item.badges = [{ label: item?.badgeLabel, typeClass: 'secondary' }];
+            }
+        }
+        return {
+            node: {
+                treeContentBlock: {
+                    label: item.label,
+                    typeLabel: item.typeLabel,
+                    typeClass: item.typeLabel && !item.typeClass ? 'secondary' : item.typeClass,
+                    tooltipLabel: item.tooltipLabel,
+                    url: item.url,
+                    urlExternal: item.urlExternal,
+                    urlExternalTarget: item.urlExternal && item.urlExternalTarget ? item.urlExternalTarget : undefined,
+                    badges: item.badges,
+                    metadata: item.metadata,
+                },
+            },
+            children: item.children ? uxTreeNodesMetaDataMapper(item.children) : undefined,
+        };
+    });
+}
+class EuiTreePagination {
+    constructor(data, startPage, renderedPageCount, perPage) {
+        this.data = data;
+        this.setCurrentStartPage(startPage);
+        this.renderedPageCount = renderedPageCount;
+        this.totalItems = this.data.length;
+        this.perPage = perPage;
+        this.totalPages = Math.ceil(this.totalItems / this.perPage);
+    }
+    paginateNext() {
+        if (this.startPage < this.totalPages) {
+            this.startPage += 1;
+        }
+        return this.getViewData();
     }
-    // @ViewChild('treeComponentInstance') public treeComponentInstance: any;
-    // @ViewChild('treeComponentInstance') public treeComponentInstance: any;
-    get showUnderlinedLinks() {
-        return this._showUnderlinedLinks;
+    paginatePrev() {
+        if (this.startPage > 1) {
+            this.startPage -= 1;
+        }
+        return this.getViewData();
     }
-    set showUnderlinedLinks(value) {
-        this._showUnderlinedLinks = coerceBooleanProperty(value);
+    getCurrentStartPage() {
+        return this.startPage;
     }
-    get showLines() {
-        return this._showLines;
+    setCurrentStartPage(startPage) {
+        this.startPage = startPage;
     }
-    set showLines(value) {
-        this._showLines = coerceBooleanProperty(value);
+    isAtMax() {
+        return this.totalPages < this.startPage + this.renderedPageCount;
     }
+    getViewData() {
+        const startIndex = (this.startPage - 1) * this.perPage;
+        const endIndex = startIndex + this.perPage * this.renderedPageCount;
+        const pageData = structuredClone(this.data).slice(startIndex, endIndex);
+        return {
+            startPage: this.startPage,
+            data: pageData,
+        };
+    }
+}
+
+class EuiTreeComponent {
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    // @ViewChild('treeComponentInstance') public treeComponentInstance: any;
     get isClickTogglingNode() {
         return this._isClickTogglingNode;
     }
@@ -56,6 +121,12 @@ class EuiTreeComponent {
     set isMultiselect(value) {
         this._isMultiselect = coerceBooleanProperty(value);
     }
+    get isSingleSelect() {
+        return this._isSingleSelect;
+    }
+    set isSingleSelect(value) {
+        this._isSingleSelect = coerceBooleanProperty(value);
+    }
     get isRecursiveSelection() {
         return this._isRecursiveSelection;
     }
@@ -68,14 +139,33 @@ class EuiTreeComponent {
     set isRecursiveParentSelection(value) {
         this._isRecursiveParentSelection = coerceBooleanProperty(value);
     }
+    get showUnderlinedLinks() {
+        return this._showUnderlinedLinks;
+    }
+    set showUnderlinedLinks(value) {
+        this._showUnderlinedLinks = coerceBooleanProperty(value);
+    }
+    get showLines() {
+        return this._showLines;
+    }
+    set showLines(value) {
+        this._showLines = coerceBooleanProperty(value);
+    }
     get autoTranslate() {
         return this._autoTranslate;
     }
     set autoTranslate(value) {
         this._autoTranslate = coerceBooleanProperty(value);
     }
-    constructor(changeDetectorRef) {
+    get highlightPath() {
+        return this._highlightPath;
+    }
+    set highlightPath(value) {
+        this._highlightPath = coerceBooleanProperty(value);
+    }
+    constructor(changeDetectorRef, scrollDispatcher) {
         this.changeDetectorRef = changeDetectorRef;
+        this.scrollDispatcher = scrollDispatcher;
         this.e2eAttr = 'eui-tree';
         this.expandedSvgIconClass = 'eui-chevron-forward:eui';
         this.collapsedSvgIconClass = 'eui-chevron-down:eui';
@@ -85,17 +175,20 @@ class EuiTreeComponent {
         this.uid = Math.floor(Math.random() * 1000000000).toString();
         this._isClickTogglingNode = false;
         this._isMultiselect = false;
+        this._isSingleSelect = false;
         this._isRecursiveSelection = false;
         this._isRecursiveParentSelection = true;
-        this._autoTranslate = true;
+        this._showUnderlinedLinks = false;
         this._showLines = false;
-        this.hasChild = (_, item) => !!item?.children && item?.children?.length > 0;
+        this._autoTranslate = true;
+        this._highlightPath = false;
+        this.hasChild = (_, item) => !!item?.children && item?.children?.length >= 0;
     }
     ngOnInit() {
         this.initTree();
     }
     ngOnChanges(changes) {
-        if (changes['nodes'].currentValue !== changes['nodes'].previousValue) {
+        if (changes['nodes']?.currentValue !== changes['nodes']?.previousValue) {
             this.renderTree = false;
             this.initTree();
         }
@@ -104,14 +197,25 @@ class EuiTreeComponent {
         if (this.selectionModelSubs) {
             this.selectionModelSubs.unsubscribe();
         }
+        if (this.scrollDispatcherSubs) {
+            this.scrollDispatcherSubs.unsubscribe();
+        }
     }
     getSelection() {
         return this._selection;
     }
+    getProcessedNodes() {
+        return this.processedNodes;
+    }
+    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    trackBy(index, item) {
+        return item.path;
+    }
     // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    trackBy(index, el) {
-        return el.parent;
+    trackByControl(item) {
+        return item;
     }
     getTreeItem(path) {
         const indexArr = this.resolvePath(path);
@@ -144,102 +248,154 @@ class EuiTreeComponent {
         this.changeDetectorRef.markForCheck();
     }
     filterTerm(filterInput) {
-        if (filterInput && filterInput !== '') {
+        if (filterInput !== '' && filterInput !== null && typeof filterInput !== 'undefined') {
+            this.treeDataRunTime = this.filterTreeData(structuredClone(this.treeDataRunTimeBackup), 'label', filterInput);
+            this.treeDataRunTime = this.applyRunTimeLastItems(this.treeDataRunTime);
+            this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+            this.cdkTreeControl = new NestedTreeControl((node) => node?.children, { trackBy: this.trackByControl });
+            this.cdkTreeControl.dataNodes = this.treeDataRunTime;
             this.renderTree = false;
             this.changeDetectorRef.detectChanges();
-            setTimeout(() => {
-                this.treeDataRunTime = this.filterTreeData(structuredClone(this.treeDataRunTimeBackup), 'label', filterInput);
-                this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
-                this.cdkTreeControl = new NestedTreeControl((node) => node?.children);
-                this.cdkTreeControl.dataNodes = this.treeDataRunTime;
-                this.renderTree = true;
-                this.changeDetectorRef.detectChanges();
-                this.expandAll();
-            });
+            this.renderTree = true;
+            this.changeDetectorRef.detectChanges();
+            this.expandAll();
         }
         else {
+            this.treeDataRunTime = structuredClone(this.treeDataRunTimeBackup);
+            this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+            this.cdkTreeControl = new NestedTreeControl((node) => node?.children, { trackBy: this.trackByControl });
+            this.cdkTreeControl.dataNodes = this.treeDataRunTime;
             this.renderTree = false;
             this.changeDetectorRef.detectChanges();
-            setTimeout(() => {
-                this.treeDataRunTime = structuredClone(this.treeDataRunTimeBackup);
-                this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
-                this.cdkTreeControl = new NestedTreeControl((node) => node?.children);
-                this.cdkTreeControl.dataNodes = this.treeDataRunTime;
-                this.renderTree = true;
-                this.changeDetectorRef.detectChanges();
-                this.expandAll();
-            });
+            this.renderTree = true;
+            this.changeDetectorRef.detectChanges();
+            this.expandAll();
         }
     }
     setAllSelection(isChecked) {
-        this.setIsCheckedForAll(this.processedNodes, isChecked, this.treeDataRunTime);
+        this.setIsCheckedForAll(this.treeDataRunTime, isChecked);
         this.changeDetectorRef.markForCheck();
     }
-    onNodeClick(treeItem) {
-        this.nodeClick.emit(this.getTreeItem(treeItem?.path));
+    updateTreeItem(treeItem, path) {
+        this.setTreeData(path, this.processInputs([treeItem])[0]);
+        const pathArr = path.split('.');
+        const index = parseInt(pathArr.pop(), 10);
+        const treeItemRuntime = this.calculateRunTimeState(treeItem, index, pathArr.join('.'));
+        this.setTreeDataRunTime(path, treeItemRuntime);
+        // itemRecursiveSelectionState
+        const itemRecursiveSelectionState = this.calculateItemSelectionRecursiveState(treeItem);
+        this.setRunTimeSelectionRecursiveStateTree(path, itemRecursiveSelectionState);
+        this.syncStateChangesAtPath(path);
+        // Rendering
+        this.changeDetectorRef.detectChanges();
+        this.treeComponentInstance.renderNodeChanges([]);
+        this.treeComponentInstance.renderNodeChanges(this.treeDataRunTime);
+        if (this.cdkTreeControl.isExpanded(treeItemRuntime) && !treeItem.node.isExpanded) {
+            this.cdkTreeControl.toggle(treeItemRuntime);
+        }
+        else if (!this.cdkTreeControl.isExpanded(treeItemRuntime) && treeItem.node.isExpanded) {
+            this.cdkTreeControl.expand(treeItemRuntime);
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    onNodeClick(treeRunTimeItem) {
+        this.nodeClick.emit(this.getTreeItem(treeRunTimeItem?.path));
         if (this.isClickTogglingNode) {
-            this.cdkTreeControl.toggle(treeItem);
-            this.onNodeToggle(treeItem);
+            this.cdkTreeControl.toggle(treeRunTimeItem);
+            this.onNodeToggle(treeRunTimeItem);
         }
     }
-    onNodeToggle(treeItem) {
-        this.nodeToggle.emit(this.getTreeItem(treeItem?.path));
+    onNodeToggle(treeRunTimeItem) {
+        this.getTreeItem(treeRunTimeItem?.path).node.isExpanded = this.cdkTreeControl.isExpanded(treeRunTimeItem);
+        this.nodeToggle.emit(this.getTreeItem(treeRunTimeItem?.path));
     }
     // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     nodeSelected(evt, path) {
         const item = this.getTreeItem(path);
-        const treeItemModel = this.getRunTimeTreeItem(path);
+        const runTimeTreeItem = this.getRunTimeBackupTreeItem(path);
+        const renderedRunTimeTreeItem = this.getRunTimeTreeItem(path);
         const node = item.node;
-        const children = item.children;
-        const pathArr = path.split('.');
-        const hasParent = pathArr.length > 1;
-        // Sets the hasParent If there is a parent, and removes the last element form pathArr.
-        if (hasParent) {
-            pathArr.pop();
-        }
-        // Silently sets the isSelected.
-        node.isSelected = evt.target.checked;
-        // Sets isSelected change on the control.
-        if (node.isSelected) {
-            this.selectTreeItem(treeItemModel);
+        // console.log(path,item,runTimeTreeItem, renderedRunTimeTreeItem);
+        if (!node?.selectConfig?.singleSelect) {
+            node.isSelected = evt.target.checked;
+            node.isIndeterminate = false;
+            // If the node is recursive it sets every children with the change.
+            if (renderedRunTimeTreeItem?.children && renderedRunTimeTreeItem?.children?.length > 0) {
+                if (node?.selectConfig?.recursive) {
+                    // console.log(renderedRunTimeTreeItem);
+                    this.setIsCheckedForAll(renderedRunTimeTreeItem?.children, evt.target.checked);
+                }
+            }
+            this.setRunTimeSelectionRecursiveStateTree(path, this.calculateItemSelectionRecursiveState(structuredClone(this.getTreeItem(path))));
+            if (renderedRunTimeTreeItem?.children && renderedRunTimeTreeItem?.children?.length > 0) {
+                if (node?.selectConfig?.recursive) {
+                    // this.setIsCheckedForAll(renderedRunTimeTreeItem?.children, evt.target.checked);
+                    this.runStateChangesForAll(renderedRunTimeTreeItem?.children);
+                }
+                this.treeComponentInstance?.renderNodeChanges([]);
+                this.treeComponentInstance?.renderNodeChanges(this.treeDataRunTime);
+            }
+            this.syncStateChangesAtPath(path);
+            if (this.getTreeItem(path).node.isSelected) {
+                this.selectTreeItem(runTimeTreeItem);
+            }
+            else {
+                this.deselectTreeItem(runTimeTreeItem);
+            }
+            const nodePathsSeq = this.getParentPaths(path);
+            if (nodePathsSeq.length > 0) {
+                nodePathsSeq.forEach((nodePath) => {
+                    const treeItem = this.getTreeItem(nodePath);
+                    const childStates = this.getRunTimeSelectionRecursiveState(nodePath).children.map((_) => _.selectionRecursiveState);
+                    this.updateRunTimeSelectionRecursiveState(nodePath, this.decideSelectionRecursiveState(childStates, treeItem.node?.isSelected, treeItem.node?.selectConfig?.recursive, treeItem.node?.selectConfig?.noAutoSelectParent));
+                    this.syncStateChangesAtPath(nodePath);
+                });
+                this.changeDetectorRef.detectChanges();
+            }
+            else {
+                this.changeDetectorRef.detectChanges();
+            }
         }
         else {
-            this.deselectTreeItem(treeItemModel);
-        }
-        node.isIndeterminate = false;
-        // If the node is recursive it sets every children with the change.
-        if (children && children.length > 0) {
-            if (node?.selectConfig?.recursive) {
-                this.setIsCheckedForAll(children, evt.target.checked, treeItemModel?.children);
+            const prevItem = this.selectionModel.selected[0];
+            if (evt.target.checked) {
+                if (prevItem) {
+                    this.getTreeItem(prevItem.path).node.isSelected = false;
+                    this.selectionModel.deselect(prevItem);
+                }
+                item.node.isSelected = true;
+                this.selectionModel.select(runTimeTreeItem);
+            }
+            else {
+                item.node.isSelected = false;
+                this.selectionModel.deselect(runTimeTreeItem);
+            }
+            if (this.highlightPath) {
+                if (evt.target.checked && prevItem) {
+                    const prevItemNodePathsSeq = this.getParentPaths(prevItem.path);
+                    if (prevItemNodePathsSeq.length > 0) {
+                        prevItemNodePathsSeq.forEach((nodePath) => {
+                            this.updateRunTimeSelectionRecursiveState(nodePath, 'allNotSelected');
+                            this.syncStateChangesAtPath(nodePath);
+                        });
+                    }
+                }
+                const nodePathsSeq = this.getParentPaths(path);
+                if (nodePathsSeq?.length > 0) {
+                    nodePathsSeq.forEach((nodePath) => {
+                        this.updateRunTimeSelectionRecursiveState(nodePath, evt.target.checked ? 'indeterminate' : 'allNotSelected');
+                        this.syncStateChangesAtPath(nodePath);
+                    });
+                    this.changeDetectorRef.detectChanges();
+                }
             }
-        }
-        // Calculates to the node and its children node state
-        this.setRunTimeSelectionRecursiveStateTree(path, this.calculateItemSelectionRecursiveState(structuredClone(this.getTreeItem(path))));
-        // It is here for the filter edge case.
-        this.syncStateChangesAtPath(path);
-        if (hasParent) {
-            // Calculates parent path
-            const parentPath = pathArr.join('.');
-            // Creating node index sequence f.e If path is '1.2' it will be [1,2]
-            const nodeIndexSeq = parentPath.split('.').map((indexStr) => parseInt(indexStr, 10));
-            // Calculating the node paths array to be re-calculated from bottom to top
-            const nodePathsSeq = [];
-            nodeIndexSeq.forEach((nodeIndex, index) => {
-                nodePathsSeq[index] = nodeIndexSeq.slice(0, index + 1).join('.');
-            });
-            nodePathsSeq.reverse();
-            nodePathsSeq.forEach((nodePath) => {
-                this.updateRunTimeSelectionRecursiveState(nodePath, this.decideSelectionRecursiveState(this.getRunTimeSelectionRecursiveState(nodePath)));
-                this.syncStateChangesAtPath(nodePath);
-            });
-            this.changeDetectorRef.detectChanges();
         }
     }
     // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onSelectFn(path, treeItemModel) {
-        if (treeItemModel?.node?.selectable) {
+    onSelectFn(path) {
+        if (this.getTreeItem(path)?.node?.selectable) {
             const nodeSelected = this.nodeSelected.bind(this);
             // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -251,23 +407,54 @@ class EuiTreeComponent {
             console.warn('treeItemModel.node.selectable is false, you can not implement onSelect');
         };
     }
+    getRunTimeSelectionRecursiveState(path) {
+        const indexArr = this.resolvePath(path);
+        let nodeArr = this.runTimeSelectionRecursiveState;
+        let node;
+        indexArr?.forEach((pathIndex, index) => {
+            if (index < indexArr.length - 1) {
+                nodeArr = nodeArr[pathIndex]?.children;
+            }
+            else {
+                node = nodeArr[pathIndex];
+            }
+        });
+        return node;
+    }
     initTree() {
         if (this.nodes) {
             this._isMultiLevel = this.checkIfMultiLevel(this.nodes);
             this.processedNodes = this.processInputs(structuredClone(this.nodes));
-            this.createTreeDataRuntime(this.processedNodes);
-            this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+            this.treeDataRunTime = this.createTreeDataRuntime(this.processedNodes);
+            this.treeDataRunTime = this.applyRunTimeLastItems(this.treeDataRunTime);
+            this.runTimeSelectionRecursiveState = this.createRunTimeSelectionRecursiveState(this.processedNodes);
             this.treeDataRunTimeBackup = structuredClone(this.treeDataRunTime);
-            this.cdkTreeControl = new NestedTreeControl((node) => node?.children);
-            this.cdkTreeControl.dataNodes = this.treeDataRunTime;
+            // console.log(this.processedNodes,this.treeDataRunTime);
+            if (this.treeDataRunTimeBackup.length > 800) {
+                this.treePagination = new EuiTreePagination(this.treeDataRunTimeBackup, 1, 2, 400);
+                const paginatedData = this.treePagination.getViewData().data;
+                this.cdkArrayDataSource = new ArrayDataSource(paginatedData);
+                this.cdkTreeControl = new NestedTreeControl((node) => node?.children, {
+                    trackBy: this.trackByControl,
+                });
+                this.cdkTreeControl.dataNodes = paginatedData;
+                this.runScrollListener();
+            }
+            else {
+                this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+                this.cdkTreeControl = new NestedTreeControl((node) => node?.children, {
+                    trackBy: this.trackByControl,
+                });
+                this.cdkTreeControl.dataNodes = this.treeDataRunTime;
+            }
             this.renderInitialExpand(this.treeDataRunTime);
             this.selectionModel = new SelectionModel(true, this.getInitialSelection(this.treeDataRunTime), true, (a, b) => a?.path === b?.path);
-            this._selection = [...this.selectionModel.selected]?.map((item) => this.getTreeItem(item.path));
+            this._selection = [...this.selectionModel.selected]?.map((item) => this.getTreeItem(item?.path));
             this.renderTree = true;
             if (this.selectionModelSubs) {
                 this.selectionModelSubs.unsubscribe();
             }
-            this.selectionModelSubs = this.selectionModel.changed.subscribe((sc) => {
+            this.selectionModelSubs = this.selectionModel.changed.pipe(debounceTime(1)).subscribe((sc) => {
                 const selectionChange = {
                     added: sc.added.map((_) => this.getTreeItem(_.path)),
                     removed: sc.removed.map((_) => this.getTreeItem(_.path)),
@@ -283,10 +470,13 @@ class EuiTreeComponent {
         if (this.isMultiselect) {
             treeData = this.overrideTreeDataModelForSelection(treeData, this.isRecursiveSelection, !this.isRecursiveParentSelection);
         }
+        if (this.isSingleSelect) {
+            treeData = this.overrideTreeDataModelForSelection(treeData, false, false, true);
+        }
         return treeData;
     }
-    overrideTreeDataModelForSelection(nodeArr, isRecursive, noAutoSelectParent) {
-        return nodeArr?.map((item) => {
+    overrideTreeDataModelForSelection(nodeArr, isRecursive, noAutoSelectParent, singleSelect) {
+        return nodeArr?.map((item, index) => {
             if (item?.children && item.children.length > 0) {
                 return {
                     ...item,
@@ -303,9 +493,12 @@ class EuiTreeComponent {
                             noAutoSelectParent: typeof item?.node?.selectConfig?.noAutoSelectParent === 'undefined'
                                 ? noAutoSelectParent
                                 : item?.node?.selectConfig?.noAutoSelectParent,
+                            singleSelect: typeof item?.node?.selectConfig?.singleSelect === 'undefined'
+                                ? singleSelect
+                                : item?.node?.selectConfig?.singleSelect,
                         },
                     },
-                    children: this.overrideTreeDataModelForSelection(item.children, isRecursive, noAutoSelectParent),
+                    children: this.overrideTreeDataModelForSelection(item.children, isRecursive, noAutoSelectParent, singleSelect),
                 };
             }
             else {
@@ -314,11 +507,67 @@ class EuiTreeComponent {
                     node: {
                         ...item.node,
                         selectable: typeof item?.node?.selectable === 'undefined' ? true : item?.node?.selectable,
+                        selectConfig: {
+                            ...item.node?.selectConfig,
+                            singleSelect: typeof item?.node?.selectConfig?.singleSelect === 'undefined'
+                                ? singleSelect
+                                : item?.node?.selectConfig?.singleSelect,
+                        },
                     },
                 };
             }
         });
     }
+    runScrollListener() {
+        this.scrollDispatcherSubs = this.scrollDispatcher.scrolled().subscribe((scrollable) => {
+            if (scrollable && this.checkIfCurrentScrollable(scrollable)) {
+                const isAtBottom = scrollable?.getElementRef().nativeElement.scrollTop + scrollable?.getElementRef().nativeElement.clientHeight >=
+                    scrollable?.getElementRef().nativeElement.scrollHeight;
+                const isAtTop = scrollable?.getElementRef().nativeElement.scrollTop === 0;
+                // console.log('Element:', this.cdkScrollableRef.getElementRef());
+                if (isAtBottom && !this.treePagination.isAtMax()) {
+                    if (this.nodes.length > 0) {
+                        this.treeDataRunTime = this.treePagination.paginateNext().data;
+                        this.treeDataRunTime = this.applyRunTimeLastItems(this.treeDataRunTime);
+                        this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+                        this.cdkTreeControl = new NestedTreeControl((node) => node?.children, {
+                            trackBy: this.trackByControl,
+                        });
+                        this.cdkTreeControl.dataNodes = this.treeDataRunTime;
+                        this.renderTree = false;
+                        this.changeDetectorRef.detectChanges();
+                        this.renderTree = true;
+                        this.changeDetectorRef.detectChanges();
+                        this.expandAll();
+                        const totalHeight = scrollable.measureScrollOffset('bottom') + scrollable.measureScrollOffset('top');
+                        const viewportHeight = scrollable.getElementRef().nativeElement.clientHeight;
+                        const positionToScroll = totalHeight - viewportHeight;
+                        scrollable.scrollTo({ top: positionToScroll / 2 });
+                    }
+                }
+                else if (isAtTop && this.treePagination.getCurrentStartPage() > 1) {
+                    if (this.nodes.length > 0) {
+                        this.treeDataRunTime = this.treePagination.paginatePrev().data;
+                        this.treeDataRunTime = this.applyRunTimeLastItems(this.treeDataRunTime);
+                        this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
+                        this.cdkTreeControl = new NestedTreeControl((node) => node?.children, {
+                            trackBy: this.trackByControl,
+                        });
+                        this.cdkTreeControl.dataNodes = this.treeDataRunTime;
+                        this.renderTree = false;
+                        this.changeDetectorRef.detectChanges();
+                        this.renderTree = true;
+                        this.changeDetectorRef.detectChanges();
+                        this.expandAll();
+                        const totalHeight = scrollable.measureScrollOffset('bottom') + scrollable.measureScrollOffset('top');
+                        const viewportHeight = scrollable.getElementRef().nativeElement.clientHeight;
+                        const positionToScroll = totalHeight - viewportHeight;
+                        scrollable.scrollTo({ top: positionToScroll / 2 + viewportHeight });
+                    }
+                }
+            }
+        });
+    }
     getSelectionIndexOfItem(runTimeTreeItem) {
         return this.selectionModel.selected.findIndex((i) => i?.path === runTimeTreeItem?.path);
     }
@@ -336,54 +585,65 @@ class EuiTreeComponent {
             this.selectionModel.setSelection(...newSelection);
         }
     }
-    // Creates treeDataRunTime & runTimeSelectionRecursiveState for separate the logic.
     createTreeDataRuntime(nodes) {
-        this.treeDataRunTime = structuredClone(nodes)?.map((item, index) => {
-            return this.calculateRunTimeState({ ...item }, index);
+        return structuredClone(nodes)?.map((item, index) => {
+            return this.calculateRunTimeState(item, index);
         });
-        this.runTimeSelectionRecursiveState = structuredClone(nodes)?.map((item) => this.calculateItemSelectionRecursiveState({ ...item }));
+    }
+    applyRunTimeLastItems(items) {
+        return items?.map((item, index) => {
+            if (item?.children) {
+                return {
+                    ...item,
+                    last: items.length === index + 1 ? true : undefined,
+                    children: item.children?.length > 0 ? this.applyRunTimeLastItems(item.children) : item?.children,
+                };
+            }
+            else {
+                return {
+                    ...item,
+                    last: items.length === index + 1 ? true : undefined,
+                };
+            }
+        });
+    }
+    createRunTimeSelectionRecursiveState(nodes) {
+        return structuredClone(nodes)?.map((item) => this.calculateItemSelectionRecursiveState({ ...item }));
     }
     // Creating run time state which includes children selection state for selection tree.
-    calculateItemSelectionRecursiveState(treeItem) {
+    calculateItemSelectionRecursiveState(treeItem, isSelected) {
+        const childrenSelectionRecursive = [];
         if (treeItem.children && treeItem.children.length > 0) {
             treeItem.children.forEach((child, index) => {
-                treeItem.children[index] = this.calculateItemSelectionRecursiveState(child);
+                childrenSelectionRecursive[index] = this.calculateItemSelectionRecursiveState(child);
             });
         }
-        const itemState = this.decideSelectionRecursiveState(treeItem);
+        const childStates = childrenSelectionRecursive.map((_) => _.selectionRecursiveState);
+        const itemState = this.decideSelectionRecursiveState(childStates, isSelected || treeItem.node.isSelected, treeItem.node?.selectConfig?.recursive, treeItem.node?.selectConfig?.noAutoSelectParent);
         return {
-            ...treeItem,
             selectionRecursiveState: itemState,
+            children: childrenSelectionRecursive,
         };
     }
-    decideSelectionRecursiveState(treeItem) {
-        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const runTimeItems = treeItem.children || [];
-        const childStates = runTimeItems?.map((item) => item.selectionRecursiveState);
+    decideSelectionRecursiveState(childStates = [], isSelected, recursive, noAutoSelectParent) {
         let itemState = 'indeterminate';
-        if (treeItem.node.isSelected && childStates.every((state) => state === 'allSelected')) {
+        if (isSelected && childStates.every((state) => state === 'allSelected')) {
             itemState = 'allSelected';
         }
-        else if (!treeItem.node.isSelected && childStates.every((state) => state === 'allNotSelected')) {
+        else if (!isSelected && childStates.every((state) => state === 'allNotSelected')) {
             itemState = 'allNotSelected';
         }
-        else if (treeItem.node?.selectConfig?.recursive &&
-            childStates.every((state) => state === 'allSelected') &&
-            !treeItem.node.isSelected &&
-            !treeItem?.node?.selectConfig?.noAutoSelectParent) {
+        else if (recursive && childStates.every((state) => state === 'allSelected') && !isSelected && !noAutoSelectParent) {
             itemState = 'allSelected';
         }
-        else if (treeItem.node?.selectConfig?.recursive &&
-            childStates.every((state) => state === 'allNotSelected') &&
-            treeItem.node.isSelected) {
+        else if (recursive && childStates.every((state) => state === 'allNotSelected') && isSelected) {
             itemState = 'allNotSelected';
         }
         return itemState;
     }
     syncStateChangesAtPath(nodePath) {
         const treeItem = this.getTreeItem(nodePath);
-        const runTimeTreeItem = this.getRunTimeTreeItem(nodePath);
+        const runTimeTreeItem = this.getRunTimeBackupTreeItem(nodePath);
         const runTimeSelectionRecursiveItem = this.getRunTimeSelectionRecursiveState(nodePath);
         if (treeItem?.node?.selectable && treeItem.node?.selectConfig?.recursive) {
             if (!treeItem.node?.selectConfig?.noAutoSelectParent) {
@@ -402,27 +662,37 @@ class EuiTreeComponent {
                 };
             }
             // console.log(treeItem, treeItem.node.treeContentBlock.label, 'isSelected:' + treeItem.node.isSelected, 'isIndeterminate:' + treeItem.node.isIndeterminate);
-            if (treeItem.node.isSelected === true) {
+            if (treeItem.node.isSelected === true && !this.selectionModel.isSelected(runTimeTreeItem)) {
                 this.selectTreeItem(runTimeTreeItem);
             }
-            else {
+            else if (treeItem.node.isSelected === false && this.selectionModel.isSelected(runTimeTreeItem)) {
                 this.deselectTreeItem(runTimeTreeItem);
             }
         }
     }
-    getRunTimeSelectionRecursiveState(path) {
+    setTreeData(path, item) {
         const indexArr = this.resolvePath(path);
-        let nodeArr = this.runTimeSelectionRecursiveState;
-        let node;
+        let itemArr = this.processedNodes;
         indexArr.forEach((pathIndex, index) => {
             if (index < indexArr.length - 1) {
-                nodeArr = nodeArr[pathIndex]?.children;
+                itemArr = itemArr[pathIndex]?.children;
             }
             else {
-                node = nodeArr[pathIndex];
+                itemArr[pathIndex] = item;
+            }
+        });
+    }
+    setTreeDataRunTime(path, item) {
+        const indexArr = this.resolvePath(path);
+        let itemArr = this.treeDataRunTime;
+        indexArr.forEach((pathIndex, index) => {
+            if (index < indexArr.length - 1) {
+                itemArr = itemArr[pathIndex]?.children;
+            }
+            else {
+                itemArr[pathIndex] = item;
             }
         });
-        return node;
     }
     setRunTimeSelectionRecursiveStateTree(path, item) {
         const indexArr = this.resolvePath(path);
@@ -451,53 +721,90 @@ class EuiTreeComponent {
             }
         });
     }
-    setIsCheckedForAll(nodeArr, isChecked, runTimeTreeData) {
-        nodeArr.forEach((item, index) => {
-            if (runTimeTreeData[index] && nodeArr[index]?.node?.selectable) {
-                nodeArr[index] = {
-                    ...item,
-                    node: {
-                        ...item.node,
-                        isSelected: isChecked,
-                        isIndeterminate: false,
-                    },
-                };
+    setIsCheckedForAll(nodeArr, isChecked) {
+        nodeArr.forEach((runTimeItem, index) => {
+            const treeItem = this.getTreeItem(runTimeItem.path);
+            const node = treeItem.node;
+            if (node?.selectable) {
+                node.isSelected = isChecked;
+                node.isIndeterminate = false;
                 if (isChecked) {
-                    this.selectTreeItem(runTimeTreeData[index]);
+                    this.selectTreeItem(runTimeItem);
                 }
                 else {
-                    this.deselectTreeItem(runTimeTreeData[index]);
+                    this.deselectTreeItem(runTimeItem);
                 }
             }
-            if (runTimeTreeData[index]?.children?.length > 0 && nodeArr[index].children && nodeArr[index].children.length > 0) {
-                this.setIsCheckedForAll(nodeArr[index].children, isChecked, runTimeTreeData[index].children);
+            if (runTimeItem?.children?.length > 0 && runTimeItem?.children && runTimeItem?.children.length > 0) {
+                this.setIsCheckedForAll(nodeArr[index].children, isChecked);
             }
         });
     }
+    runStateChangesForAll(nodeArr) {
+        nodeArr.forEach((runTimeItem, index) => {
+            if (runTimeItem?.children?.length > 0 && runTimeItem?.children && runTimeItem?.children.length > 0) {
+                this.syncSelectionAtPath(runTimeItem);
+                this.runStateChangesForAll(nodeArr[index].children);
+            }
+        });
+    }
+    syncSelectionAtPath(runTimeTreeItem) {
+        // It is here for the filter edge case.
+        this.syncStateChangesAtPath(runTimeTreeItem.path);
+        // Sets isSelected change on the control.
+        if (this.getTreeItem(runTimeTreeItem.path).node.isSelected) {
+            this.selectTreeItem(runTimeTreeItem);
+        }
+        else {
+            this.deselectTreeItem(runTimeTreeItem);
+        }
+    }
     resolvePath(path) {
         return path?.split('.').map((index) => parseInt(index, 10));
     }
+    getParentPaths(path) {
+        const pathArr = path.split('.');
+        const hasParent = pathArr.length > 1;
+        // Sets the hasParent If there is a parent, and removes the last element form pathArr.
+        if (hasParent) {
+            pathArr.pop();
+            // Calculates parent path
+            const parentPath = pathArr.join('.');
+            // Creating node index sequence f.e If path is '1.2' it will be [1,2]
+            const nodeIndexSeq = parentPath.split('.').map((indexStr) => parseInt(indexStr, 10));
+            // Calculating the node paths array to be re-calculated from bottom to top
+            const nodePathsSeq = [];
+            nodeIndexSeq.forEach((nodeIndex, index) => {
+                nodePathsSeq[index] = nodeIndexSeq.slice(0, index + 1).join('.');
+            });
+            return nodePathsSeq.reverse();
+        }
+        else {
+            return [];
+        }
+    }
     calculateRunTimeState(treeItem, index, parentPath) {
-        treeItem.path = parentPath ? parentPath + '.' + index : index.toString();
-        treeItem.index = index;
-        if (treeItem.children && treeItem.children.length > 0) {
+        const runTimeTreeItem = {
+            path: parentPath ? parentPath + '.' + index : index.toString(),
+            index,
+        };
+        if (treeItem.children && treeItem.children.length >= 0) {
+            runTimeTreeItem.children = [];
             treeItem.children.forEach((child, treeItemIndex) => {
-                treeItem.children[treeItemIndex] = this.calculateRunTimeState(child, treeItemIndex, treeItem.path);
+                runTimeTreeItem.children[treeItemIndex] = this.calculateRunTimeState(child, treeItemIndex, runTimeTreeItem.path);
             });
         }
-        return treeItem;
+        return runTimeTreeItem;
     }
-    filterTreeData(treeData, key = 'label', filterStr) {
-        return treeData.filter((treeItem) => {
-            if (treeItem?.children?.length > 0) {
-                treeItem.children = this.filterTreeData([...treeItem.children], key, filterStr);
-                treeItem.children = treeItem.children.length > 0 ? treeItem.children : undefined;
-            }
-            if (this.normalizedStr(treeItem.node.treeContentBlock.label).includes(this.normalizedStr(filterStr))) {
+    filterTreeData(runTimeTreeData, key = 'label', filterStr) {
+        return runTimeTreeData.filter((runTimeItem) => {
+            if (this.normalizedStr(this.getTreeItem(runTimeItem.path).node.treeContentBlock.label).includes(this.normalizedStr(filterStr))) {
                 return true;
             }
-            else if (treeItem?.children?.length > 0) {
-                return treeItem?.children?.length > 0;
+            else if (runTimeItem?.children?.length > 0) {
+                runTimeItem.children = this.filterTreeData(structuredClone(runTimeItem.children), key, filterStr);
+                runTimeItem.children = runTimeItem.children.length > 0 ? runTimeItem.children : undefined;
+                return runTimeItem?.children?.length > 0;
             }
             else {
                 return false;
@@ -517,7 +824,7 @@ class EuiTreeComponent {
     }
     scanSelection(nodes, selection) {
         nodes.forEach((item) => {
-            if (item.node?.selectable && item.node.isSelected) {
+            if (this.getTreeItem(item.path).node?.selectable && this.getTreeItem(item.path).node.isSelected) {
                 selection.push(item);
             }
             if (item?.children?.length > 0) {
@@ -527,7 +834,7 @@ class EuiTreeComponent {
     }
     renderInitialExpand(nodes) {
         nodes.forEach((item) => {
-            if (item?.node?.isExpanded) {
+            if (this.getTreeItem(item.path).node.isExpanded) {
                 this.expandAt(item.path);
             }
             if (item?.children?.length > 0) {
@@ -536,8 +843,25 @@ class EuiTreeComponent {
         });
     }
     getRunTimeTreeItem(path) {
+        return this.findRunTimeTreeItem(this.treeDataRunTime, path);
+    }
+    findRunTimeTreeItem(treeDataRunTime, path) {
+        for (const runTimeItem of treeDataRunTime) {
+            if (runTimeItem.path === path) {
+                return runTimeItem;
+            }
+            else if (runTimeItem?.children?.length > 0) {
+                const found = this.findRunTimeTreeItem(runTimeItem.children, path);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    getRunTimeBackupTreeItem(path) {
         const indexArr = this.resolvePath(path);
-        let nodeArr = this.treeDataRunTime;
+        let nodeArr = this.treeDataRunTimeBackup;
         let node;
         if (nodeArr && Array.isArray(nodeArr)) {
             indexArr?.forEach((pathIndex, index) => {
@@ -559,19 +883,22 @@ class EuiTreeComponent {
     checkIfMultiLevel(tree) {
         let isMultiLevel = false;
         tree.forEach((item) => {
-            if (item?.children?.length > 0) {
+            if (item?.children?.length >= 0) {
                 isMultiLevel = true;
             }
         });
         return isMultiLevel;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", showUnderlinedLinks: "showUnderlinedLinks", showLines: "showLines", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", autoTranslate: "autoTranslate" }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"eui-tree__wrapper\">\n    <cdk-tree [dataSource]=\"cdkArrayDataSource\" [treeControl]=\"cdkTreeControl\" [trackBy]=\"trackBy\" *ngIf=\"renderTree\" class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeItemModel\"\n                title=\"{{\n                    getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\" (click)=\"onNodeClick(treeItemModel)\"\n                     [class.eui-tree-node-wrapper--last]=\"false\"\n                     [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeItemModel.path, treeItemModel),\n                                id: uid + treeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeItemModel\"\n                title=\"{{\n                    getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     [class.eui-tree-node-wrapper--last]=\"false\"\n                     [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + treeItemModel?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeItemModel?.path, treeItemModel),\n                                id: uid + treeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"node?.isSelected\"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a class=\"eui-u-text-link\" [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\" [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i4.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i4.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i4.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i4.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i4.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i6.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i6.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i7.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i8.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i9.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i10.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i10.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    checkIfCurrentScrollable(scrolled) {
+        return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTreeComponent, selector: "eui-tree", inputs: { e2eAttr: "e2eAttr", nodes: "nodes", nodeTemplateRef: "nodeTemplateRef", nodeContentMetadataTemplateRef: "nodeContentMetadataTemplateRef", rightContextMenuTemplateRef: "rightContextMenuTemplateRef", expandedIconClass: "expandedIconClass", collapsedIconClass: "collapsedIconClass", expandedSvgIconClass: "expandedSvgIconClass", collapsedSvgIconClass: "collapsedSvgIconClass", isClickTogglingNode: "isClickTogglingNode", isMultiselect: "isMultiselect", isSingleSelect: "isSingleSelect", isRecursiveSelection: "isRecursiveSelection", isRecursiveParentSelection: "isRecursiveParentSelection", showUnderlinedLinks: "showUnderlinedLinks", showLines: "showLines", autoTranslate: "autoTranslate", highlightPath: "highlightPath" }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef style=\"overflow: auto; max-height: 400px\">\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.EuiInputCheckboxComponent, selector: "input[euiInputCheckBox]", inputs: ["indeterminate", "isInvalid", "styleClass", "checked", "id"], outputs: ["indeterminateChange"] }, { kind: "directive", type: i5.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i5.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i5.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i5.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i5.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i7.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "component", type: i8.EuiLabelComponent, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: ["euiRequired", "euiReadonly", "euiSublabel"] }, { kind: "component", type: i9.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["aria-label"] }, { kind: "component", type: i10.EuiChipComponent, selector: "eui-chip, span[euiChip], li[euiChip]", inputs: ["euiInternalId", "tooltipMessage", "id", "data", "isChipRemovable", "isSquared"], outputs: ["remove"] }, { kind: "component", type: i11.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isDropDownRightAligned", "isClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation"] }, { kind: "directive", type: i11.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\">\n    <cdk-tree [dataSource]=\"cdkArrayDataSource\" [treeControl]=\"cdkTreeControl\" [trackBy]=\"trackBy\" *ngIf=\"renderTree\" class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeItemModel\"\n                title=\"{{\n                    getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\" (click)=\"onNodeClick(treeItemModel)\"\n                     [class.eui-tree-node-wrapper--last]=\"false\"\n                     [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeItemModel.path, treeItemModel),\n                                id: uid + treeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeItemModel\"\n                title=\"{{\n                    getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     [class.eui-tree-node-wrapper--last]=\"false\"\n                     [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + treeItemModel?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeItemModel?.path, treeItemModel),\n                                id: uid + treeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"node?.isSelected\"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a class=\"eui-u-text-link\" [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\" [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-35)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cssClasses: [{
+            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef style=\"overflow: auto; max-height: 400px\">\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        *ngIf=\"renderTree\"\n        class=\"eui-cdk-tree\">\n        <!-- There are two states of generic cdk-nested-tree-node declarations.\n        First one is without child. No sub rendering.\n        -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eui-cdk-nested-tree-node\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    (click)=\"onNodeClick(treeRunTimeItemModel)\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines && _isMultiLevel\">\n                    <div class=\"eui-tree-node-wrapper__container\">\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n            </li>\n        </cdk-nested-tree-node>\n        <!-- This is the tree node template for expandable nodes -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eui-cdk-nested-tree-node eui-cdk-nested-tree-node--with-child\">\n            <li\n                class=\"eui-tree-node\"\n                *ngIf=\"treeRunTimeItemModel\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div\n                    class=\"eui-tree-node-wrapper\"\n                    [class.eui-tree-node-wrapper--last]=\"treeRunTimeItemModel.last\"\n                    [class.eui-tree-node-wrapper--show-lines]=\"showLines\">\n                    <!--Here wraps the node, and listen for node clicks.-->\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel)\" class=\"eui-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            euiButton\n                            euiIconButton\n                            euiBasicButton\n                            euiRounded\n                            euiSizeS\n                            type=\"button\"\n                            [attr.aria-label]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onNodeToggle(treeRunTimeItemModel)\"\n                            cdkTreeNodeToggle\n                            class=\"eui-tree-node__button\">\n                            <span\n                                euiIcon\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && collapsedIconClass\"\n                                [iconClass]=\"collapsedIconClass\"></span>\n                            <span\n                                euiIcon\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && expandedIconClass\"\n                                [iconClass]=\"expandedIconClass\"></span>\n                            <eui-icon-svg\n                                *ngIf=\"!cdkTreeControl.isExpanded(treeRunTimeItemModel) && !collapsedIconClass\"\n                                [icon]=\"expandedSvgIconClass\"></eui-icon-svg>\n                            <eui-icon-svg\n                                *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) && !expandedIconClass\"\n                                [icon]=\"collapsedSvgIconClass\"></eui-icon-svg>\n                        </button>\n                        <!--\n                        Renders node in default or provided template's context.\n                        Generates onSelect with onSelectFn for developers to send the events from their custom check events.\n                        Provides id to be used on generic template\n                        -->\n                        <ng-container\n                            [ngTemplateOutlet]=\"nodeTemplateRef || nodeTemplateDefault\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n                                onSelect: onSelectFn(treeRunTimeItemModel.path),\n                                id: uid + treeRunTimeItemModel.path,\n                                path: treeRunTimeItemModel.path\n                            }\">\n                        </ng-container>\n                    </div>\n                </div>\n                <!--uses cdkTreeNodeOutlet to render children nodes, CdkTreeControl is used to control isExpanded state.-->\n                <ul class=\"eui-tree-node\" *ngIf=\"cdkTreeControl.isExpanded(treeRunTimeItemModel)\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </ul>\n            </li>\n        </cdk-nested-tree-node>\n    </cdk-tree>\n</ul>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    <ng-container *ngIf=\"node\">\n        <div class=\"eui-tree-node-wrapper__container-left\" [class.eui-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            <!--input checkbox area-->\n            <input\n                euiInputCheckBox\n                *ngIf=\"node && node.selectable\"\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\"\n                class=\"eui-u-mr-m\" />\n\n            <!--icon area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconClass\">\n                <eui-icon\n                    [euiVariant]=\"node?.treeContentBlock?.iconTypeClass || 'primary'\"\n                    iconClass=\"{{ node?.treeContentBlock?.iconClass }}\"\n                    euiSizeS\n                    class=\"eui-u-mr-xs\">\n                </eui-icon>\n            </ng-container>\n            <ng-container *ngIf=\"node?.treeContentBlock?.iconSvgName\">\n                <eui-icon-svg\n                    icon=\"{{ node?.treeContentBlock?.iconSvgName }}\"\n                    fillColor=\"{{ node?.treeContentBlock?.iconTypeClass || 'grey-100' }}\"\n                    size=\"s\"\n                    class=\"eui-u-mr-xs\">\n                </eui-icon-svg>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.chips\">\n                <eui-chip\n                    *ngFor=\"let chip of node.treeContentBlock.chips\"\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-mr-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--badge (typeLabel & typeClass) area-->\n            <ng-container *ngIf=\"node?.treeContentBlock?.typeLabel\" [ngSwitch]=\"node?.treeContentBlock?.typeClass\">\n                <eui-badge euiSizeM [euiVariant]=\"node?.treeContentBlock?.typeClass || 'primary'\" class=\"eui-u-flex-no-shrink eui-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eui-badge>\n            </ng-container>\n        </div>\n\n        <!--label area-->\n        <div class=\"eui-tree-node-wrapper__container-middle\">\n            <label\n                *ngIf=\"!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal\"\n                euiLabel\n                for=\"{{ id }}\"\n                class=\"eui-u-text-truncate eui-u-p-2xs\"\n                [class.eui-label--selected]=\"\n                    highlightPath\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eui-u-cursor-pointer]=\"node?.selectable\">\n                {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.url\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link\"\n                    [class.eui-u-text-link-standalone]=\"!showUnderlinedLinks\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            <label *ngIf=\"node?.treeContentBlock?.urlExternal\" euiLabel for=\"{{ id }}\" class=\"eui-u-text-truncate eui-u-p-2xs\">\n                <a\n                    class=\"eui-u-text-link-external\"\n                    [class.eui-u-text-link-external-standalone]=\"!showUnderlinedLinks\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ autoTranslate ? (node?.treeContentBlock?.label | translate) : node?.treeContentBlock?.label }}\n                </a>\n            </label>\n        </div>\n\n        <div *ngIf=\"node?.treeContentBlock?.rightContent\" class=\"eui-tree-node-wrapper__container-right\">\n            <!--badges area-->\n            <ng-container *ngFor=\"let badge of node.treeContentBlock.rightContent?.badges\">\n                <eui-badge euiSizeM euiOutline [euiVariant]=\"badge.typeClass || 'secondary'\" class=\"eui-u-ml-xs\">\n                    <span euiLabel>{{ badge.label }}</span>\n                </eui-badge>\n            </ng-container>\n\n            <!--chips area-->\n            <ng-container *ngFor=\"let chip of node.treeContentBlock.rightContent?.chips\">\n                <eui-chip\n                    euiSizeXS\n                    [euiVariant]=\"chip.typeClass || 'secondary'\"\n                    [euiOutline]=\"chip.isOutline\"\n                    class=\"eui-chip--rounded eui-u-mb-none eui-u-ml-xs\">\n                    <span euiLabel>{{ chip.label }}</span>\n                </eui-chip>\n            </ng-container>\n\n            <!--Context menu-->\n            <ng-container *ngIf=\"node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef\">\n                <eui-dropdown class=\"eui-u-ml-xs\">\n                    <button euiButton euiSizeS euiRounded euiIconButton euiBasicButton euiSecondary [attr.aria-label]=\"'Options menu'\">\n                        <eui-icon-svg icon=\"eui-ellipsis-vertical\"></eui-icon-svg>\n                    </button>\n                    <eui-dropdown-content>\n                        <ng-template\n                            [ngTemplateOutlet]=\"rightContextMenuTemplateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n                            }\">\n                        </ng-template>\n                    </eui-dropdown-content>\n                </eui-dropdown>\n            </ng-container>\n        </div>\n\n        <!--metadata, uses the help of ng template to generate dynamic expand variable without handling state -->\n        <ng-container\n            *ngIf=\"node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef\"\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\">\n        </ng-container>\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                euiButton\n                euiBasicButton\n                euiIconButton\n                euiRounded\n                euiSizeS\n                type=\"button\"\n                aria-label=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n                <eui-icon-svg [icon]=\"metaDataContainer.expanded ? 'eui-chevron-down' : 'eui-chevron-forward'\"></eui-icon-svg>\n            </button>\n            <div *ngIf=\"metaDataContainer.expanded\" class=\"eui-tree-node__metacontent\">\n                <!--passing metadata of the node content to provided template-ref:nodeContentMetadataTemplateRef-->\n                <ng-template\n                    [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: node?.treeContentBlock?.metadata,\n                        metadata: node?.treeContentBlock?.metadata\n                    }\">\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-container>\n</ng-template>\n", styles: [".eui-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-tree::-webkit-scrollbar{display:inherit;height:6px;width:6px;background-color:var(--eui-base-color-grey-5)}.eui-tree::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tree .eui-tree__wrapper{display:flex;list-style:none;margin:0;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{display:flex;width:auto}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child){padding-inline-start:var(--eui-base-spacing-xl)}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines:before{position:relative;left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));display:inline-flex;border-left:1px solid var(--eui-base-color-grey-25);content:\"\";height:100%}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines.eui-tree-node-wrapper--last:before{align-self:flex-start;display:inline-flex;height:50%;position:relative}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node:not(.eui-cdk-nested-tree-node--with-child) .eui-tree-node-wrapper.eui-tree-node-wrapper--show-lines .eui-tree-node-wrapper__container:before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-l);border-bottom:1px solid var(--eui-base-color-grey-25);border-left:1px solid var(--eui-base-color-grey-25);content:\"\";margin-left:calc(-1 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs))}.eui-tree .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node{display:flex;flex-direction:column;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node__metacontent{display:flex}.eui-tree .eui-tree__wrapper .eui-tree-node__button{margin-left:calc(-1 * var(--eui-base-spacing-2xs));margin-right:var(--eui-base-spacing-2xs)}.eui-tree .eui-tree__wrapper ul.eui-tree-node{padding-inline-start:var(--eui-base-spacing-l)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eui-base-spacing-xl);width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper:hover{background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container{align-items:center;display:flex;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-tree .eui-tree__wrapper .eui-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-tree:not(.eui-tree--with-children) .eui-tree__wrapper .eui-cdk-tree .eui-cdk-nested-tree-node{padding-inline-start:2px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], e2eAttr: [{
@@ -595,20 +922,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: Input
             }], collapsedSvgIconClass: [{
                 type: Input
-            }], showUnderlinedLinks: [{
-                type: Input
-            }], showLines: [{
-                type: Input
+            }], cdkScrollableRef: [{
+                type: ViewChild,
+                args: ['cdkScrollableRef', { read: CdkScrollable }]
+            }], treeComponentInstance: [{
+                type: ViewChild,
+                args: ['treeComponentInstance']
             }], isClickTogglingNode: [{
                 type: Input
             }], isMultiselect: [{
                 type: Input
+            }], isSingleSelect: [{
+                type: Input
             }], isRecursiveSelection: [{
                 type: Input
             }], isRecursiveParentSelection: [{
                 type: Input
+            }], showUnderlinedLinks: [{
+                type: Input
+            }], showLines: [{
+                type: Input
             }], autoTranslate: [{
                 type: Input
+            }], highlightPath: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], nodeClick: [{
@@ -629,7 +966,8 @@ class EuiTreeModule {
             EuiLabelModule,
             EuiBadgeModule,
             EuiChipModule,
-            EuiDropdownModule], exports: [EuiTreeComponent] }); }
+            EuiDropdownModule,
+            ScrollingModule], exports: [EuiTreeComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeModule, imports: [CommonModule,
             RouterModule,
             FormsModule,
@@ -641,7 +979,8 @@ class EuiTreeModule {
             EuiLabelModule,
             EuiBadgeModule,
             EuiChipModule,
-            EuiDropdownModule] }); }
+            EuiDropdownModule,
+            ScrollingModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTreeModule, decorators: [{
             type: NgModule,
@@ -659,47 +998,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                         EuiBadgeModule,
                         EuiChipModule,
                         EuiDropdownModule,
+                        ScrollingModule,
                     ],
                     declarations: [EuiTreeComponent],
                     exports: [EuiTreeComponent],
                 }]
         }] });
 
-// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
-function uxTreeNodesMetaDataMapper(oldTree) {
-    return oldTree.map((item) => {
-        if (item?.typeClass === 'default') {
-            // default typeClass will be
-            item.typeClass = 'secondary';
-        }
-        if (item?.badgeLabel) {
-            // default typeClass will be
-            if (item?.badges?.length > 0) {
-                item.badges.push({ label: item?.badgeLabel, typeClass: 'secondary' });
-            }
-            else {
-                item.badges = [{ label: item?.badgeLabel, typeClass: 'secondary' }];
-            }
-        }
-        return {
-            node: {
-                treeContentBlock: {
-                    label: item.label,
-                    typeLabel: item.typeLabel,
-                    typeClass: item.typeLabel && !item.typeClass ? 'secondary' : item.typeClass,
-                    tooltipLabel: item.tooltipLabel,
-                    url: item.url,
-                    urlExternal: item.urlExternal,
-                    urlExternalTarget: item.urlExternal && item.urlExternalTarget ? item.urlExternalTarget : undefined,
-                    badges: item.badges,
-                    metadata: item.metadata,
-                },
-            },
-            children: item.children ? uxTreeNodesMetaDataMapper(item.children) : undefined,
-        };
-    });
-}
-
 class EuiDropdownTreeDirective {
     constructor(changeDetectorRef, hostElement, renderer, euiDropdown) {
         this.changeDetectorRef = changeDetectorRef;
@@ -743,7 +1048,7 @@ class EuiDropdownTreeDirective {
         }
         return 'No node selected.';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiDropdownTreeDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i10.EuiDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiDropdownTreeDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i11.EuiDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiDropdownTreeDirective, selector: "eui-dropdown[euiDropdownTree]", inputs: { buttonTemplateRef: "buttonTemplateRef" }, queries: [{ propertyName: "euiTree", first: true, predicate: EuiTreeComponent, descendants: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiDropdownTreeDirective, decorators: [{
@@ -751,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             args: [{
                     selector: 'eui-dropdown[euiDropdownTree]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i10.EuiDropdownComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i11.EuiDropdownComponent, decorators: [{
                     type: Host
                 }] }], propDecorators: { buttonTemplateRef: [{
                 type: Input
@@ -779,6 +1084,13 @@ class EuiTreeHelper {
     }
     // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getPath(value, identifierKey = 'node.treeContentBlock.id') {
+        const paths = [];
+        this.traverse(this.treeData, '', [value], paths, undefined, identifierKey);
+        return paths[0];
+    }
+    // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     getPaths(values, identifierKey) {
         const paths = [];
         this.traverse(this.treeData, '', values, paths, undefined, identifierKey);
@@ -933,5 +1245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
  * Generated bundle index. Do not edit.
  */
 
-export { EuiDropdownTreeDirective, EuiDropdownTreeDirectiveModule, EuiTreeComponent, EuiTreeFormControlDirective, EuiTreeFormControlDirectiveModule, EuiTreeHelper, EuiTreeModule, uxTreeNodesMetaDataMapper };
+export { EuiDropdownTreeDirective, EuiDropdownTreeDirectiveModule, EuiTreeComponent, EuiTreeFormControlDirective, EuiTreeFormControlDirectiveModule, EuiTreeHelper, EuiTreeModule, EuiTreePagination, uxTreeNodesMetaDataMapper };
 //# sourceMappingURL=eui-components-eui-tree.mjs.map