@eui/eds 22.0.0-alpha.25 → 22.0.0-alpha.26

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

@@ -948,7 +948,7 @@ class EdsTree {
         return scrolled.getElementRef().nativeElement === this.cdkScrollableRef()?.getElementRef().nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n    @if (renderTree) {\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        class=\"eds-cdk-tree\">\n        <!-- Leaf node (no children) -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n                    <div class=\"eds-tree-node-wrapper__container\">\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            </div>\n            }\n        </cdk-nested-tree-node>\n        <!-- Expandable node (has children) -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\">\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            edsIconButton\n                            size=\"s\"\n                            rounded\n                            [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n                            [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n                            class=\"eds-tree-node__button\">\n                        </button>\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                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n                <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </div>\n                }\n            </div>\n            }\n        </cdk-nested-tree-node>\n    </cdk-tree>\n    }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    @if (node) {\n        <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            @if (node && node.selectable) {\n            <input\n                edsInputCheckbox\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\" />\n            }\n\n            @if (node?.treeContentBlock?.iconSvgName) {\n                <eds-icon\n                    [icon]=\"node?.treeContentBlock?.iconSvgName\"\n                    size=\"s\"\n                    class=\"eds-u-mr-xs\">\n                </eds-icon>\n            }\n\n            @if (node?.treeContentBlock?.chips) {\n                @for (chip of node.treeContentBlock.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-mr-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n                }\n            }\n\n            @if (node?.treeContentBlock?.typeLabel) {\n                <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eds-badge>\n            }\n        </div>\n\n        <div class=\"eds-tree-node-wrapper__container-middle\">\n            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n            <label\n                edsLabel\n                for=\"{{ id }}\"\n                class=\"eds-u-text-truncate\"\n                [class.eds-label--selected]=\"\n                    highlightPath()\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eds-u-cursor-pointer]=\"node?.selectable\">\n                {{ node?.treeContentBlock?.label }}\n            </label>\n            }\n            @if (node?.treeContentBlock?.url) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link\"\n                    [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n            @if (node?.treeContentBlock?.urlExternal) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link-external\"\n                    [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n        </div>\n\n        @if (node?.treeContentBlock?.rightContent) {\n        <div class=\"eds-tree-node-wrapper__container-right\">\n            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n                <eds-badge variant=\"outline\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n                    {{ badge.label }}\n                </eds-badge>\n            }\n\n            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-ml-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n            }\n\n            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n                <eds-dropdown class=\"eds-u-ml-xs\">\n                    <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n                    <eds-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                    </eds-dropdown-content>\n                </eds-dropdown>\n            }\n        </div>\n        }\n\n        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n        <ng-container\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\" />\n        }\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                edsIconButton\n                size=\"s\"\n                rounded\n                [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n                ariaLabel=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n            </button>\n            @if (metaDataContainer.expanded) {\n            <div class=\"eds-tree-node__metacontent\">\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            }\n        </ng-template>\n        }\n</ng-template>\n", styles: [".eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n    @if (renderTree) {\n    <cdk-tree\n        #treeComponentInstance\n        [dataSource]=\"cdkArrayDataSource\"\n        [treeControl]=\"cdkTreeControl\"\n        [trackBy]=\"trackBy\"\n        class=\"eds-cdk-tree\">\n        <!-- Leaf node (no children) -->\n        <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\"\n                     (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n                    <div class=\"eds-tree-node-wrapper__container\">\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            </div>\n            }\n        </cdk-nested-tree-node>\n        <!-- Expandable node (has children) -->\n        <cdk-nested-tree-node\n            *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n            class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n            @if (treeRunTimeItemModel) {\n            <div\n                class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n                [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n                [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n                [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n                <div class=\"eds-tree-node-wrapper\">\n                    <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n                        <!-- Expand/collapse action button -->\n                        <button\n                            edsIconButton\n                            size=\"s\"\n                            rounded\n                            [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n                            [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n                            (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n                            class=\"eds-tree-node__button\">\n                        </button>\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                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n                <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n                    <ng-container cdkTreeNodeOutlet></ng-container>\n                </div>\n                }\n            </div>\n            }\n        </cdk-nested-tree-node>\n    </cdk-tree>\n    }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n    @if (node) {\n        <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n            @if (node && node.selectable) {\n            <input\n                edsInputCheckbox\n                type=\"checkbox\"\n                id=\"{{ id }}\"\n                [checked]=\"!!node?.isSelected\"\n                [indeterminate]=\"!!node?.isIndeterminate\"\n                (change)=\"onSelect($event)\" />\n            }\n\n            @if (node?.treeContentBlock?.iconSvgName) {\n                <eds-icon\n                    [icon]=\"node?.treeContentBlock?.iconSvgName\"\n                    size=\"s\"\n                    class=\"eds-u-mr-xs\">\n                </eds-icon>\n            }\n\n            @if (node?.treeContentBlock?.chips) {\n                @for (chip of node.treeContentBlock.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-mr-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n                }\n            }\n\n            @if (node?.treeContentBlock?.typeLabel) {\n                <eds-badge size=\"m\" [color]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n                    {{ node?.treeContentBlock?.typeLabel }}\n                </eds-badge>\n            }\n        </div>\n\n        <div class=\"eds-tree-node-wrapper__container-middle\">\n            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n            <label\n                edsLabel\n                for=\"{{ id }}\"\n                class=\"eds-u-text-truncate\"\n                [class.eds-label--selected]=\"\n                    highlightPath()\n                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n                        : node?.isSelected\n                \"\n                [class.eds-u-cursor-pointer]=\"node?.selectable\">\n                {{ node?.treeContentBlock?.label }}\n            </label>\n            }\n            @if (node?.treeContentBlock?.url) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link\"\n                    [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n                    [routerLink]=\"node?.treeContentBlock?.url\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n            @if (node?.treeContentBlock?.urlExternal) {\n            <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n                <a\n                    class=\"eds-u-text-link-external\"\n                    [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n                    href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n                    target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n                    {{ node?.treeContentBlock?.label }}\n                </a>\n            </label>\n            }\n        </div>\n\n        @if (node?.treeContentBlock?.rightContent) {\n        <div class=\"eds-tree-node-wrapper__container-right\">\n            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n                <eds-badge variant=\"outline\" [color]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n                    {{ badge.label }}\n                </eds-badge>\n            }\n\n            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n                <eds-chip\n                    size=\"m\"\n                    [color]=\"$any(chip.typeClass || 'neutral')\"\n                    class=\"eds-u-ml-xs\">\n                    {{ chip.label }}\n                </eds-chip>\n            }\n\n            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n                <eds-dropdown class=\"eds-u-ml-xs\">\n                    <button edsIconButton size=\"s\" rounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n                    <eds-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                    </eds-dropdown-content>\n                </eds-dropdown>\n            }\n        </div>\n        }\n\n        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n        <ng-container\n            [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n            [ngTemplateOutletContext]=\"{\n                $implicit: { expanded: false }\n            }\" />\n        }\n        <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n            <button\n                edsIconButton\n                size=\"s\"\n                rounded\n                [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n                ariaLabel=\"expand collapse tree item\"\n                (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n            </button>\n            @if (metaDataContainer.expanded) {\n            <div class=\"eds-tree-node__metacontent\">\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            }\n        </ng-template>\n        }\n</ng-template>\n", styles: [".eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["color", "edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, decorators: [{
             type: Component,