@siemens/element-ng 47.6.0 → 47.8.0

package/fesm2022/siemens-element-ng-tree-view.mjs

@@ -1,21 +1,20 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, HostListener, HostBinding, ViewChild, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, ContentChildren, ContentChild, ViewChildren, NgModule } from '@angular/core';
-import { CdkContextMenuTrigger, CdkMenuTrigger } from '@angular/cdk/menu';
+import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, viewChild, HostListener, HostBinding, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, contentChildren, INJECTOR, viewChildren, contentChild, NgModule } from '@angular/core';
+import { CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { correctKeyRTL, buildTrackByIdentity } from '@siemens/element-ng/common';
 import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
-import * as i1 from '@siemens/element-translate-ng/translate';
-import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { Subject, asyncScheduler, defer, fromEvent, merge } from 'rxjs';
 import { takeUntil, take, withLatestFrom, map } from 'rxjs/operators';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import * as i2 from '@angular/cdk/scrolling';
+import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiTreeViewItemTemplateDirective {
@@ -37,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 const TREE_ITEM_CONTEXT = new InjectionToken('TREE_ITEM_CONTEXT');
@@ -364,7 +363,7 @@ const updateCheckStateOfParents = (treeItem) => {
 };
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -445,7 +444,7 @@ class SiTreeViewItemComponent {
     subscriptions = [];
     indentLevel = this.treeItem.level ?? 0;
     nextSiblingElement;
-    menuTrigger;
+    menuTrigger = viewChild(CdkMenuTrigger);
     get ariaLevel() {
         return (this.treeItem.level ?? 0) + 1;
     }
@@ -684,8 +683,8 @@ class SiTreeViewItemComponent {
     onToggleContextMenuOpen() {
         setActive(this.treeItem, true);
         this.siTreeViewService.scroll$
-            .pipe(takeUntil(this.menuTrigger.closed), take(1))
-            .subscribe(() => this.menuTrigger?.close());
+            .pipe(takeUntil(this.menuTrigger().closed), take(1))
+            .subscribe(() => this.menuTrigger()?.close());
     }
     onToggleContextMenuClose() {
         setTimeout(() => this.element.nativeElement.focus());
@@ -705,8 +704,8 @@ class SiTreeViewItemComponent {
     }
     renderMatchingTemplate(treeItem) {
         // we check in the HTML template if templates exist.
-        const templateDirective = this.templates.find(td => td.name() === treeItem.templateName);
-        return templateDirective ? templateDirective.template : this.templates.toArray()[0].template;
+        const templateDirective = this.templates().find(td => td.name() === treeItem.templateName);
+        return templateDirective ? templateDirective.template : this.templates()[0].template;
     }
     onContextMenu(event) {
         this.handleContextMenuEvent(event);
@@ -766,8 +765,9 @@ class SiTreeViewItemComponent {
             // Event suppression does not work.
             // Re-check in the future if FF fixes it.
             setTimeout(() => {
-                this.menuTrigger?.open();
-                this.menuTrigger?.getMenu().focusFirstItem('keyboard');
+                const menuTrigger = this.menuTrigger();
+                menuTrigger?.open();
+                menuTrigger?.getMenu().focusFirstItem('keyboard');
             });
         }
         else {
@@ -803,7 +803,7 @@ class SiTreeViewItemComponent {
             !this.treeViewComponent.flatTree());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTreeViewItemComponent, isStandalone: true, selector: "si-tree-view-item", host: { attributes: { "role": "treeitem" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1", "class.focus-none": "true", "class.si-tree-ellipsis": "treeViewComponent.horizontalScrolling()", "class.si-tree-view-top-level-item": "!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)", "attr.aria-haspopup": "isContextMenuButtonVisible()", "attr.aria-level": "this.ariaLevel", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-selected": "this.ariaSelected", "attr.aria-checked": "this.ariaChecked", "attr.aria-expanded": "this.ariaExpanded" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates.length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          }\n          @if (templates.length) {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"], dependencies: [{ kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: SiTreeViewItemComponent, isStandalone: true, selector: "si-tree-view-item", host: { attributes: { "role": "treeitem" }, listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1", "class.focus-none": "true", "class.si-tree-ellipsis": "treeViewComponent.horizontalScrolling()", "class.si-tree-view-top-level-item": "!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)", "attr.aria-haspopup": "isContextMenuButtonVisible()", "attr.aria-level": "this.ariaLevel", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-selected": "this.ariaSelected", "attr.aria-checked": "this.ariaChecked", "attr.aria-expanded": "this.ariaExpanded" } }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: CdkMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"], dependencies: [{ kind: "directive", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: ["cdkContextMenuTriggerFor", "cdkContextMenuPosition", "cdkContextMenuTriggerData", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
             type: Component,
@@ -814,7 +814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         NgTemplateOutlet,
                         SiLoadingSpinnerComponent,
                         SiMenuFactoryComponent,
-                        SiTranslateModule
+                        SiTranslatePipe
                     ], host: {
                         role: 'treeitem',
                         '[attr.tabindex]': 'treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1',
@@ -822,11 +822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         '[class.si-tree-ellipsis]': 'treeViewComponent.horizontalScrolling()',
                         '[class.si-tree-view-top-level-item]': '!treeViewComponent.compactMode() && (treeViewComponent.flatTree() || (treeItem.level ?? 0) < 1)',
                         '[attr.aria-haspopup]': 'isContextMenuButtonVisible()'
-                    }, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates.length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          }\n          @if (templates.length) {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
-        }], propDecorators: { menuTrigger: [{
-                type: ViewChild,
-                args: [CdkMenuTrigger]
-            }], ariaLevel: [{
+                    }, template: "@if (!isGroupedItem) {\n  <div\n    #contextMenuTrigger=\"cdkContextMenuTriggerFor\"\n    class=\"si-tree-view-li si-tree-view-li-item focus-direct-sub-inside\"\n    [class.si-tree-view-item-context-menu-visible]=\"\n      !!(contextMenuTrigger.isOpen() || menuTrigger()?.isOpen())\n    \"\n    [class.si-tree-view-item-active]=\"treeItem.active\"\n    [class.si-tree-view-item-selected]=\"enableSelection() && treeItem.selected\"\n    [class.si-tree-view-item-not-selectable]=\"!treeItem.selectable\"\n    [style.padding-inline-start]=\"biggerPaddingStart\"\n    [cdkContextMenuTriggerFor]=\"contextMenu\"\n    [cdkContextMenuDisabled]=\"!isContextMenuButtonVisible() || !treeItem.selectable\"\n    (cdkContextMenuOpened)=\"onToggleContextMenuOpen()\"\n    (cdkContextMenuClosed)=\"onToggleContextMenuClose()\"\n  >\n    <div class=\"si-tree-view-item\" (mousedown)=\"onMouseDownTreeItem($event)\">\n      @if (showFolderStateStart && treeItem.state !== 'leaf') {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          [style.margin-inline-start]=\"'-' + biggerPaddingStart\"\n          [style.padding-inline-start]=\"paddingStart\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner [@.disabled]=\"true\" />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [disabled]=\"!treeItem.selectable\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <div\n        class=\"si-tree-view-item-main d-flex flex-grow-1 align-self-stretch grab-area\"\n        (click)=\"onItemClicked($event)\"\n      >\n        @if (showIcon()) {\n          <div class=\"si-tree-stretch-center\">\n            <span class=\"si-tree-view-item-icon\" [ngClass]=\"getIconClass()\"></span>\n          </div>\n        }\n        <div\n          class=\"si-tree-view-item-object-data d-flex flex-column justify-content-center overflow-hidden\"\n        >\n          @if (!templates().length) {\n            <h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5>\n          } @else {\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  renderMatchingTemplate(treeItem);\n                  context: { $implicit: treeItem }\n                \"\n              />\n            </div>\n          }\n          @if (enableDataField1() && treeItem.dataField1) {\n            <p class=\"si-tree-view-item-object-data-field-1 text-truncate\">{{\n              treeItem.dataField1 | translate\n            }}</p>\n          }\n          @if (enableDataField2() && treeItem.dataField2) {\n            <p class=\"si-tree-view-item-object-data-field-2 text-truncate\">{{\n              treeItem.dataField2 | translate\n            }}</p>\n          }\n        </div>\n        @if (treeItem.badge) {\n          <span\n            class=\"badge flex-shrink-0\"\n            [ngClass]=\"'bg-' + (treeItem.badgeColor || 'default')\"\n            >{{ treeItem.badge }}</span\n          >\n        }\n      </div>\n      <div\n        class=\"si-tree-view-item-end-icons d-flex ms-2 align-items-center\"\n        [class.si-tree-view-item-end-icons-sticky]=\"stickyEndItems()\"\n      >\n        @if (showStateIndicator() && getStateIndicatorColor()) {\n          <div\n            class=\"si-tree-view-state-indicator\"\n            [style.background-color]=\"getStateIndicatorColor()\"\n            [class.si-tree-view-state-indicator-endmost]=\"\n              !enableContextMenuButton() && !showFolderStateEnd\n            \"\n          ></div>\n        }\n        @if (isContextMenuButtonVisible()) {\n          <div class=\"si-tree-stretch-center si-tree-context-menu-btn\">\n            <div\n              #menuTrigger=\"cdkMenuTriggerFor\"\n              tabindex=\"-1\"\n              aria-hidden=\"true\"\n              [cdkMenuTriggerFor]=\"contextMenu\"\n              (cdkMenuOpened)=\"onToggleContextMenuOpen()\"\n              (cdkMenuClosed)=\"onToggleContextMenuClose()\"\n            >\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon si-tree-view-menu-btn\"\n                [ngClass]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd && treeItem.state !== 'leaf') {\n          <a\n            class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\"\n            tabindex=\"-1\"\n            [class.disabled]=\"!getItemFolderStateClass()\"\n            (click)=\"onItemFolderClicked()\"\n          >\n            @if (isExpanding) {\n              <si-loading-spinner class=\"si-tree-view-item-icon\" />\n            }\n            @if (!isExpanding) {\n              <i\n                aria-hidden=\"true\"\n                class=\"si-tree-view-item-icon\"\n                [ngClass]=\"getItemFolderStateClass()\"\n              ></i>\n            }\n          </a>\n        }\n        @if (showFolderStateEnd && treeItem.state === 'leaf') {\n          <div class=\"si-tree-stretch-center si-tree-view-item-toggle si-tree-view-item-toggle-end\">\n            <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n@if (isGroupedItem) {\n  <div class=\"si-tree-view-li focus-direct-sub-inside\">\n    <div class=\"si-tree-view-item-group\">\n      @if (showFolderStateStart) {\n        <a\n          class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n          tabindex=\"-1\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      @if (showCheckOrOptionBox) {\n        <a class=\"form-check input-box\" tabindex=\"-1\">\n          <input\n            class=\"form-check-input\"\n            tabindex=\"-1\"\n            [type]=\"getInputType()\"\n            [indeterminate]=\"this.treeItem.checked === 'indeterminate' ? true : null\"\n            [checked]=\"this.treeItem.checked === 'checked'\"\n            [attr.aria-label]=\"treeItem.label | translate\"\n            (click)=\"onBoxClicked()\"\n          />\n        </a>\n      }\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <a\n          class=\"si-tree-stretch-center\"\n          tabindex=\"-1\"\n          [class.disabled]=\"!getItemFolderStateClass()\"\n          (click)=\"onItemFolderClicked()\"\n        >\n          @if (isExpanding) {\n            <si-loading-spinner />\n          }\n          @if (!isExpanding) {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #contextMenu>\n  <si-menu-factory class=\"me-5\" [items]=\"contextMenuItems()!\" [actionParam]=\"treeItem\" />\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1;min-block-size:0;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--element-focus-default)!important}:host.cdk-drag-placeholder>*{display:none}:host.cdk-drag:not(.cdk-drag-placeholder){transform:none!important}:host.cdk-drop-list-dragging *:hover,:host.cdk-drop-list-dragging .si-tree-view-item-end-icons,:host.cdk-drop-list-dragging .si-tree-view-item-context-menu-visible,:host .cdk-drop-list-dragging *:hover,:host .cdk-drop-list-dragging .si-tree-view-item-end-icons,:host .cdk-drop-list-dragging .si-tree-view-item-context-menu-visible{background-color:transparent!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{padding-inline-start:8px!important;padding-inline-end:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .si-tree-view-item-toggle{padding-inline-start:12px!important}:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item .badge{margin-inline-end:0}:host.cdk-drag-preview .si-tree-view-item-end-icons,:host.cdk-drag-preview .si-tree-view-li.si-tree-view-li-item{background-color:var(--element-base-3)!important}.si-tree-view-li.si-tree-view-li-item{position:relative}.si-tree-view-li.si-tree-view-li-item:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible,.si-tree-view-li.si-tree-view-li-item:hover .si-tree-view-item-end-icons,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-context-menu-visible .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-hover-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected .si-tree-view-item-end-icons{background-color:var(--si-tree-view-item-select-color)}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-selected>.si-tree-view-item>.si-tree-view-item-main>.si-tree-view-item-object-data>h5{font-weight:700}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable:hover,.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-end-icons{background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item:hover{cursor:default;background-color:unset}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-dropdown-caret{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-context-menu-btn>div[role=button]{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end{cursor:pointer}.si-tree-view-li.si-tree-view-li-item.si-tree-view-item-not-selectable .si-tree-view-item-toggle-end .si-tree-view-item-icon{color:var(--element-text-primary)}.si-tree-view-li.si-tree-view-li-item .si-tree-view-item-end-icons{background-color:var(--si-tree-view-background)}.si-tree-view-item-group,.si-tree-view-item{display:flex;align-items:center}.si-tree-stretch-center{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;text-decoration:none}.si-tree-view-item-toggle.disabled .si-tree-view-item-icon{inline-size:24px}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:-4px}.si-tree-view-item-icon{padding-inline-end:8px}.si-tree-view-item-icon.si-tree-view-item-icon-spacer{box-sizing:content-box;inline-size:var(--si-tree-view-icon-size)}.si-tree-view-item-object-data,.si-tree-view-item-icon{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item{justify-content:space-between;min-block-size:var(--si-tree-view-item-min-height);padding-inline:var(--si-tree-view-padding-base-horizontal) calc(var(--si-tree-view-padding-base-horizontal) / 4)}.si-tree-view-item:hover{cursor:pointer}:host-context(.si-tree-view-flat) .si-tree-view-item{padding-inline-start:calc(var(--si-tree-view-padding-base-horizontal) / 2)}.si-tree-view-state-indicator{margin-block:0;margin-inline:calc(var(--si-tree-view-padding-base-horizontal) * .75);min-inline-size:6px;block-size:6px;border-radius:50%}.si-tree-view-state-indicator.si-tree-view-state-indicator-endmost{margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) * 1.75)}.si-tree-view-item-group{padding-block:calc(2 * var(--si-tree-view-padding-base-vertical));padding-inline:calc(var(--si-tree-view-padding-base-horizontal) / 2);cursor:default}.si-tree-view-item-group .si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-group .si-tree-view-item-icon:hover{cursor:pointer}.si-tree-view-item-dropdown-caret,.si-tree-view-item-dropdown-caret:hover,.si-tree-view-item-icon,.si-tree-view-item-icon:hover{color:var(--element-text-primary);text-decoration:none;font-size:var(--si-tree-view-icon-size)}.si-tree-view-item-main{overflow-x:hidden}.si-tree-view-item-main>.badge{margin-block:auto}.si-tree-view-item-object-data>.si-tree-view-item-object-data-field-1{color:var(--si-tree-view-item-object-data-field-1-color)}:host.si-tree-ellipsis .si-tree-view-item-object-data{overflow-x:hidden}.si-tree-view-item-object-data>*{white-space:nowrap;margin-block:0;line-height:var(--si-tree-view-item-line-height)}:host.si-tree-ellipsis .si-tree-view-item-object-data>*{overflow:hidden;text-overflow:ellipsis}.si-tree-view-item-object-data>h5{font-size:var(--si-tree-view-item-object-data-h5-font-size);font-weight:var(--si-tree-view-item-object-data-h5-font-weight)}.si-tree-view-menu-btn{pointer-events:none}.si-tree-view-item-end-icons{block-size:calc(var(--si-tree-view-item-min-height) - 2 * (var(--element-button-focus-width) + var(--element-button-focus-overlay-width)))}.si-tree-view-item-end-icons.si-tree-view-item-end-icons-sticky{position:sticky;inset-inline-end:0}.input-box{margin-inline:2px 12px}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
+        }], propDecorators: { ariaLevel: [{
                 type: HostBinding,
                 args: ['attr.aria-level']
             }], ariaSetsize: [{
@@ -853,7 +850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
             }] } });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -929,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -1018,7 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiTreeViewItemDirective {
@@ -1119,7 +1116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 /**
@@ -1630,7 +1627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 /*
@@ -1895,7 +1892,7 @@ class SiTreeViewComponent {
     /**
      * The injected content with included SiTreeViewItemTemplateDirective.
      */
-    templates;
+    templates = contentChildren(SiTreeViewItemTemplateDirective);
     initialized = false;
     updateTreeItemHeightRequired = true; // must be set to true so the height is initially calculated once at least
     updateGroupItemHeightRequired = true; // must be set to true so the height is initially calculated once at least
@@ -1915,6 +1912,7 @@ class SiTreeViewComponent {
     siTreeViewItemHeightService = inject(SiTreeViewItemHeightService);
     cdRef = inject(ChangeDetectorRef);
     resizeObserver = inject(ResizeObserverService);
+    injector = inject(INJECTOR);
     /**
      * Create a virtual root node so there is just a single root node. This makes sure the tree
      * can be fully traversed starting from any node. This is needed e.g. for recursively
@@ -1970,9 +1968,11 @@ class SiTreeViewComponent {
             ? this.siTreeViewVirtualizationService.itemsVirtualized
             : this.siTreeViewConverterService.flattenedTrees;
     }
-    children;
-    treeItemContentTemplate;
-    nextItmes;
+    children = viewChildren(SiTreeViewItemComponent);
+    treeItemContentTemplate = contentChild(SiTreeViewItemDirective, {
+        read: TemplateRef
+    });
+    nextItmes = contentChildren(SiTreeViewItemComponent, { descendants: true });
     keyManager;
     /**
      * @internal
@@ -2029,7 +2029,7 @@ class SiTreeViewComponent {
         }
     }
     ngOnInit() {
-        this.scroll$ = defer(() => fromEvent(this.treeViewInnerElement.nativeElement, 'scroll'));
+        this.scroll$ = defer(() => fromEvent(this.treeViewInnerElement().nativeElement, 'scroll'));
         this.siTreeViewService.scroll$ = this.scroll$;
         if (this.isVirtualized()) {
             this.subscriptions.push(this.scroll$.subscribe(event => this.onScroll(event)));
@@ -2058,7 +2058,7 @@ class SiTreeViewComponent {
     ngAfterViewInit() {
         this.addClassObserver();
         this.subscriptions.push(this.monitorTreeSizeChanges().subscribe(d => this.updatePageSize(d)));
-        this.keyManager = new FocusKeyManager(this.getChildren())
+        this.keyManager = new FocusKeyManager(this.getChildren(), this.injector)
             .withWrap()
             .withAllowedModifierKeys(['shiftKey'])
             .withHomeAndEnd()
@@ -2071,10 +2071,10 @@ class SiTreeViewComponent {
             const oldHeight = this.siTreeViewItemHeightService.itemHeight;
             let newHeight;
             if (this.isVirtualized()) {
-                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
+                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement().nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
             }
             else {
-                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
+                newHeight = this.siTreeViewItemHeightService.updateItemHeight(this.treeViewInnerElement().nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
             }
             if (newHeight !== undefined && newHeight > 0) {
                 this.updateTreeItemHeightRequired = false;
@@ -2092,10 +2092,10 @@ class SiTreeViewComponent {
             const oldHeight = this.siTreeViewItemHeightService.groupItemHeight;
             let newHeight;
             if (this.isVirtualized()) {
-                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
+                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement().nativeElement, this.siTreeViewConverterService.flattenedTrees, this.siTreeViewVirtualizationService.itemBaseIdx, this.siTreeViewVirtualizationService.itemsVirtualizedCount);
             }
             else {
-                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement.nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
+                newHeight = this.siTreeViewItemHeightService.updateGroupedItemHeight(this.treeViewInnerElement().nativeElement, this.siTreeViewConverterService.flattenedTrees, 0, this.siTreeViewConverterService.flattenedTrees.length);
             }
             if (newHeight !== undefined) {
                 this.updateGroupItemHeightRequired = false;
@@ -2167,11 +2167,11 @@ class SiTreeViewComponent {
         this.focusFirstItemFlattened();
     }
     getChildren() {
-        return !this.treeItemContentTemplate ? this.children : this.nextItmes;
+        return !this.treeItemContentTemplate() ? this.children : this.nextItmes;
     }
     focusItem(item) {
         const children = this.getChildren();
-        const component = children?.find(child => child.treeItem === item);
+        const component = children()?.find(child => child.treeItem === item);
         if (component) {
             this.keyManager.setActiveItem(component);
         }
@@ -2186,7 +2186,7 @@ class SiTreeViewComponent {
         const firstChild = item.children?.[0];
         if (firstChild) {
             const children = this.getChildren();
-            const firstChildComponent = children?.find(child => child.treeItem === firstChild);
+            const firstChildComponent = children()?.find(child => child.treeItem === firstChild);
             if (firstChildComponent) {
                 this.keyManager.setActiveItem(firstChildComponent);
             }
@@ -2476,7 +2476,7 @@ class SiTreeViewComponent {
         }
         return undefined;
     }
-    treeViewInnerElement;
+    treeViewInnerElement = viewChild.required('treeViewInner');
     onItemFolderClicked(eventArgs) {
         this.treeItemFolderClicked.emit(eventArgs);
         this.treeItemFolderStateChanged.emit(eventArgs);
@@ -2730,35 +2730,23 @@ class SiTreeViewComponent {
             SiTreeViewItemHeightService,
             SiTreeViewService,
             SiTreeViewVirtualizationService
-        ], queries: [{ propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef }, { propertyName: "templates", predicate: SiTreeViewItemTemplateDirective }, { propertyName: "nextItmes", predicate: SiTreeViewItemComponent, descendants: true }], viewQueries: [{ propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, read: ElementRef, static: true }, { propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }] });
+        ], queries: [{ propertyName: "templates", predicate: SiTreeViewItemTemplateDirective, isSignal: true }, { propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nextItmes", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }, { propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tree-view', providers: [
-                        SiTreeViewConverterService,
-                        SiTreeViewItemHeightService,
-                        SiTreeViewService,
-                        SiTreeViewVirtualizationService
-                    ], imports: [
+            args: [{ selector: 'si-tree-view', imports: [
                         NgClass,
-                        SiTranslateModule,
+                        SiTranslatePipe,
                         SiTreeViewItemComponent,
                         CdkScrollableModule,
                         SiTreeViewItemDirective
-                    ], template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
-        }], propDecorators: { templates: [{
-                type: ContentChildren,
-                args: [SiTreeViewItemTemplateDirective]
-            }], children: [{
-                type: ViewChildren,
-                args: [SiTreeViewItemComponent]
-            }], treeItemContentTemplate: [{
-                type: ContentChild,
-                args: [SiTreeViewItemDirective, { read: TemplateRef }]
-            }], nextItmes: [{
-                type: ContentChildren,
-                args: [SiTreeViewItemComponent, { descendants: true }]
-            }], onKeyUpShift: [{
+                    ], providers: [
+                        SiTreeViewConverterService,
+                        SiTreeViewItemHeightService,
+                        SiTreeViewService,
+                        SiTreeViewVirtualizationService
+                    ], template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <span class=\"element-expand-all\"></span>\n    </button>\n    <button\n      class=\"btn btn-sm btn-circle btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <span class=\"element-collapse-all\"></span>\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class.disabled]=\"headerShowsRoot\"\n      [ngClass]=\"computedIcons().headerHome\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class.disabled]=\"headerShowsRoot\"\n        [ngClass]=\"computedIcons().headerArrow\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n    }\n    @if (lastBreadCrumbItem) {\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 24px;--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--element-base-1-hover);--si-tree-view-item-select-color: var(--element-base-1-selected);--si-tree-view-item-line-height: 1.143;--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--element-text-secondary);--si-tree-view-item-object-data-h5-font-size: .875rem;--si-tree-view-item-object-data-h5-font-weight: normal}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:8px}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
+        }], propDecorators: { onKeyUpShift: [{
                 type: HostListener,
                 args: ['document:keyup.shift']
             }], onKeyUpCtrl: [{
@@ -2773,13 +2761,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], treeViewInnerElement: [{
-                type: ViewChild,
-                args: ['treeViewInner', { read: ElementRef, static: true }]
             }] } });
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiTreeViewModule {
@@ -2924,7 +2909,7 @@ const modifyTreeStructure = (sourceItems, event, targetItems, targetIndex, remov
 };
 
 /**
- * Copyright Siemens 2016 - 2025.
+ * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */