@siemens/element-ng 48.0.0-next.2 → 48.0.0-next.4

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

@@ -3,6 +3,7 @@ import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, Elem
 import { CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { correctKeyRTL } from '@siemens/element-ng/common';
+import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
@@ -588,19 +589,6 @@ class SiTreeViewItemComponent {
         }
         return '';
     }
-    /**
-     * Show icon if the item is selected.
-     * Per default the `filled` icon is used, this can be configured using {@link disableFilledIcons}.
-     **/
-    getIconClass() {
-        let iconClass = this.treeItem.icon;
-        if (this.treeItem.selected && this.treeItem.selectable && this.enableSelection()) {
-            iconClass =
-                iconClass +
-                    (!this.treeViewComponent.disableFilledIcons() ? ' ' + iconClass + '-filled' : '');
-        }
-        return iconClass ?? '';
-    }
     getStateIndicatorColor() {
         return this.treeItem ? (this.treeItem.stateIndicatorColor ?? '') : '';
     }
@@ -803,7 +791,7 @@ class SiTreeViewItemComponent {
             !this.treeViewComponent.flatTree());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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=\"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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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=\"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            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { 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: "20.0.6", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
             type: Component,
@@ -812,6 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         CdkMenuTrigger,
                         NgClass,
                         NgTemplateOutlet,
+                        SiIconComponent,
                         SiLoadingSpinnerComponent,
                         SiMenuFactoryComponent,
                         SiTranslatePipe
