@siemens/element-ng 49.7.0 → 49.9.0

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

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, signal, computed, viewChild, effect, HostBinding, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, contentChildren, INJECTOR, viewChildren, contentChild, NgModule } from '@angular/core';
+import { input, inject, TemplateRef, Directive, InjectionToken, Injectable, ElementRef, ChangeDetectorRef, DestroyRef, signal, computed, viewChild, effect, HostBinding, Component, EventEmitter, ViewContainerRef, IterableDiffers, Injector, booleanAttribute, output, contentChildren, INJECTOR, viewChildren, contentChild, NgModule } from '@angular/core';
 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 { SiLoadingSpinnerComponent } from '@siemens/element-ng/loading-spinner';
@@ -463,6 +464,7 @@ class SiTreeViewItemComponent {
     element = inject(ElementRef);
     siTreeViewService = inject(SiTreeViewService);
     cdRef = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
     treeItemContext = inject(TREE_ITEM_CONTEXT);
     treeViewComponent = this.treeItemContext.parent;
     /** @internal */
@@ -480,7 +482,6 @@ class SiTreeViewItemComponent {
     stickyEndItems = this.treeViewComponent.horizontalScrolling;
     icons = this.treeViewComponent.computedIcons;
     savedElement;
-    subscriptions = [];
     indentLevel = this.treeItem.level ?? 0;
     nextSiblingElement;
     menuTrigger = viewChild(CdkMenuTrigger, ...(ngDevMode ? [{ debugName: "menuTrigger" }] : []));
@@ -509,9 +510,15 @@ class SiTreeViewItemComponent {
         this.updateContextMenuItem();
     }
     ngOnInit() {
-        this.subscriptions.push(this.scrollIntoView.subscribe(event => this.onScrollIntoViewByConsumer(event)));
-        this.subscriptions.push(this.childrenLoaded.subscribe(event => this.childrenLoadingDone(event)));
-        this.subscriptions.push(this.siTreeViewService.triggerMarkForCheck.subscribe(() => this.cdRef.markForCheck()));
+        this.scrollIntoView
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onScrollIntoViewByConsumer(event));
+        this.childrenLoaded
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.childrenLoadingDone(event));
+        this.siTreeViewService.triggerMarkForCheck
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.cdRef.markForCheck());
     }
     ngDoCheck() {
         if (this.treeItem.parent?.children && this.ariaPosinset) {
@@ -533,11 +540,6 @@ class SiTreeViewItemComponent {
         }
         this.nextSiblingElement = this.element.nativeElement?.nextElementSibling;
     }
-    ngOnDestroy() {
-        this.subscriptions
-            .filter(subscription => !!subscription)
-            .forEach(subscription => subscription.unsubscribe());
-    }
     enableSelection = this.treeViewComponent.enableSelection;
     enableContextMenuButton = this.treeViewComponent.enableContextMenuButton;
     enableDataField1 = this.treeViewComponent.enableDataField1;
@@ -832,7 +834,7 @@ class SiTreeViewItemComponent {
             !this.treeViewComponent.flatTree());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTreeViewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: '-' + biggerPaddingStart,\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' }\"\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(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 1.25rem;--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)}: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-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:4px}.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-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", "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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: '-' + biggerPaddingStart,\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' }\"\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(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 1.25rem;--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)}: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-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:4px}.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(--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-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", "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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTreeViewItemComponent, decorators: [{
             type: Component,
