@siemens/element-ng 48.2.0 → 48.3.0

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

@@ -18,6 +18,45 @@ import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+/**
+ * Tree view item template directive for defining custom item templates.
+ *
+ * @deprecated Use `siTreeViewItem` instead.
+ *
+ * This directive is deprecated and will be removed in a future version.
+ *
+ * @example
+ * Migration Guide:
+ *
+ * Before (deprecated):
+ * ```html
+ * <si-tree-view>
+ *   <ng-template siTreeViewItemTemplate="root" let-item>
+ *     <div class="custom-item">Root {{ item.level }}</div>
+ *   </ng-template>
+ *   <ng-template siTreeViewItemTemplate="child" let-item>
+ *     <div class="custom-item">Child {{ item.level }}</div>
+ *   </ng-template>
+ * </si-tree-view>
+ * ```
+ *
+ * After (recommended):
+ * ```html
+ * <si-tree-view>
+ *   <ng-template siTreeViewItem let-item="treeItem">
+ *     <si-tree-view-item>
+ *      <div class="custom-item">
+ *       @if (item.level === 0) {
+ *         Root {{ item.level }}
+ *       } @else {
+ *         Child {{ item.level }}
+ *       }
+ *      </div>
+ *     </si-tree-view-item>
+ *   </ng-template>
+ * </si-tree-view>
+ * ```
+ */
 class SiTreeViewItemTemplateDirective {
     /** @defaultValue undefined */
     name = input(undefined, { alias: 'siTreeViewItemTemplate' });
@@ -791,7 +830,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          } @else {\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            } @else {\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} @else {\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          } @else {\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          } @else {\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.1428571429;--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: 400}: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:600}.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" }] });
+    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          } @else {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\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            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5></ng-content\n            >\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            } @else {\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} @else {\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          } @else {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check' }\"\n      />\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          } @else {\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\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [ngClass]=\"classNames\">\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</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.1428571429;--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: 400}: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:600}.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,
@@ -811,7 +850,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          } @else {\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            } @else {\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} @else {\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          } @else {\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          } @else {\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.1428571429;--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: 400}: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:600}.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          } @else {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-dropdown-caret\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      <ng-container [ngTemplateOutlet]=\"checkboxOrOption\" />\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            <ng-content select=\":not(si-tree-view-item):not([dragPreview])\"\n              ><h5 class=\"text-truncate\">{{ treeItem.label | translate }}</h5></ng-content\n            >\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            } @else {\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} @else {\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          } @else {\n            <i\n              aria-hidden=\"true\"\n              class=\"si-tree-view-item-icon\"\n              [ngClass]=\"getItemFolderStateClass()\"\n            ></i>\n          }\n        </a>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check' }\"\n      />\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          } @else {\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\n<ng-template #checkboxOrOption let-classNames=\"classNames\">\n  @if (showCheckOrOptionBox) {\n    <a class=\"input-box\" tabindex=\"-1\" [ngClass]=\"classNames\">\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</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.1428571429;--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: 400}: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:600}.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']