@@ -822,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.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=\"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"] }]
+                    }, 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=\"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            <si-icon class=\"si-tree-view-item-icon\" [icon]=\"treeItem.icon!\" />\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']
@@ -1729,12 +1718,6 @@ class SiTreeViewComponent {
     pagesVirtualized = input(6, {
         transform: (value) => (value < 5 ? 5 : value)
     });
-    /**
-     * Whether "filled" icons should not be used when a tree item is selected.
-     * Per default filled icons are used when available.
-     * @defaultValue false
-     */
-    disableFilledIcons = input(false, { transform: booleanAttribute });
     /**
      * Sets if the folder state icon shall be shown on the left (in LTR) or on the right (in LTR) side
      * of the tree item. Per default the icon will be shown on the left (in LTR). Has no
@@ -2714,7 +2697,7 @@ class SiTreeViewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTreeViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTreeViewComponent, isStandalone: true, selector: "si-tree-view", inputs: { contextMenuItems: { classPropertyName: "contextMenuItems", publicName: "contextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, childrenIndentation: { classPropertyName: "childrenIndentation", publicName: "childrenIndentation", isSignal: true, isRequired: false, transformFunction: null }, horizontalScrolling: { classPropertyName: "horizontalScrolling", publicName: "horizontalScrolling", isSignal: true, isRequired: false, transformFunction: null }, compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, expandCollapseAll: { classPropertyName: "expandCollapseAll", publicName: "expandCollapseAll", isSignal: true, isRequired: false, transformFunction: null }, expandAllTooltip: { classPropertyName: "expandAllTooltip", publicName: "expandAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapseAllTooltip: { classPropertyName: "collapseAllTooltip", publicName: "collapseAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pagesVirtualized: { classPropertyName: "pagesVirtualized", publicName: "pagesVirtualized", isSignal: true, isRequired: false, transformFunction: null }, disableFilledIcons: { classPropertyName: "disableFilledIcons", publicName: "disableFilledIcons", isSignal: true, isRequired: false, transformFunction: null }, folderStateStart: { classPropertyName: "folderStateStart", publicName: "folderStateStart", isSignal: true, isRequired: false, transformFunction: null }, isVirtualized: { classPropertyName: "isVirtualized", publicName: "isVirtualized", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, singleSelectMode: { classPropertyName: "singleSelectMode", publicName: "singleSelectMode", isSignal: true, isRequired: false, transformFunction: null }, enableDataField1: { classPropertyName: "enableDataField1", publicName: "enableDataField1", isSignal: true, isRequired: false, transformFunction: null }, enableDataField2: { classPropertyName: "enableDataField2", publicName: "enableDataField2", isSignal: true, isRequired: false, transformFunction: null }, enableStateIndicator: { classPropertyName: "enableStateIndicator", publicName: "enableStateIndicator", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, enableContextMenuButton: { classPropertyName: "enableContextMenuButton", publicName: "enableContextMenuButton", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, deleteChildrenOnCollapse: { classPropertyName: "deleteChildrenOnCollapse", publicName: "deleteChildrenOnCollapse", isSignal: true, isRequired: false, transformFunction: null }, flatTree: { classPropertyName: "flatTree", publicName: "flatTree", isSignal: true, isRequired: false, transformFunction: null }, groupedList: { classPropertyName: "groupedList", publicName: "groupedList", isSignal: true, isRequired: false, transformFunction: null }, enableCheckbox: { classPropertyName: "enableCheckbox", publicName: "enableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableOptionbox: { classPropertyName: "enableOptionbox", publicName: "enableOptionbox", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, inheritChecked: { classPropertyName: "inheritChecked", publicName: "inheritChecked", isSignal: true, isRequired: false, transformFunction: null }, noActionsString: { classPropertyName: "noActionsString", publicName: "noActionsString", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsVirtualizedChanged: "itemsVirtualizedChanged", treeItemFolderClicked: "treeItemFolderClicked", treeItemFolderStateChanged: "treeItemFolderStateChanged", treeItemClicked: "treeItemClicked", treeItemCheckboxClicked: "treeItemCheckboxClicked", loadChildren: "loadChildren", treeItemsSelected: "treeItemsSelected" }, host: { listeners: { "document:keyup.shift": "onKeyUpShift()", "document:keyup.control": "onKeyUpCtrl()", "document:keyup.meta": "onKeyUpMeta()", "document:mouseleave": "onMouseLeave()", "keydown": "handleKeydown($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTreeViewComponent, isStandalone: true, selector: "si-tree-view", inputs: { contextMenuItems: { classPropertyName: "contextMenuItems", publicName: "contextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, childrenIndentation: { classPropertyName: "childrenIndentation", publicName: "childrenIndentation", isSignal: true, isRequired: false, transformFunction: null }, horizontalScrolling: { classPropertyName: "horizontalScrolling", publicName: "horizontalScrolling", isSignal: true, isRequired: false, transformFunction: null }, compactMode: { classPropertyName: "compactMode", publicName: "compactMode", isSignal: true, isRequired: false, transformFunction: null }, expandCollapseAll: { classPropertyName: "expandCollapseAll", publicName: "expandCollapseAll", isSignal: true, isRequired: false, transformFunction: null }, expandAllTooltip: { classPropertyName: "expandAllTooltip", publicName: "expandAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, collapseAllTooltip: { classPropertyName: "collapseAllTooltip", publicName: "collapseAllTooltip", isSignal: true, isRequired: false, transformFunction: null }, icons: { classPropertyName: "icons", publicName: "icons", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pagesVirtualized: { classPropertyName: "pagesVirtualized", publicName: "pagesVirtualized", isSignal: true, isRequired: false, transformFunction: null }, folderStateStart: { classPropertyName: "folderStateStart", publicName: "folderStateStart", isSignal: true, isRequired: false, transformFunction: null }, isVirtualized: { classPropertyName: "isVirtualized", publicName: "isVirtualized", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, singleSelectMode: { classPropertyName: "singleSelectMode", publicName: "singleSelectMode", isSignal: true, isRequired: false, transformFunction: null }, enableDataField1: { classPropertyName: "enableDataField1", publicName: "enableDataField1", isSignal: true, isRequired: false, transformFunction: null }, enableDataField2: { classPropertyName: "enableDataField2", publicName: "enableDataField2", isSignal: true, isRequired: false, transformFunction: null }, enableStateIndicator: { classPropertyName: "enableStateIndicator", publicName: "enableStateIndicator", isSignal: true, isRequired: false, transformFunction: null }, enableIcon: { classPropertyName: "enableIcon", publicName: "enableIcon", isSignal: true, isRequired: false, transformFunction: null }, enableContextMenuButton: { classPropertyName: "enableContextMenuButton", publicName: "enableContextMenuButton", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, deleteChildrenOnCollapse: { classPropertyName: "deleteChildrenOnCollapse", publicName: "deleteChildrenOnCollapse", isSignal: true, isRequired: false, transformFunction: null }, flatTree: { classPropertyName: "flatTree", publicName: "flatTree", isSignal: true, isRequired: false, transformFunction: null }, groupedList: { classPropertyName: "groupedList", publicName: "groupedList", isSignal: true, isRequired: false, transformFunction: null }, enableCheckbox: { classPropertyName: "enableCheckbox", publicName: "enableCheckbox", isSignal: true, isRequired: false, transformFunction: null }, enableOptionbox: { classPropertyName: "enableOptionbox", publicName: "enableOptionbox", isSignal: true, isRequired: false, transformFunction: null }, expandOnClick: { classPropertyName: "expandOnClick", publicName: "expandOnClick", isSignal: true, isRequired: false, transformFunction: null }, inheritChecked: { classPropertyName: "inheritChecked", publicName: "inheritChecked", isSignal: true, isRequired: false, transformFunction: null }, noActionsString: { classPropertyName: "noActionsString", publicName: "noActionsString", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsVirtualizedChanged: "itemsVirtualizedChanged", treeItemFolderClicked: "treeItemFolderClicked", treeItemFolderStateChanged: "treeItemFolderStateChanged", treeItemClicked: "treeItemClicked", treeItemCheckboxClicked: "treeItemCheckboxClicked", loadChildren: "loadChildren", treeItemsSelected: "treeItemsSelected" }, host: { listeners: { "document:keyup.shift": "onKeyUpShift()", "document:keyup.control": "onKeyUpCtrl()", "document:keyup.meta": "onKeyUpMeta()", "document:mouseleave": "onMouseLeave()", "keydown": "handleKeydown($event)" } }, providers: [
             SiTreeViewConverterService,
             SiTreeViewItemHeightService,
             SiTreeViewService,