@@ -853,7 +855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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: '-' + biggerPaddingStart,\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' }\"\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(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 1.25rem;--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)}: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-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:4px}.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-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        <ng-container\n          [ngTemplateOutlet]=\"toggleTemplate\"\n          [ngTemplateOutletContext]=\"{\n            biggerPaddingStart: '-' + biggerPaddingStart,\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' }\"\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(--element-base-1);--si-tree-view-border-color: var(--element-ui-4);--si-tree-view-icon-size: 1.25rem;--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)}: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-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:4px}.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(--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-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"] }]
         }], ctorParameters: () => [], propDecorators: { menuTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkMenuTrigger), { isSignal: true }] }], ariaLevel: [{
                 type: HostBinding,
                 args: ['attr.aria-level']
@@ -1910,7 +1912,6 @@ class SiTreeViewComponent {
     manuallySelectedTreeItems = false;
     latestFolderChanged;
     breadCrumbTreeItems = [];
-    subscriptions = [];
     multiSelectionStart;
     _multiSelectionActive = false;
     domChangeObserver;
@@ -1923,6 +1924,7 @@ class SiTreeViewComponent {
     cdRef = inject(ChangeDetectorRef);
     resizeObserver = inject(ResizeObserverService);
     injector = inject(INJECTOR);
+    destroyRef = inject(DestroyRef);
     /**
      * Create a virtual root node so there is just a single root node. This makes sure the tree
      * can be fully traversed starting from any node. This is needed e.g. for recursively
@@ -2040,32 +2042,52 @@ class SiTreeViewComponent {
         this.scroll$ = defer(() => fromEvent(this.treeViewInnerElement().nativeElement, 'scroll'));
         this.siTreeViewService.scroll$ = this.scroll$;
         if (this.isVirtualized()) {
-            this.subscriptions.push(this.scroll$.subscribe(event => this.onScroll(event)));
-        }
-        this.subscriptions.push(this.siTreeViewService.clickEvent.subscribe(event => this.onItemClicked(event)));
-        this.subscriptions.push(this.siTreeViewService.folderClickEvent.subscribe(event => this.onItemFolderClicked(event)));
-        this.subscriptions.push(this.siTreeViewService.checkboxClickEvent.subscribe(event => this.onItemCheckboxClicked(event)));
-        this.subscriptions.push(this.siTreeViewService.loadChildrenEvent.subscribe(event => this.onLoadChildren(event)));
-        this.subscriptions.push(this.siTreeViewService.scrollIntoViewEvent.subscribe(event => this.onScrollIntoView(event)));
-        this.subscriptions.push(this.siTreeViewService.focusParentEvent.subscribe(event => {
+            this.scroll$
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => this.onScroll(event));
+        }
+        this.siTreeViewService.clickEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onItemClicked(event));
+        this.siTreeViewService.folderClickEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onItemFolderClicked(event));
+        this.siTreeViewService.checkboxClickEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onItemCheckboxClicked(event));
+        this.siTreeViewService.loadChildrenEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onLoadChildren(event));
+        this.siTreeViewService.scrollIntoViewEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.onScrollIntoView(event));
+        this.siTreeViewService.focusParentEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
             if (!this.flatTree()) {
                 this.focusParentItem(event);
                 return;
             }
             this.onFlatTreeNavigateUp();
-        }));
-        this.subscriptions.push(this.siTreeViewService.focusFirstChildEvent.subscribe(event => this.focusFirstChildItem(event)));
-        this.subscriptions.push(this.siTreeViewVirtualizationService.itemsVirtualizedChanged.subscribe((event) => {
+        });
+        this.siTreeViewService.focusFirstChildEvent
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => this.focusFirstChildItem(event));
+        this.siTreeViewVirtualizationService.itemsVirtualizedChanged
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
             this.itemsVirtualizedChanged.emit(event);
             this.evaluateForTreeItemsDiffer.next();
             this.cdRef.markForCheck();
-        }));
+        });
         this.initialized = true;
         this.handleTreeMode();
     }
     ngAfterViewInit() {
         this.addClassObserver();
-        this.subscriptions.push(this.monitorTreeSizeChanges().subscribe(d => this.updatePageSize(d)));
+        this.monitorTreeSizeChanges()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(d => this.updatePageSize(d));
         this.keyManager = new FocusKeyManager(this.getChildren(), this.injector)
             .withWrap()
             .withAllowedModifierKeys(['shiftKey'])
@@ -2118,9 +2140,9 @@ class SiTreeViewComponent {
         }
     }
     ngOnDestroy() {
-        this.subscriptions
-            .filter(subscription => !!subscription)
-            .forEach(subscription => subscription.unsubscribe());
+        this.scrollChildIntoView.complete();
+        this.childrenLoaded.complete();
+        this.evaluateForTreeItemsDiffer.complete();
         this.domChangeObserver?.disconnect();
     }
     /**
@@ -2429,7 +2451,7 @@ class SiTreeViewComponent {
         this.siTreeViewService.triggerMarkForCheck.next();
     }
     emitSelectedItems() {
-        if (this.enableSelection()) {
+        if (!this.destroyRef.destroyed && this.enableSelection()) {
             if (this.siTreeViewService.groupedList) {
                 const filtered = this.selectedTreeItems.filter(item => !this.siTreeViewService.isGroupedItem(item));
                 this.treeItemsSelected.emit(filtered);