@siemens/element-ng 51.1.0 → 51.3.0

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

@@ -4,7 +4,7 @@ import { CdkMenuTrigger, CdkContextMenuTrigger } from '@angular/cdk/menu';
 import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { correctKeyRTL } from '@siemens/element-ng/common';
-import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons } 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';
@@ -13,6 +13,7 @@ import { takeUntil, take, withLatestFrom, map } from 'rxjs/operators';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
+import { elementCollapseAll, elementExpandAll } from '@siemens/element-icons';
 import { ResizeObserverService } from '@siemens/element-ng/resize-observer';
 
 /**
@@ -853,7 +854,7 @@ class SiTreeViewItemComponent {
             !this.treeViewComponent.flatTree());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\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              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></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 class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\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                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\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\" [class]=\"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\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}: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-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder{block-size:auto!important;margin-inline:0;margin-block:revert!important;min-block-size:revert;position:static;z-index:auto}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder:after{content:none!important}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder>*{display:revert}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1!important;min-block-size:0!important;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--si-sys-color-effects-focus)!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(--si-sys-color-background-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-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(--si-sys-color-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:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.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:.375rem;block-size:.375rem;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(--si-sys-color-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-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:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.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", "cdkContextMenuTriggerTransformOriginOn", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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" }, classAttribute: "drop-line-placeholder" }, 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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\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              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></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 class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\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                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\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\" [class]=\"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\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}: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:not(.cdk-drag-placeholder){transform:none!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(--si-sys-color-background-3)!important}:host-context(.cdk-drop-list-dragging) *:hover,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-end-icons,:host-context(.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}.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-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(--si-sys-color-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:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.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:.375rem;block-size:.375rem;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(--si-sys-color-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-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:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.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", "cdkContextMenuTriggerTransformOriginOn", "cdkContextMenuDisabled"], outputs: ["cdkContextMenuOpened", "cdkContextMenuClosed"], exportAs: ["cdkContextMenuTriggerFor"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
             type: Component,
@@ -866,6 +867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         SiMenuFactoryComponent,
                         SiTranslatePipe
                     ], changeDetection: ChangeDetectionStrategy.Eager, host: {
+                        class: 'drop-line-placeholder',
                         role: 'treeitem',
                         '[attr.tabindex]': 'treeItemContext.record.currentIndex === treeViewComponent.activeIndex ? 0 : -1',
                         '[class.focus-none]': 'true',
@@ -874,7 +876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.aria-haspopup]': 'isContextMenuButtonVisible()',
                         '(contextmenu)': 'onContextMenu($event)',
                         '(keydown)': 'onKeydown($event)'
-                    }, 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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\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              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></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 class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\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                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\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\" [class]=\"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\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}: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-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder{block-size:auto!important;margin-inline:0;margin-block:revert!important;min-block-size:revert;position:static;z-index:auto}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder:after{content:none!important}:host-context(.cdk-drop-list[cdkDropListHasAnchor]) :host.cdk-drag-placeholder>*{display:revert}:host{display:block}:host.cdk-drag-placeholder{block-size:0;margin-inline:8px;margin-block:0!important;opacity:1!important;min-block-size:0!important;position:relative;z-index:999}:host.cdk-drag-placeholder:after{position:absolute;inline-size:100%;block-size:2px;content:\"\";background-color:var(--si-sys-color-effects-focus)!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(--si-sys-color-background-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-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(--si-sys-color-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:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.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:.375rem;block-size:.375rem;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(--si-sys-color-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-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:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: negativeBiggerPaddingStart,\n            paddingStart: paddingStart,\n            toggleIcon: 'si-tree-view-item-dropdown-caret'\n          }\"\n        />\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              ><div class=\"text-truncate\" [class.si-h5]=\"enableSelection() && treeItem.selected\">{{\n                treeItem.label | translate\n              }}</div></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 class=\"badge flex-shrink-0\" [class]=\"`bg-${treeItem.badgeColor || 'default'}`\">{{\n            treeItem.badge\n          }}</span>\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                [class]=\"icons().itemMenu\"\n              ></i>\n            </div>\n          </div>\n        }\n        @if (showFolderStateEnd) {\n          <ng-container\n            [ngTemplateOutlet]=\"treeItem.state === 'leaf' ? spacerTemplate : toggleTemplate\"\n            [ngTemplateOutletContext]=\"{\n              toggleIcon: 'si-tree-view-item-icon',\n              positionEnd: true\n            }\"\n          />\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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"checkboxOrOption\"\n        [ngTemplateOutletContext]=\"{ classNames: 'form-check mb-2' }\"\n      />\n\n      <p class=\"mb-0\">{{ treeItem.label | translate }}</p>\n      @if (showFolderStateEnd) {\n        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            toggleIcon: 'si-tree-view-item-icon'\n          }\"\n        />\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\" [class]=\"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\n<ng-template\n  #toggleTemplate\n  let-biggerPaddingStart=\"biggerPaddingStart\"\n  let-paddingStart=\"paddingStart\"\n  let-toggleIcon=\"toggleIcon\"\n  let-positionEnd=\"positionEnd\"\n>\n  @let folderStateClass = getItemFolderStateClass();\n  <a\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    tabindex=\"-1\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n    [class.disabled]=\"!folderStateClass\"\n    [style.margin-inline-start]=\"biggerPaddingStart\"\n    [style.padding-inline-start]=\"paddingStart\"\n    (click)=\"onItemFolderClicked()\"\n  >\n    @if (isExpanding) {\n      <si-loading-spinner />\n    } @else {\n      <i aria-hidden=\"true\" [class]=\"`${toggleIcon} ${folderStateClass}`\"></i>\n    }\n  </a>\n</ng-template>\n\n<ng-template #spacerTemplate let-positionEnd=\"positionEnd\">\n  <div\n    class=\"si-tree-stretch-center si-tree-view-item-toggle\"\n    [class.si-tree-view-item-toggle-end]=\"positionEnd\"\n  >\n    <i aria-hidden=\"true\" class=\"si-tree-view-item-icon si-tree-view-item-icon-spacer\"></i>\n  </div>\n</ng-template>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}: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:not(.cdk-drag-placeholder){transform:none!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(--si-sys-color-background-3)!important}:host-context(.cdk-drop-list-dragging) *:hover,:host-context(.cdk-drop-list-dragging) .si-tree-view-item-end-icons,:host-context(.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}.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-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(--si-sys-color-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:var(--si-sys-sizing-spacing-x-80)}.si-tree-stretch-center+.si-tree-view-item-toggle-end .si-tree-view-item-icon{margin-inline-start:calc(var(--si-sys-sizing-spacing-x-20) * -1)}.si-tree-view-item-icon{padding-inline-end:var(--si-sys-sizing-spacing-x-20)}.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:.375rem;block-size:.375rem;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(--si-sys-color-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-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:var(--si-sys-sizing-spacing-x-10) var(--si-sys-sizing-spacing-x-50)}.form-check-input{display:block}si-loading-spinner{--loading-spinner-size: var(--si-tree-view-icon-size)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], ariaLevel: [{
                 type: HostBinding,
                 args: ['attr.aria-level']
@@ -1690,10 +1692,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-/*
- * WARNING: Parts of this component are made to be used in conjunction with Bootstrap.
- * Bootstrap is not included with this package and has to be installed separately.
- */
 const rootDefaults = {
     label: 'root',
     level: ROOT_LEVEL,
@@ -1983,6 +1981,7 @@ class SiTreeViewComponent {
     virtualRoot = { ...rootDefaults };
     _items = signal(this.items(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    svgIcons = addIcons({ elementExpandAll, elementCollapseAll });
     updateTreeItemDefaults(item) {
         item.showCheckbox ??= this.enableCheckbox();
         item.showOptionbox ??= this.enableOptionbox();
@@ -2815,11 +2814,17 @@ class SiTreeViewComponent {
             SiTreeViewService,
             SiTreeViewVirtualizationService,
             { provide: SI_TREE_VIEW, useExisting: SiTreeViewComponent }
-        ], queries: [{ propertyName: "templates", predicate: SiTreeViewItemTemplateDirective, isSignal: true }, { propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nextItems", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }, { propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary element-expand-all\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4 element-collapse-all\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], queries: [{ propertyName: "templates", predicate: SiTreeViewItemTemplateDirective, isSignal: true }, { propertyName: "treeItemContentTemplate", first: true, predicate: SiTreeViewItemDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "nextItems", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "children", predicate: SiTreeViewItemComponent, descendants: true, isSignal: true }, { propertyName: "treeViewInnerElement", first: true, predicate: ["treeViewInner"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementExpandAll\" />\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementCollapseAll\" />\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"], dependencies: [{ kind: "component", type: SiTreeViewItemComponent, selector: "si-tree-view-item" }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: SiTreeViewItemDirective, selector: "[siTreeViewItem]" }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTreeViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-tree-view', imports: [SiTranslatePipe, SiTreeViewItemComponent, CdkScrollableModule, SiTreeViewItemDirective], providers: [
+            args: [{ selector: 'si-tree-view', imports: [
+                        SiTranslatePipe,
+                        SiTreeViewItemComponent,
+                        CdkScrollableModule,
+                        SiTreeViewItemDirective,
+                        SiIconComponent
+                    ], providers: [
                         SiTreeViewConverterService,
                         SiTreeViewItemHeightService,
                         SiTreeViewService,
@@ -2831,7 +2836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '(document:keyup.meta)': 'onKeyUpMeta()',
                         '(document:mouseleave)': 'onMouseLeave()',
                         '(keydown)': 'handleKeydown($event)'
-                    }, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary element-expand-all\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4 element-collapse-all\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
+                    }, template: "@if (!flatTree() && expandCollapseAll()) {\n  <div class=\"si-tree-view-expand-collapse-container p-4\">\n    <button\n      class=\"btn btn-icon btn-tertiary\"\n      type=\"button\"\n      [title]=\"expandAllTooltip() | translate\"\n      [attr.aria-label]=\"expandAllTooltip() | translate\"\n      (click)=\"expandAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementExpandAll\" />\n    </button>\n    <button\n      class=\"btn btn-icon btn-tertiary ms-4\"\n      type=\"button\"\n      [title]=\"collapseAllTooltip() | translate\"\n      [attr.aria-label]=\"collapseAllTooltip() | translate\"\n      (click)=\"collapseAll()\"\n    >\n      <si-icon [icon]=\"svgIcons.elementCollapseAll\" />\n    </button>\n  </div>\n}\n@if (flatTree()) {\n  <div class=\"si-tree-view-header\">\n    <span\n      class=\"si-tree-view-header-btn si-tree-view-header-root\"\n      tabindex=\"0\"\n      [class]=\"computedIcons().headerHome\"\n      [class.disabled]=\"headerShowsRoot\"\n      (click)=\"onFlatTreeNavigateHome()\"\n      (keydown.enter)=\"onFlatTreeNavigateHome()\"\n    ></span>\n    @if (lastBreadCrumbItem) {\n      <span\n        class=\"si-tree-view-header-btn\"\n        tabindex=\"0\"\n        [class]=\"computedIcons().headerArrow\"\n        [class.disabled]=\"headerShowsRoot\"\n        (click)=\"onFlatTreeNavigateUp()\"\n        (keydown.enter)=\"onFlatTreeNavigateUp()\"\n      ></span>\n      <span class=\"text-center text-truncate\">{{ lastBreadCrumbItem.label | translate }}</span>\n    }\n  </div>\n}\n<div\n  #treeViewInner\n  cdkScrollable\n  class=\"si-tree-view focus-inside\"\n  role=\"tree\"\n  [attr.aria-multiselectable]=\"!singleSelectMode()\"\n  [attr.aria-label]=\"ariaLabel() ? (ariaLabel() | translate) : undefined\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [class.si-tree-horizontal-scroll]=\"horizontalScrolling()\"\n  [class.si-tree-view-flat]=\"flatTree()\"\n  [class.si-tree-expand-collapse]=\"!flatTree() && expandCollapseAll()\"\n>\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightBefore\"></div>\n  }\n  @if (itemsVirtualized) {\n    <div class=\"si-tree-view-root-ul\">\n      <ng-content select=\"[cdkDropList], [siTreeViewItem]\" />\n      @if (!treeItemContentTemplate()) {\n        <si-tree-view-item *siTreeViewItem=\"let index = index; let treeItem = treeItem\" />\n      }\n    </div>\n  }\n  @if (isVirtualized()) {\n    <div [class.w-100]=\"horizontalScrolling()\" [style.height]=\"heightAfter\"></div>\n  }\n</div>\n", styles: [":host{--si-tree-view-background: var(--si-sys-color-background-1);--si-tree-view-border-color: var(--si-sys-color-border-4);--si-tree-view-icon-size: var(--si-sys-sizing-icon-md);--si-tree-view-padding-base-horizontal: 8px;--si-tree-view-padding-base-vertical: 8px;--si-tree-view-item-hover-color: var(--si-sys-color-background-hover);--si-tree-view-item-select-color: var(--si-sys-color-background-active);--si-tree-view-item-line-height: var(--si-sys-typography-line-height-body);--si-tree-view-item-min-height: 40px;--si-tree-view-item-object-data-field-1-color: var(--si-sys-color-text-secondary)}:host-context(.tree-sm){--si-tree-view-item-min-height: 32px;--si-tree-view-padding-base-vertical: 0px}:host-context(.tree-xs){--si-tree-view-item-min-height: 24px;--si-tree-view-padding-base-vertical: 0px}:host{display:flex;flex-direction:column;background-color:var(--si-tree-view-background)}.si-tree-view-header{padding:calc(var(--si-tree-view-padding-base-horizontal) / 2);border-block-end:1px solid var(--si-tree-view-border-color)}.si-tree-view-header>*{align-self:center}.si-tree-view-header-btn{cursor:pointer;margin-inline-end:calc(var(--si-tree-view-padding-base-horizontal) / 2);font-size:var(--si-tree-view-icon-size)}.si-tree-view-header-root{margin-inline-end:0}.si-tree-view{overflow:auto;flex:1 0 0;min-block-size:0}.si-tree-view.si-tree-horizontal-scroll{display:flex;flex-wrap:wrap;align-content:flex-start}.si-tree-view-root-ul{list-style:none;padding:0;margin:0;flex:1 1 auto}::ng-deep .si-tree-view-top-level-item{margin-block-start:var(--si-sys-sizing-spacing-y-40)}.si-tree-expand-collapse ::ng-deep .si-tree-view-top-level-item:first-child{margin-block-start:0}@supports (-webkit-touch-callout: none){.si-tree-horizontal-scroll{transform:translateZ(0)}}\n"] }]
         }], propDecorators: { contextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuItems", required: false }] }], childrenIndentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenIndentation", required: false }] }], horizontalScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalScrolling", required: false }] }], compactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMode", required: false }] }], expandCollapseAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandCollapseAll", required: false }] }], expandAllTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAllTooltip", required: false }] }], collapseAllTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseAllTooltip", required: false }] }], icons: [{ type: i0.Input, args: [{ isSignal: true, alias: "icons", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pagesVirtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagesVirtualized", required: false }] }], folderStateStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "folderStateStart", required: false }] }], isVirtualized: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVirtualized", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], singleSelectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleSelectMode", required: false }] }], enableDataField1: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataField1", required: false }] }], enableDataField2: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDataField2", required: false }] }], enableStateIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableStateIndicator", required: false }] }], enableIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableIcon", required: false }] }], enableContextMenuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableContextMenuButton", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], deleteChildrenOnCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteChildrenOnCollapse", required: false }] }], flatTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "flatTree", required: false }] }], groupedList: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupedList", required: false }] }], enableCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCheckbox", required: false }] }], enableOptionbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableOptionbox", required: false }] }], expandOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnClick", required: false }] }], inheritChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "inheritChecked", required: false }] }], noActionsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "noActionsString", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], itemsVirtualizedChanged: [{ type: i0.Output, args: ["itemsVirtualizedChanged"] }], treeItemFolderClicked: [{ type: i0.Output, args: ["treeItemFolderClicked"] }], treeItemFolderStateChanged: [{ type: i0.Output, args: ["treeItemFolderStateChanged"] }], treeItemClicked: [{ type: i0.Output, args: ["treeItemClicked"] }], treeItemCheckboxClicked: [{ type: i0.Output, args: ["treeItemCheckboxClicked"] }], loadChildren: [{ type: i0.Output, args: ["loadChildren"] }], treeItemsSelected: [{ type: i0.Output, args: ["treeItemsSelected"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTreeViewItemTemplateDirective), { isSignal: true }] }], children: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiTreeViewItemComponent), { isSignal: true }] }], treeItemContentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiTreeViewItemDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], nextItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiTreeViewItemComponent), { ...{ descendants: true }, isSignal: true }] }], treeViewInnerElement: [{ type: i0.ViewChild, args: ['treeViewInner', { isSignal: true }] }] } });