@eui/components 17.0.1-snapshot-1701096824737 → 17.0.1-snapshot-1701254423874

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

@@ -191,6 +191,10 @@ class EuiTreeComponent {
         if (changes['nodes']?.currentValue !== changes['nodes']?.previousValue) {
             this.renderTree = false;
             this.initTree();
+            if (this.treeComponentInstance) {
+                this.treeComponentInstance?.renderNodeChanges([]);
+                this.treeComponentInstance?.renderNodeChanges(this.treeDataRunTime);
+            }
         }
     }
     ngOnDestroy() {
@@ -248,9 +252,9 @@ class EuiTreeComponent {
         this.cdkTreeControl.collapseAll();
         this.changeDetectorRef.markForCheck();
     }
-    filterTerm(filterInput) {
+    filterTerm(filterInput, filterKey, showChildrenOfMatchedItems) {
         if (filterInput !== '' && filterInput !== null && typeof filterInput !== 'undefined') {
-            this.treeDataRunTime = this.filterTreeData(structuredClone(this.treeDataRunTimeBackup), 'label', filterInput);
+            this.treeDataRunTime = this.filterTreeData(structuredClone(this.treeDataRunTimeBackup), filterKey || 'label', filterInput, showChildrenOfMatchedItems);
             this.treeDataRunTime = this.applyRunTimeLastItems(this.treeDataRunTime);
             this.cdkArrayDataSource = new ArrayDataSource(this.treeDataRunTime);
             this.cdkTreeControl = new NestedTreeControl((node) => node?.children, { trackBy: this.trackByControl });
@@ -259,7 +263,8 @@ class EuiTreeComponent {
             this.changeDetectorRef.detectChanges();
             this.renderTree = true;
             this.changeDetectorRef.detectChanges();
-            this.expandAll();
+            this.expandMatched(this.treeDataRunTime);
+            // this.expandAll();
         }
         else {
             this.treeDataRunTime = structuredClone(this.treeDataRunTimeBackup);
@@ -278,29 +283,36 @@ class EuiTreeComponent {
         this.changeDetectorRef.markForCheck();
     }
     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('.'));
-        if (treeItemRuntime?.children?.length > 0) {
-            treeItemRuntime.children = this.applyRunTimeLastItems(treeItemRuntime.children);
-        }
-        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);
+        if (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('.'));
+            if (treeItemRuntime?.children?.length > 0) {
+                treeItemRuntime.children = this.applyRunTimeLastItems(treeItemRuntime.children);
+            }
+            this.setTreeDataRunTimeBackup(path, treeItemRuntime);
+            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.renderInitialExpand(this.getRunTimeTreeItem(path)?.children);
+            this.getInitialSelection(this.getRunTimeTreeItem(path)?.children)?.forEach((runTimeItem) => {
+                this.selectTreeItem(this.getRunTimeBackupTreeItem(runTimeItem.path));
+            });
+            this.changeDetectorRef.detectChanges();
         }
-        this.changeDetectorRef.detectChanges();
     }
     onNodeClick(treeRunTimeItem) {
         this.nodeClick.emit(this.getTreeItem(treeRunTimeItem?.path));
@@ -317,7 +329,7 @@ class EuiTreeComponent {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     nodeSelected(evt, path) {
         const item = this.getTreeItem(path);
-        const runTimeTreeItem = this.getRunTimeBackupTreeItem(path);
+        const runTimeBackupTreeItem = this.getRunTimeBackupTreeItem(path);
         const renderedRunTimeTreeItem = this.getRunTimeTreeItem(path);
         const node = item.node;
         // console.log(path,item,runTimeTreeItem, renderedRunTimeTreeItem);
@@ -332,7 +344,7 @@ class EuiTreeComponent {
                 }
             }
             this.setRunTimeSelectionRecursiveStateTree(path, this.calculateItemSelectionRecursiveState(structuredClone(this.getTreeItem(path))));
-            if (renderedRunTimeTreeItem?.children && renderedRunTimeTreeItem?.children?.length > 0) {
+            if (renderedRunTimeTreeItem?.children && renderedRunTimeTreeItem?.children?.length >= 0) {
                 if (node?.selectConfig?.recursive) {
                     // this.setIsCheckedForAll(renderedRunTimeTreeItem?.children, evt.target.checked);
                     this.runStateChangesForAll(renderedRunTimeTreeItem?.children);
@@ -342,10 +354,10 @@ class EuiTreeComponent {
             }
             this.syncStateChangesAtPath(path);
             if (this.getTreeItem(path).node.isSelected) {
-                this.selectTreeItem(runTimeTreeItem);
+                this.selectTreeItem(runTimeBackupTreeItem);
             }
             else {
-                this.deselectTreeItem(runTimeTreeItem);
+                this.deselectTreeItem(runTimeBackupTreeItem);
             }
             const nodePathsSeq = this.getParentPaths(path);
             if (nodePathsSeq.length > 0) {
@@ -369,11 +381,11 @@ class EuiTreeComponent {
                     this.selectionModel.deselect(prevItem);
                 }
                 item.node.isSelected = true;
-                this.selectionModel.select(runTimeTreeItem);
+                this.selectionModel.select(runTimeBackupTreeItem);
             }
             else {
                 item.node.isSelected = false;
-                this.selectionModel.deselect(runTimeTreeItem);
+                this.selectionModel.deselect(runTimeBackupTreeItem);
             }
             if (this.highlightPath) {
                 if (evt.target.checked && prevItem) {
@@ -575,10 +587,10 @@ class EuiTreeComponent {
     getSelectionIndexOfItem(runTimeTreeItem) {
         return this.selectionModel.selected.findIndex((i) => i?.path === runTimeTreeItem?.path);
     }
-    selectTreeItem(runTimeTreeItem) {
-        const indexOfItem = this.getSelectionIndexOfItem(runTimeTreeItem);
+    selectTreeItem(runTimeBackupTreeItem) {
+        const indexOfItem = this.getSelectionIndexOfItem(runTimeBackupTreeItem);
         if (indexOfItem === -1) {
-            this.selectionModel.select(runTimeTreeItem);
+            this.selectionModel.select(runTimeBackupTreeItem);
         }
     }
     deselectTreeItem(runTimeTreeItem) {
@@ -615,7 +627,7 @@ class EuiTreeComponent {
         return structuredClone(nodes)?.map((item) => this.calculateItemSelectionRecursiveState({ ...item }));
     }
     // Creating run time state which includes children selection state for selection tree.
-    calculateItemSelectionRecursiveState(treeItem, isSelected) {
+    calculateItemSelectionRecursiveState(treeItem) {
         const childrenSelectionRecursive = [];
         if (treeItem.children && treeItem.children.length > 0) {
             treeItem.children.forEach((child, index) => {
@@ -623,7 +635,7 @@ class EuiTreeComponent {
             });
         }
         const childStates = childrenSelectionRecursive.map((_) => _.selectionRecursiveState);
-        const itemState = this.decideSelectionRecursiveState(childStates, isSelected || treeItem.node.isSelected, treeItem.node?.selectConfig?.recursive, treeItem.node?.selectConfig?.noAutoSelectParent);
+        const itemState = this.decideSelectionRecursiveState(childStates, treeItem.node.isSelected, treeItem.node?.selectConfig?.recursive, treeItem.node?.selectConfig?.noAutoSelectParent);
         return {
             selectionRecursiveState: itemState,
             children: childrenSelectionRecursive,
@@ -647,7 +659,7 @@ class EuiTreeComponent {
     }
     syncStateChangesAtPath(nodePath) {
         const treeItem = this.getTreeItem(nodePath);
-        const runTimeTreeItem = this.getRunTimeBackupTreeItem(nodePath);
+        const runTimeBackupTreeItem = this.getRunTimeBackupTreeItem(nodePath);
         const runTimeSelectionRecursiveItem = this.getRunTimeSelectionRecursiveState(nodePath);
         if (treeItem?.node?.selectable && treeItem.node?.selectConfig?.recursive) {
             if (!treeItem.node?.selectConfig?.noAutoSelectParent) {
@@ -666,18 +678,18 @@ class EuiTreeComponent {
                 };
             }
             // console.log(treeItem, treeItem.node.treeContentBlock.label, 'isSelected:' + treeItem.node.isSelected, 'isIndeterminate:' + treeItem.node.isIndeterminate);
-            if (treeItem.node.isSelected === true && !this.selectionModel.isSelected(runTimeTreeItem)) {
-                this.selectTreeItem(runTimeTreeItem);
+            if (treeItem.node.isSelected === true && !this.selectionModel.isSelected(runTimeBackupTreeItem)) {
+                this.selectTreeItem(runTimeBackupTreeItem);
             }
-            else if (treeItem.node.isSelected === false && this.selectionModel.isSelected(runTimeTreeItem)) {
-                this.deselectTreeItem(runTimeTreeItem);
+            else if (treeItem.node.isSelected === false && this.selectionModel.isSelected(runTimeBackupTreeItem)) {
+                this.deselectTreeItem(runTimeBackupTreeItem);
             }
         }
     }
     setTreeData(path, item) {
         const indexArr = this.resolvePath(path);
         let itemArr = this.processedNodes;
-        indexArr.forEach((pathIndex, index) => {
+        indexArr?.forEach((pathIndex, index) => {
             if (index < indexArr.length - 1) {
                 itemArr = itemArr[pathIndex]?.children;
             }
@@ -686,9 +698,9 @@ class EuiTreeComponent {
             }
         });
     }
-    setTreeDataRunTime(path, item) {
+    setTreeDataRunTimeBackup(path, item) {
         const indexArr = this.resolvePath(path);
-        let itemArr = this.treeDataRunTime;
+        let itemArr = this.treeDataRunTimeBackup;
         indexArr.forEach((pathIndex, index) => {
             if (index < indexArr.length - 1) {
                 itemArr = itemArr[pathIndex]?.children;
@@ -698,6 +710,15 @@ class EuiTreeComponent {
             }
         });
     }
+    setTreeDataRunTime(path, item) {
+        const oldItem = this.getRunTimeTreeItem(path);
+        if (oldItem) {
+            Object.keys(oldItem)?.forEach(key => {
+                oldItem[key] = undefined;
+            });
+            Object.assign(oldItem, item);
+        }
+    }
     setRunTimeSelectionRecursiveStateTree(path, item) {
         const indexArr = this.resolvePath(path);
         let itemArr = this.runTimeSelectionRecursiveState;
@@ -727,28 +748,29 @@ class EuiTreeComponent {
     }
     setIsCheckedForAll(nodeArr, isChecked) {
         nodeArr.forEach((runTimeItem, index) => {
+            const runtimeBackupTreeItem = this.getRunTimeBackupTreeItem(runTimeItem.path);
             const treeItem = this.getTreeItem(runTimeItem.path);
             const node = treeItem.node;
             if (node?.selectable) {
                 node.isSelected = isChecked;
                 node.isIndeterminate = false;
                 if (isChecked) {
-                    this.selectTreeItem(runTimeItem);
+                    this.selectTreeItem(runtimeBackupTreeItem);
                 }
                 else {
-                    this.deselectTreeItem(runTimeItem);
+                    this.deselectTreeItem(runtimeBackupTreeItem);
                 }
             }
-            if (runTimeItem?.children?.length > 0 && runTimeItem?.children && runTimeItem?.children.length > 0) {
+            if (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);
+        nodeArr?.forEach((runTimeItem, index) => {
+            if (runTimeItem?.children?.length >= 0) {
                 this.runStateChangesForAll(nodeArr[index].children);
+                this.syncSelectionAtPath(runTimeItem);
             }
         });
     }
@@ -757,10 +779,10 @@ class EuiTreeComponent {
         this.syncStateChangesAtPath(runTimeTreeItem.path);
         // Sets isSelected change on the control.
         if (this.getTreeItem(runTimeTreeItem.path).node.isSelected) {
-            this.selectTreeItem(runTimeTreeItem);
+            this.selectTreeItem(this.getRunTimeBackupTreeItem(runTimeTreeItem.path));
         }
         else {
-            this.deselectTreeItem(runTimeTreeItem);
+            this.deselectTreeItem(this.getRunTimeBackupTreeItem(runTimeTreeItem.path));
         }
     }
     resolvePath(path) {
@@ -800,18 +822,24 @@ class EuiTreeComponent {
         }
         return runTimeTreeItem;
     }
-    filterTreeData(runTimeTreeData, key = 'label', filterStr) {
+    filterTreeData(runTimeTreeData, key = 'label', filterStr, showChildren, show) {
         return runTimeTreeData.filter((runTimeItem) => {
-            if (this.normalizedStr(this.getTreeItem(runTimeItem.path).node.treeContentBlock.label).includes(this.normalizedStr(filterStr))) {
+            const targetData = this.getTreeItem(runTimeItem.path).node.treeContentBlock[key];
+            if (targetData && this.normalizedStr(targetData)?.includes(this.normalizedStr(filterStr))) {
+                if (runTimeItem?.children?.length > 0) {
+                    runTimeItem.children = this.filterTreeData(runTimeItem.children, key, filterStr, showChildren, showChildren);
+                }
+                Object.assign(runTimeItem, { matched: true });
+                // runTimeItem.matched = true;
                 return true;
             }
             else if (runTimeItem?.children?.length > 0) {
-                runTimeItem.children = this.filterTreeData(structuredClone(runTimeItem.children), key, filterStr);
+                runTimeItem.children = this.filterTreeData(runTimeItem.children, key, filterStr, showChildren, show);
                 runTimeItem.children = runTimeItem.children.length > 0 ? runTimeItem.children : undefined;
-                return runTimeItem?.children?.length > 0;
+                return runTimeItem?.children?.length > 0 || show;
             }
             else {
-                return false;
+                return show;
             }
         });
     }
@@ -838,12 +866,40 @@ class EuiTreeComponent {
     }
     renderInitialExpand(nodes) {
         nodes.forEach((item) => {
-            if (this.getTreeItem(item.path).node.isExpanded) {
-                this.expandAt(item.path);
-            }
             if (item?.children?.length > 0) {
                 this.renderInitialExpand(item.children);
             }
+            if (typeof this.getTreeItem(item.path).node.isExpanded !== 'undefined') {
+                if (this.getTreeItem(item.path).node.isExpanded && !this.cdkTreeControl.isExpanded(item)) {
+                    this.expandAt(item.path);
+                }
+                else if (!this.getTreeItem(item.path).node.isExpanded && this.cdkTreeControl.isExpanded(item)) {
+                    this.cdkTreeControl.collapse(item);
+                }
+            }
+        });
+    }
+    expandMatched(nodes) {
+        nodes.forEach((item) => {
+            if (item.matched) {
+                const parentPath = this.getParentPaths(item.path)[0];
+                if (parentPath) {
+                    let parentTreeItem = this.getTreeItem(parentPath);
+                    parentTreeItem = {
+                        ...parentTreeItem,
+                        node: {
+                            ...parentTreeItem.node,
+                            isExpanded: true,
+                        },
+                    };
+                    //  node.isExpanded = true;
+                    // console.log("here", parentTreeItem.node.treeContentBlock.label, parentPath, item);
+                    this.expandAt(parentPath);
+                }
+            }
+            if (item?.children?.length > 0) {
+                this.expandMatched(item.children);
+            }
         });
     }
     getRunTimeTreeItem(path) {
@@ -902,11 +958,11 @@ class EuiTreeComponent {
         return scrolled.getElementRef().nativeElement === this.cdkScrollableRef.getElementRef().nativeElement;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", 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.4", 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>\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 *ngIf=\"treeRunTimeItemModel\"\n                class=\"eui-tree-node\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 eui-tree-node--with-child\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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                    <!--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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m));position:absolute;top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-tree.eui-tree--show-lines.eui-tree--with-children li{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children li:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child .eui-tree-node__button{background:var(--eui-base-color-grey-2);z-index:1}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\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: ["e2eAttr", "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 }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", 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>\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 *ngIf=\"treeRunTimeItemModel\"\n                class=\"eui-tree-node\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel)\">\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                                path: 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 eui-tree-node--with-child\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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                    <!--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                                children: getTreeItem(treeRunTimeItemModel?.path)?.children\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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m));position:absolute;top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-tree.eui-tree--show-lines.eui-tree--with-children li{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children li:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child .eui-tree-node__button{background:var(--eui-base-color-grey-2);z-index:1}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\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: ["e2eAttr", "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.4", ngImport: i0, type: EuiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\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 *ngIf=\"treeRunTimeItemModel\"\n                class=\"eui-tree-node\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel)\">\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 eui-tree-node--with-child\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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                    <!--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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m));position:absolute;top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-tree.eui-tree--show-lines.eui-tree--with-children li{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children li:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child .eui-tree-node__button{background:var(--eui-base-color-grey-2);z-index:1}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\n"] }]
+            args: [{ selector: 'eui-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-tree__wrapper\" cdkScrollable #cdkScrollableRef>\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 *ngIf=\"treeRunTimeItemModel\"\n                class=\"eui-tree-node\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\n                title=\"{{\n                    getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel ||\n                        getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\n                }}\">\n                <div class=\"eui-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel)\">\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                                path: 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 eui-tree-node--with-child\"\n                [class.eui-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eui-tree-node--last]=\"treeRunTimeItemModel.last\"\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                    <!--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                                children: getTreeItem(treeRunTimeItemModel?.path)?.children\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 .eui-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eui-base-spacing-2xs);position:relative;width:100%}.eui-tree .eui-tree__wrapper::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tree .eui-tree__wrapper::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.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--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 .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}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul{padding-inline-start:var(--eui-base-spacing-s)}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:before{border-left:1px solid var(--eui-base-color-grey-20);content:\"\";height:calc(100% - var(--eui-base-spacing-m));position:absolute;top:0}.eui-tree.eui-tree--show-lines.eui-tree--with-children ul:first-child:before{height:calc(100% - var(--eui-base-spacing-m) - var(--eui-base-spacing-2xs))}.eui-tree.eui-tree--show-lines.eui-tree--with-children li{padding-inline-start:var(--eui-base-spacing-s);position:relative}.eui-tree.eui-tree--show-lines.eui-tree--with-children li:before:not(.eui-tree-node--first){border-top:1px solid var(--eui-base-color-grey-20);content:\"\";display:block;height:0;left:0;position:absolute;top:var(--eui-base-spacing-m);width:var(--eui-base-spacing-xl)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node:not(.eui-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eui-base-spacing-2xl);border-bottom:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child:before{position:absolute;left:calc(1 * var(--eui-base-spacing-2xl) + var(--eui-base-spacing-2xs));display:inline-flex;width:var(--eui-base-spacing-s);border-bottom:1px solid var(--eui-base-color-grey-20);border-left:1px solid var(--eui-base-color-grey-20);content:\"\";margin-left:calc(-2 * var(--eui-base-spacing-l) + var(--eui-base-spacing-2xs));top:var(--eui-base-spacing-m)}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node.eui-tree-node--with-child .eui-tree-node__button{background:var(--eui-base-color-grey-2);z-index:1}.eui-tree.eui-tree--show-lines.eui-tree--with-children li.eui-tree-node--last:before{height:auto;top:var(--eui-base-spacing-m)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.ScrollDispatcher }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -1094,9 +1150,12 @@ 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];
+        if (typeof value !== 'undefined') {
+            const paths = [];
+            this.traverse(this.treeData, '', [value], paths, undefined, identifierKey);
+            return paths[0];
+        }
+        return null;
     }
     // 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