@siemens/element-ng 49.9.0 → 49.11.0

package/fesm2022/siemens-element-ng-select.mjs

@@ -401,7 +401,7 @@ class SiSelectListHasFilterComponent extends SiSelectListBase {
         this.closeOverlayIfSingle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
             type: Component,
@@ -418,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'pt-0',
                         '[attr.id]': 'id()'
-                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"] }]
+                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control icon-start border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vb - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.25rem}.icon-start{padding-inline-start:calc(1.25rem + 12px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: true }] }], noResultsFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsFoundLabel", required: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-side-panel.mjs

@@ -446,7 +446,7 @@ class SiSidePanelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableBackdrop: { classPropertyName: "disableBackdrop", publicName: "disableBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-size--extended": "this.size() === \"extended\"", "class.rpanel-mode--over": "isOverMode()", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-fullscreen-overlay": "isFullscreenOverlay()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()", "class.rpanel-resize-xxl": "isXxl()", "class.rpanel-resize-xxxl": "isXxxl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vw}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vw}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vw}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiSidePanelComponent, isStandalone: true, selector: "si-side-panel", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, toggleItemLabel: { classPropertyName: "toggleItemLabel", publicName: "toggleItemLabel", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableBackdrop: { classPropertyName: "disableBackdrop", publicName: "disableBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", closed: "closed", contentResize: "contentResize" }, host: { properties: { "class.enable-mobile": "enableMobile()", "class.rpanel-size--regular": "this.size() === \"regular\"", "class.rpanel-size--wide": "this.size() === \"wide\"", "class.rpanel-size--extended": "this.size() === \"extended\"", "class.rpanel-mode--over": "isOverMode()", "class.rpanel-mode--scroll": "isScrollMode()", "class.rpanel-collapsed": "isCollapsed()", "class.ready": "ready()", "class.collapsible": "collapsible() && !this.showTempContent()", "class.collapsible-temp": "collapsible() && this.showTempContent()", "class.rpanel-hidden": "isHidden()", "class.rpanel-fullscreen-overlay": "isFullscreenOverlay()", "class.rpanel-resize-xs": "isXs()", "class.rpanel-resize-sm": "isSm()", "class.rpanel-resize-md": "isMd()", "class.rpanel-resize-lg": "isLg()", "class.rpanel-resize-xl": "isXl()", "class.rpanel-resize-xxl": "isXxl()", "class.rpanel-resize-xxxl": "isXxxl()" }, classAttribute: "si-layout-inner" }, viewQueries: [{ propertyName: "panelElement", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "contentElement", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "portalOutlet", first: true, predicate: ["portalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }, { propertyName: "tmpPortalOutlet", first: true, predicate: ["tmpPortalOutlet"], descendants: true, read: CdkPortalOutlet, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiSidePanelComponent, decorators: [{
             type: Component,
@@ -471,7 +471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.rpanel-resize-xl]': 'isXl()',
                         '[class.rpanel-resize-xxl]': 'isXxl()',
                         '[class.rpanel-resize-xxxl]': 'isXxxl()'
-                    }, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vw}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vw}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vw}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"] }]
+                    }, template: "@if (showBackdrop()) {\n  <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleSidePanel()\"></div>\n}\n<div #sidePanel class=\"side-panel focus-none\" tabindex=\"-1\">\n  <div class=\"inner\" [class.d-none]=\"showTempContent()\">\n    <ng-content select=\"si-side-panel-content, element-side-panel-content\" />\n    <ng-container #portalOutlet cdkPortalOutlet />\n  </div>\n  <div class=\"inner\" [class.d-none]=\"!showTempContent()\">\n    <ng-container #tmpPortalOutlet cdkPortalOutlet />\n  </div>\n</div>\n<div #content class=\"main-content si-layout-inner\">\n  <ng-content />\n</div>\n", styles: [":host{--rpanel-collapsed-padding: 0;--rpanel-size: 390px;display:block;padding-inline-end:var(--rpanel-size)}:host.ready{transition:padding-inline-end calc(.5s * var(--element-animations-enabled, 1))}:host.ready .side-panel,:host.ready .side-panel>.inner{transition:inline-size calc(.5s * var(--element-animations-enabled, 1)),box-shadow calc(.5s * var(--element-animations-enabled, 1))}:host .modal-backdrop{opacity:1;transition:opacity .15s linear;z-index:1029}@starting-style{:host .modal-backdrop{opacity:0}}:host .modal-backdrop.backdrop-leave{opacity:0;transition:opacity .15s linear}:host .side-panel,:host .side-panel>.inner{inline-size:var(--rpanel-width-fullscreen, var(--rpanel-size))}:host.collapsible,:host.collapsible-temp{--rpanel-collapsed-width: calc(1.5rem + 24px) }:host.rpanel-size--wide{--rpanel-size: 500px}:host.rpanel-size--extended{--rpanel-size: 100vi}:host.rpanel-fullscreen-overlay{--rpanel-width-fullscreen: 100vi}:host.rpanel-mode--over{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-mode--over:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-md.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-lg.rpanel-size--extended{--rpanel-size: 480px}:host.rpanel-resize-xl.rpanel-size--extended{--rpanel-size: 640px}:host.rpanel-resize-xxl.rpanel-size--extended{--rpanel-size: 720px}:host.rpanel-resize-xxxl.rpanel-size--extended{--rpanel-size: 912px}:host.rpanel-resize-sm.rpanel-size--extended{--fullscreen-button-display: none}:host.rpanel-resize-xs{--fullscreen-button-display: none;padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-resize-xs .side-panel{z-index:1031}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel{box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2)}:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel,:host.rpanel-resize-xs:not(.rpanel-collapsed) .side-panel>.inner{inline-size:100vi}:host.rpanel-hidden:not(.collapsible) .side-panel{display:none}:host.rpanel-collapsed{padding-inline-end:var(--rpanel-collapsed-width)}:host.rpanel-collapsed:not(.collapsible) .side-panel{inline-size:0;overflow:hidden}:host.rpanel-collapsed.collapsible .side-panel{inline-size:var(--rpanel-collapsed-width);overflow:hidden}.side-panel{position:fixed;z-index:1029;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-end:0;overflow-x:hidden;background:var(--element-base-1)}.side-panel>.inner{display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-start:0}@media(max-width:575.98px){:host.enable-mobile{padding-inline-end:0!important;--si-layout-header-first-element-offset-end: 40px}:host.enable-mobile.rpanel-collapsed .side-panel{inline-size:0!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], toggleItemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleItemLabel", required: false }] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdrop", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], contentResize: [{ type: i0.Output, args: ["contentResize"] }], panelElement: [{ type: i0.ViewChild, args: ['sidePanel', { isSignal: true }] }], contentElement: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: ['portalOutlet', { ...{
                             read: CdkPortalOutlet
                         }, isSignal: true }] }], tmpPortalOutlet: [{ type: i0.ViewChild, args: ['tmpPortalOutlet', { ...{

package/fesm2022/siemens-element-ng-toast-notification.mjs

@@ -51,11 +51,11 @@ class SiToastNotificationComponent {
         this.toast().close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiToastNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiToastNotificationComponent, isStandalone: true, selector: "si-toast-notification", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { paused: "paused", resumed: "resumed" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "@let toastValue = toast();\n@let autoClose = !toastValue.disableAutoClose;\n@let manualClose = !toastValue.disableManualClose;\n<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"autoClose\">\n  @if (autoClose) {\n    <div\n      class=\"si-toast-timer-bar\"\n      [style.--play-state]=\"animationMode()\"\n      [style.--toast-timer-duration.s]=\"toastTimeoutInSeconds()\"\n    ></div>\n  }\n  <div [class]=\"`bar ${statusColor()}`\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toastValue.title | translate: toastValue.translationParams }}</b></p\n    >\n    @if (toastValue.message) {\n      <p class=\"mt-4\">{{ toastValue.message | translate: toastValue.translationParams }}</p>\n    }\n    @if (toastValue.action) {\n      <p [class.mt-3]=\"toastValue.message\" [class.mt-4]=\"!toastValue.message\">\n        <a [siLink]=\"toastValue.action\">{{\n          toastValue.action!.title | translate: toastValue.translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (manualClose) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-tertiary-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel() | translate\"\n      (click)=\"close()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vw - 40px)}@media(min-width:768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}@keyframes si-toast-auto-close-animation{0%{inline-size:100%}to{inline-size:0}}.si-toast-timer-bar{animation:si-toast-auto-close-animation var(--toast-timer-duration, 4s) linear forwards;animation-play-state:var(--play-state, running);background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiToastNotificationComponent, isStandalone: true, selector: "si-toast-notification", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { paused: "paused", resumed: "resumed" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "@let toastValue = toast();\n@let autoClose = !toastValue.disableAutoClose;\n@let manualClose = !toastValue.disableManualClose;\n<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"autoClose\">\n  @if (autoClose) {\n    <div\n      class=\"si-toast-timer-bar\"\n      [style.--play-state]=\"animationMode()\"\n      [style.--toast-timer-duration.s]=\"toastTimeoutInSeconds()\"\n    ></div>\n  }\n  <div [class]=\"`bar ${statusColor()}`\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toastValue.title | translate: toastValue.translationParams }}</b></p\n    >\n    @if (toastValue.message) {\n      <p class=\"mt-4\">{{ toastValue.message | translate: toastValue.translationParams }}</p>\n    }\n    @if (toastValue.action) {\n      <p [class.mt-3]=\"toastValue.message\" [class.mt-4]=\"!toastValue.message\">\n        <a [siLink]=\"toastValue.action\">{{\n          toastValue.action!.title | translate: toastValue.translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (manualClose) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-tertiary-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel() | translate\"\n      (click)=\"close()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vi - 40px)}@media(min-width:768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}@keyframes si-toast-auto-close-animation{0%{inline-size:100%}to{inline-size:0}}.si-toast-timer-bar{animation:si-toast-auto-close-animation var(--toast-timer-duration, 4s) linear forwards;animation-play-state:var(--play-state, running);background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: SiLinkModule }, { kind: "directive", type: i1.SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiToastNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-toast-notification', imports: [SiLinkModule, SiIconComponent, SiStatusIconComponent, SiTranslatePipe], template: "@let toastValue = toast();\n@let autoClose = !toastValue.disableAutoClose;\n@let manualClose = !toastValue.disableManualClose;\n<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"autoClose\">\n  @if (autoClose) {\n    <div\n      class=\"si-toast-timer-bar\"\n      [style.--play-state]=\"animationMode()\"\n      [style.--toast-timer-duration.s]=\"toastTimeoutInSeconds()\"\n    ></div>\n  }\n  <div [class]=\"`bar ${statusColor()}`\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toastValue.title | translate: toastValue.translationParams }}</b></p\n    >\n    @if (toastValue.message) {\n      <p class=\"mt-4\">{{ toastValue.message | translate: toastValue.translationParams }}</p>\n    }\n    @if (toastValue.action) {\n      <p [class.mt-3]=\"toastValue.message\" [class.mt-4]=\"!toastValue.message\">\n        <a [siLink]=\"toastValue.action\">{{\n          toastValue.action!.title | translate: toastValue.translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (manualClose) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-tertiary-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel() | translate\"\n      (click)=\"close()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vw - 40px)}@media(min-width:768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}@keyframes si-toast-auto-close-animation{0%{inline-size:100%}to{inline-size:0}}.si-toast-timer-bar{animation:si-toast-auto-close-animation var(--toast-timer-duration, 4s) linear forwards;animation-play-state:var(--play-state, running);background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.25rem}\n"] }]
+            args: [{ selector: 'si-toast-notification', imports: [SiLinkModule, SiIconComponent, SiStatusIconComponent, SiTranslatePipe], template: "@let toastValue = toast();\n@let autoClose = !toastValue.disableAutoClose;\n@let manualClose = !toastValue.disableManualClose;\n<div class=\"si-toast elevation-2\" [class.si-toast-auto-close]=\"autoClose\">\n  @if (autoClose) {\n    <div\n      class=\"si-toast-timer-bar\"\n      [style.--play-state]=\"animationMode()\"\n      [style.--toast-timer-duration.s]=\"toastTimeoutInSeconds()\"\n    ></div>\n  }\n  <div [class]=\"`bar ${statusColor()}`\"></div>\n  <si-status-icon class=\"icon\" [status]=\"status()\" />\n\n  <div class=\"toast-content px-4\">\n    <p class=\"toast-title\"\n      ><b>{{ toastValue.title | translate: toastValue.translationParams }}</b></p\n    >\n    @if (toastValue.message) {\n      <p class=\"mt-4\">{{ toastValue.message | translate: toastValue.translationParams }}</p>\n    }\n    @if (toastValue.action) {\n      <p [class.mt-3]=\"toastValue.message\" [class.mt-4]=\"!toastValue.message\">\n        <a [siLink]=\"toastValue.action\">{{\n          toastValue.action!.title | translate: toastValue.translationParams\n        }}</a>\n      </p>\n    }\n  </div>\n  @if (manualClose) {\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-tertiary-ghost mt-n2 me-n2\"\n      [attr.aria-label]=\"closeAriaLabel() | translate\"\n      (click)=\"close()\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [".si-toast-timer-bar,.si-toast.si-toast-auto-close:before{position:absolute;inset-block-end:0;inset-inline-start:0;block-size:2px}:host{display:block}.si-toast{block-size:auto;position:relative;display:flex;align-items:flex-start;color:var(--element-text-primary);background:var(--element-base-3);border-radius:var(--element-radius-2);padding-inline:12px 8px;padding-block:8px;margin-block-end:20px;font-size:1rem;pointer-events:all;overflow:hidden;min-inline-size:250px;max-inline-size:calc(100vi - 40px)}@media(min-width:768px){.si-toast{max-inline-size:400px}}.si-toast.si-toast-auto-close{padding-block-end:10px}.si-toast.si-toast-auto-close:before{content:\"\";background:var(--element-ui-4);inset-inline-end:0}.bar{inset-block-start:0;inset-inline-start:0;position:absolute;inline-size:4px;block-size:100%;background:currentColor}@keyframes si-toast-auto-close-animation{0%{inline-size:100%}to{inline-size:0}}.si-toast-timer-bar{animation:si-toast-auto-close-animation var(--toast-timer-duration, 4s) linear forwards;animation-play-state:var(--play-state, running);background-color:var(--element-ui-0)}.toast-content{flex:1;overflow:hidden;white-space:nowrap}.toast-content p{margin-block:0;line-height:1.125rem;white-space:pre-line;overflow-wrap:break-word;word-wrap:break-word}.toast-content .toast-title{line-height:1.25rem}\n"] }]
         }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], paused: [{ type: i0.Output, args: ["paused"] }], resumed: [{ type: i0.Output, args: ["resumed"] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']

package/fesm2022/siemens-element-ng-tour.mjs

@@ -122,13 +122,13 @@ class SiTourComponent {
         setTimeout(() => this.arrowPos.set(calculateOverlayArrowPosition(update.change, this.elementRef, update.anchor)));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTourComponent, isStandalone: true, selector: "si-tour", host: { listeners: { "window:keydown": "keyListener($event)" }, properties: { "attr.data-step-id": "step()?.step?.id" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: ["focusTrap"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vw;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiTourComponent, isStandalone: true, selector: "si-tour", host: { listeners: { "window:keydown": "keyListener($event)" }, properties: { "attr.data-step-id": "step()?.step?.id" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: ["focusTrap"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vi;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTourComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-tour', imports: [A11yModule, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-step-id]': 'step()?.step?.id'
-                    }, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vw;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"] }]
+                    }, template: "<div class=\"backdrop\"></div>\n<div\n  #focusTrap=\"cdkTrapFocus\"\n  role=\"dialog\"\n  aria-labelledby=\"__si-tour-step-title\"\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  [class]=\"['tour-content', 'popover', 'position-relative', positionClass()]\"\n  [class.show]=\"show()\"\n>\n  @if (arrowPos()) {\n    <div\n      class=\"popover-arrow\"\n      [style.left.px]=\"arrowPos()?.left\"\n      [style.right.px]=\"arrowPos()?.right\"\n    ></div>\n  }\n  @if (step()) {\n    @let tourStep = step()!;\n    <div class=\"d-flex\">\n      <div class=\"p-6 flex-fill\">\n        <div class=\"pb-2 si-body text-secondary\">\n          {{ progressText | translate: { step: tourStep.stepNumber, total: tourStep.totalSteps } }}\n        </div>\n        <div id=\"__si-tour-step-title\" class=\"si-h4 mb-0\">\n          {{ tourStep.step.title | translate }}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        class=\"btn btn-circle btn-tertiary-ghost mt-4 me-5\"\n        [attr.aria-label]=\"ariaLabelClose | translate\"\n        (click)=\"action('cancel')\"\n      >\n        <si-icon [icon]=\"icons.elementCancel\" />\n      </button>\n    </div>\n    <div class=\"step-text si-body px-6 pb-8\">\n      {{ tourStep.step.text | translate }}\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center p-6 gap-6\">\n      @if (tourStep.stepNumber !== 1) {\n        <button\n          type=\"button\"\n          class=\"btn btn-secondary\"\n          [disabled]=\"tourToken.blocked()\"\n          (click)=\"action('back')\"\n        >\n          {{ backText | translate }}\n        </button>\n      } @else {\n        <button type=\"button\" class=\"btn btn-tertiary\" (click)=\"action('cancel')\">\n          {{ skipText | translate }}\n        </button>\n      }\n      <button\n        type=\"button\"\n        class=\"btn btn-primary\"\n        cdkFocusInitial\n        [disabled]=\"tourToken.blocked()\"\n        (click)=\"action(tourStep.stepNumber !== tourStep.totalSteps ? 'next' : 'complete')\"\n      >\n        @if (tourStep.stepNumber !== tourStep.totalSteps) {\n          {{ nextText | translate }}\n        } @else {\n          {{ doneText | translate }}\n        }\n      </button>\n    </div>\n  }\n</div>\n", styles: [".tour-content{--popover-arrow-width: 24px;--popover-arrow-height: 12px;--popover-bg-color: var(--element-base-1);max-inline-size:400px;inline-size:100vi;opacity:0}.tour-content.show{opacity:1}.backdrop{position:fixed;inset:-200vmax}::ng-deep .cdk-overlay-connected-position-bounding-box:has(si-tour),::ng-deep .cdk-global-overlay-wrapper:has(si-tour){z-index:2000}\n"] }]
         }], ctorParameters: () => [], propDecorators: { focusTrap: [{ type: i0.ViewChild, args: ['focusTrap', { isSignal: true }] }], keyListener: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]

package/fesm2022/siemens-element-ng-translate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-translate.mjs","sources":["../../../../projects/element-ng/translate/si-translatable-keys.interface.ts","../../../../projects/element-ng/translate/si-translatable-overrides.provider.ts","../../../../projects/element-ng/translate/index.ts","../../../../projects/element-ng/translate/siemens-element-ng-translate.ts"],"sourcesContent":["/* eslint-disable */\n\n// Auto-generated file. Run 'npx update-translatable-keys' to update.\n\nexport interface SiTranslatableKeys {\n  'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;\n  'SI_ALERT_DIALOG.OK'?: string;\n  'SI_APPLICATION_HEADER.LAUNCHPAD'?: string;\n  'SI_APPLICATION_HEADER.TOGGLE_ACTIONS'?: string;\n  'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string;\n  'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string;\n  'SI_BREADCRUMB'?: string;\n  'SI_BREADCRUMB_ROUTER_LABEL'?: string;\n  'SI_CHANGE_PASSWORD.BACK'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.CONFIRM_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.NEW_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.PASSWORD_POLICY'?: string;\n  'SI_CHAT_INPUT.ATTACH_FILE'?: string;\n  'SI_CHAT_INPUT.INTERRUPT'?: string;\n  'SI_CHAT_INPUT.LABEL'?: string;\n  'SI_CHAT_INPUT.PLACEHOLDER'?: string;\n  'SI_CHAT_INPUT.SECONDARY_ACTIONS'?: string;\n  'SI_CHAT_INPUT.SEND'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.CANCEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.HIDDEN'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.SUBMIT'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.VISIBLE'?: string;\n  'SI_CONFIRMATION_DIALOG.NO'?: string;\n  'SI_CONFIRMATION_DIALOG.YES'?: string;\n  'SI_CONTENT_ACTION_BAR.TOGGLE'?: string;\n  'SI_DASHBOARD.EXPAND'?: string;\n  'SI_DASHBOARD.EXPAND_WIDGET_ACTIONS'?: string;\n  'SI_DASHBOARD.RESTORE'?: string;\n  'SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON'?: string;\n  'SI_DATEPICKER.CALENDAR_WEEK_LABEL'?: string;\n  'SI_DATEPICKER.DISABLED_TIME_TEXT'?: string;\n  'SI_DATEPICKER.ENABLED_TIME_TEXT'?: string;\n  'SI_DATEPICKER.END_DATE_PLACEHOLDER'?: string;\n  'SI_DATEPICKER.END_TIME_LABEL'?: string;\n  'SI_DATEPICKER.HOURS'?: string;\n  'SI_DATEPICKER.MILLISECONDS'?: string;\n  'SI_DATEPICKER.MINUTES'?: string;\n  'SI_DATEPICKER.NEXT'?: string;\n  'SI_DATEPICKER.PERIOD'?: string;\n  'SI_DATEPICKER.PREVIOUS'?: string;\n  'SI_DATEPICKER.SECONDS'?: string;\n  'SI_DATEPICKER.START_DATE_PLACEHOLDER'?: string;\n  'SI_DATEPICKER.START_TIME_LABEL'?: string;\n  'SI_DATEPICKER.TODAY'?: string;\n  'SI_DATE_RANGE_FILTER.ADVANCED'?: string;\n  'SI_DATE_RANGE_FILTER.AFTER'?: string;\n  'SI_DATE_RANGE_FILTER.APPLY'?: string;\n  'SI_DATE_RANGE_FILTER.BEFORE'?: string;\n  'SI_DATE_RANGE_FILTER.DATE'?: string;\n  'SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER'?: string;\n  'SI_DATE_RANGE_FILTER.DAYS'?: string;\n  'SI_DATE_RANGE_FILTER.FROM'?: string;\n  'SI_DATE_RANGE_FILTER.HOURS'?: string;\n  'SI_DATE_RANGE_FILTER.MINUTES'?: string;\n  'SI_DATE_RANGE_FILTER.MONTHS'?: string;\n  'SI_DATE_RANGE_FILTER.NOW'?: string;\n  'SI_DATE_RANGE_FILTER.PRESETS'?: string;\n  'SI_DATE_RANGE_FILTER.PREVIEW'?: string;\n  'SI_DATE_RANGE_FILTER.RANGE'?: string;\n  'SI_DATE_RANGE_FILTER.REF_POINT'?: string;\n  'SI_DATE_RANGE_FILTER.SEARCH'?: string;\n  'SI_DATE_RANGE_FILTER.SELECT_RANGE_END'?: string;\n  'SI_DATE_RANGE_FILTER.TO'?: string;\n  'SI_DATE_RANGE_FILTER.TODAY'?: string;\n  'SI_DATE_RANGE_FILTER.UNIT'?: string;\n  'SI_DATE_RANGE_FILTER.VALUE'?: string;\n  'SI_DATE_RANGE_FILTER.WEEKS'?: string;\n  'SI_DATE_RANGE_FILTER.WITHIN'?: string;\n  'SI_DATE_RANGE_FILTER.YEARS'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.CANCEL_BTN'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.DELETE_BTN'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.CANCEL_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISABLE_SAVE_DISCARD_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISABLE_SAVE_MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISCARD_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.SAVE_BTN'?: string;\n  'SI_ELECTRON_TITLEBAR.BACK'?: string;\n  'SI_ELECTRON_TITLEBAR.FORWARD'?: string;\n  'SI_ELECTRON_TITLEBAR.MENU'?: string;\n  'SI_EXPLICIT_LEGAL_ACKNOWLEDGE.ACCEPT'?: string;\n  'SI_EXPLICIT_LEGAL_ACKNOWLEDGE.BACK'?: string;\n  'SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES'?: string;\n  'SI_FILE_UPLOADER.CANCEL'?: string;\n  'SI_FILE_UPLOADER.CLEAR'?: string;\n  'SI_FILE_UPLOADER.DROP'?: string;\n  'SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED'?: string;\n  'SI_FILE_UPLOADER.ERROR_FILE_TYPE'?: string;\n  'SI_FILE_UPLOADER.FILE_SELECT'?: string;\n  'SI_FILE_UPLOADER.MAX_FILE_REACHED'?: string;\n  'SI_FILE_UPLOADER.MAX_SIZE'?: string;\n  'SI_FILE_UPLOADER.REMOVE'?: string;\n  'SI_FILE_UPLOADER.UPLOAD'?: string;\n  'SI_FILE_UPLOADER.UPLOADING'?: string;\n  'SI_FILE_UPLOADER.UPLOAD_COMPLETED'?: string;\n  'SI_FILE_UPLOADER.UPLOAD_FAILED'?: string;\n  'SI_FILTERED_SEARCH.CLEAR'?: string;\n  'SI_FILTERED_SEARCH.ITEM_COUNT'?: string;\n  'SI_FILTERED_SEARCH.SEARCH'?: string;\n  'SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT'?: string;\n  'SI_FILTERED_SEARCH.SUBMIT_BUTTON'?: string;\n  'SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION'?: string;\n  'SI_FILTER_BAR.NO_FILTERS'?: string;\n  'SI_FILTER_BAR.RESET_FILTERS'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT_END'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT_START'?: string;\n  'SI_FORM_CONTAINER.ERROR.EMAIL'?: string;\n  'SI_FORM_CONTAINER.ERROR.END_BEFORE_START'?: string;\n  'SI_FORM_CONTAINER.ERROR.HOURS'?: string;\n  'SI_FORM_CONTAINER.ERROR.INVALID_PHONE'?: string;\n  'SI_FORM_CONTAINER.ERROR.IPV4'?: string;\n  'SI_FORM_CONTAINER.ERROR.IPV6'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_LENGTH'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_TIME'?: string;\n  'SI_FORM_CONTAINER.ERROR.MILLISECONDS'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN'?: string;\n  'SI_FORM_CONTAINER.ERROR.MINUTES'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_LENGTH'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_TIME'?: string;\n  'SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT'?: string;\n  'SI_FORM_CONTAINER.ERROR.PATTERN'?: string;\n  'SI_FORM_CONTAINER.ERROR.PHONE_COUNTRY'?: string;\n  'SI_FORM_CONTAINER.ERROR.RANGE_AFTER_MAX_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.RANGE_BEFORE_MIN_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.REQUIRED'?: string;\n  'SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE'?: string;\n  'SI_FORM_CONTAINER.ERROR.SECONDS'?: string;\n  'SI_ICON_STATUS.CAUTION'?: string;\n  'SI_ICON_STATUS.CRITICAL'?: string;\n  'SI_ICON_STATUS.DANGER'?: string;\n  'SI_ICON_STATUS.INFO'?: string;\n  'SI_ICON_STATUS.PENDING'?: string;\n  'SI_ICON_STATUS.PROGRESS'?: string;\n  'SI_ICON_STATUS.SUCCESS'?: string;\n  'SI_ICON_STATUS.UNKNOWN'?: string;\n  'SI_ICON_STATUS.WARNING'?: string;\n  'SI_LANGUAGE_SWITCHER.LABEL'?: string;\n  'SI_LAUNCHPAD.CLOSE'?: string;\n  'SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE'?: string;\n  'SI_LAUNCHPAD.EXTERNAL_LINK'?: string;\n  'SI_LAUNCHPAD.FAVORITE_APPS'?: string;\n  'SI_LAUNCHPAD.SHOW_LESS'?: string;\n  'SI_LAUNCHPAD.SHOW_MORE'?: string;\n  'SI_LAUNCHPAD.SUB_TITLE'?: string;\n  'SI_LAUNCHPAD.TITLE'?: string;\n  'SI_LIST_DETAILS.BACK'?: string;\n  'SI_LIST_WIDGET.SEARCH_PLACEHOLDER'?: string;\n  'SI_LIST_WIDGET.SORT_ASCENDING'?: string;\n  'SI_LIST_WIDGET.SORT_DESCENDING'?: string;\n  'SI_LOADING_SPINNER.LABEL'?: string;\n  'SI_LOGIN_BASIC.BACK'?: string;\n  'SI_LOGIN_BASIC.FORGOT_PASSWORD'?: string;\n  'SI_LOGIN_BASIC.LOGIN'?: string;\n  'SI_LOGIN_BASIC.NEXT'?: string;\n  'SI_LOGIN_BASIC.PASSWORD'?: string;\n  'SI_LOGIN_BASIC.REGISTER_NOW'?: string;\n  'SI_LOGIN_BASIC.USERNAME'?: string;\n  'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;\n  'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;\n  'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;\n  'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;\n  'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;\n  'SI_NAVBAR_VERTICAL.EXPAND'?: string;\n  'SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER'?: string;\n  'SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL'?: string;\n  'SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL'?: string;\n  'SI_NAVBAR_VERTICAL.TOGGLE'?: string;\n  'SI_PAGINATION.BACK'?: string;\n  'SI_PAGINATION.FORWARD'?: string;\n  'SI_PAGINATION.NAV_LABEL'?: string;\n  'SI_PASSWORD_TOGGLE.HIDE'?: string;\n  'SI_PASSWORD_TOGGLE.SHOW'?: string;\n  'SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL'?: string;\n  'SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND'?: string;\n  'SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER'?: string;\n  'SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY'?: string;\n  'SI_PHOTO_UPLOAD.APPLY_PHOTO'?: string;\n  'SI_PHOTO_UPLOAD.CANCEL'?: string;\n  'SI_PHOTO_UPLOAD.CHANGE_PHOTO'?: string;\n  'SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL'?: string;\n  'SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED'?: string;\n  'SI_PHOTO_UPLOAD.ERROR_FILE_TYPE'?: string;\n  'SI_PHOTO_UPLOAD.MODAL_TITLE'?: string;\n  'SI_PHOTO_UPLOAD.REMOVE'?: string;\n  'SI_PHOTO_UPLOAD.UPLOAD_PHOTO'?: string;\n  'SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL'?: string;\n  'SI_PROGRESSBAR.LABEL'?: string;\n  'SI_SEARCH_BAR.CLEAR_BUTTON'?: string;\n  'SI_SELECT.NO-RESULTS-FOUND'?: string;\n  'SI_SELECT.SEARCH-PLACEHOLDER'?: string;\n  'SI_SIDE_PANEL.CLOSE'?: string;\n  'SI_SIDE_PANEL.ENTER_FULLSCREEN'?: string;\n  'SI_SIDE_PANEL.EXIT_FULLSCREEN'?: string;\n  'SI_SIDE_PANEL.SEARCH_PLACEHOLDER'?: string;\n  'SI_SIDE_PANEL.TOGGLE'?: string;\n  'SI_SKIP_LINKS.JUMP_TO'?: string;\n  'SI_SLIDER.DECREMENT'?: string;\n  'SI_SLIDER.INCREMENT'?: string;\n  'SI_SLIDER.LABEL'?: string;\n  'SI_SORT_BAR.TITLE'?: string;\n  'SI_STATUS_BAR.ALL_OK'?: string;\n  'SI_STATUS_BAR.COLLAPSE'?: string;\n  'SI_STATUS_BAR.EXPAND'?: string;\n  'SI_STATUS_BAR.MUTE'?: string;\n  'SI_THRESHOLD.ADD'?: string;\n  'SI_THRESHOLD.DELETE'?: string;\n  'SI_THRESHOLD.INPUT_LABEL'?: string;\n  'SI_THRESHOLD.STATUS'?: string;\n  'SI_TOAST.CLOSE'?: string;\n  'SI_TOUR.BACK'?: string;\n  'SI_TOUR.CLOSE'?: string;\n  'SI_TOUR.DONE'?: string;\n  'SI_TOUR.NEXT'?: string;\n  'SI_TOUR.PROGRESS'?: string;\n  'SI_TOUR.SKIP'?: string;\n  'SI_TREE_VIEW.COLLAPSE_ALL'?: string;\n  'SI_TREE_VIEW.EXPAND_ALL'?: string;\n  'SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL'?: string;\n  'SI_USER_MESSAGE.SECONDARY_ACTIONS'?: string;\n  'SI_WIZARD.BACK'?: string;\n  'SI_WIZARD.CANCEL'?: string;\n  'SI_WIZARD.COMPLETED'?: string;\n  'SI_WIZARD.NEXT'?: string;\n  'SI_WIZARD.SAVE'?: string;\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\nimport { SI_TRANSLATABLE_VALUES } from '@siemens/element-translate-ng/translate';\n\nimport { SiTranslatableKeys } from './si-translatable-keys.interface';\n\nexport const provideSiTranslatableOverrides: (values: SiTranslatableKeys) => Provider = values => ({\n  useValue: values,\n  multi: true,\n  provide: SI_TRANSLATABLE_VALUES\n});\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-translatable-keys.interface';\nexport * from './si-translatable-overrides.provider';\n// @deprecated use @simpl-labs/element-translate-ng/translate directly\nexport * from '@siemens/element-translate-ng/translate';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;MCSa,8BAA8B,GAA6C,MAAM,KAAK;AACjG,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE;AACV,CAAA;;ACbD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-translate.mjs","sources":["../../../../projects/element-ng/translate/si-translatable-keys.interface.ts","../../../../projects/element-ng/translate/si-translatable-overrides.provider.ts","../../../../projects/element-ng/translate/index.ts","../../../../projects/element-ng/translate/siemens-element-ng-translate.ts"],"sourcesContent":["/* eslint-disable */\n\n// Auto-generated file. Run 'npx update-translatable-keys' to update.\n\nexport interface SiTranslatableKeys {\n  'SI_ABOUT.LOGO_ALT'?: string;\n  'SI_AI_MESSAGE.SECONDARY_ACTIONS'?: string;\n  'SI_ALERT_DIALOG.OK'?: string;\n  'SI_APPLICATION_HEADER.LAUNCHPAD'?: string;\n  'SI_APPLICATION_HEADER.TOGGLE_ACTIONS'?: string;\n  'SI_APPLICATION_HEADER.TOGGLE_NAVIGATION'?: string;\n  'SI_ATTACHMENT_LIST.REMOVE_ATTACHMENT'?: string;\n  'SI_BREADCRUMB'?: string;\n  'SI_BREADCRUMB_ROUTER_LABEL'?: string;\n  'SI_CHANGE_PASSWORD.BACK'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE_FACTORY_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.CHANGE_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.CONFIRM_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.NEW_PASSWORD'?: string;\n  'SI_CHANGE_PASSWORD.PASSWORD_POLICY'?: string;\n  'SI_CHAT_INPUT.ATTACH_FILE'?: string;\n  'SI_CHAT_INPUT.INTERRUPT'?: string;\n  'SI_CHAT_INPUT.LABEL'?: string;\n  'SI_CHAT_INPUT.PLACEHOLDER'?: string;\n  'SI_CHAT_INPUT.SECONDARY_ACTIONS'?: string;\n  'SI_CHAT_INPUT.SEND'?: string;\n  'SI_COLOR_PICKER.SELECTED_LABEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.CANCEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.HIDDEN'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.ITEM_MOVED'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.ITEM_NOT_MOVED'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.LIST_ARIA_LABEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.RENAME_INPUT_ARIA_LABEL'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.RESTORE_TO_DEFAULT'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.SUBMIT'?: string;\n  'SI_COLUMN_SELECTION_DIALOG.VISIBLE'?: string;\n  'SI_CONFIRMATION_DIALOG.NO'?: string;\n  'SI_CONFIRMATION_DIALOG.YES'?: string;\n  'SI_CONTENT_ACTION_BAR.TOGGLE'?: string;\n  'SI_DASHBOARD.EXPAND'?: string;\n  'SI_DASHBOARD.EXPAND_WIDGET_ACTIONS'?: string;\n  'SI_DASHBOARD.RESTORE'?: string;\n  'SI_DATEPICKER.CALENDAR_TOGGLE_BUTTON'?: string;\n  'SI_DATEPICKER.CALENDAR_WEEK_LABEL'?: string;\n  'SI_DATEPICKER.DISABLED_TIME_TEXT'?: string;\n  'SI_DATEPICKER.ENABLED_TIME_TEXT'?: string;\n  'SI_DATEPICKER.END_DATE_PLACEHOLDER'?: string;\n  'SI_DATEPICKER.END_TIME_LABEL'?: string;\n  'SI_DATEPICKER.HOURS'?: string;\n  'SI_DATEPICKER.MILLISECONDS'?: string;\n  'SI_DATEPICKER.MINUTES'?: string;\n  'SI_DATEPICKER.NEXT'?: string;\n  'SI_DATEPICKER.PERIOD'?: string;\n  'SI_DATEPICKER.PREVIOUS'?: string;\n  'SI_DATEPICKER.SECONDS'?: string;\n  'SI_DATEPICKER.START_DATE_PLACEHOLDER'?: string;\n  'SI_DATEPICKER.START_TIME_LABEL'?: string;\n  'SI_DATEPICKER.TODAY'?: string;\n  'SI_DATE_RANGE_FILTER.ADVANCED'?: string;\n  'SI_DATE_RANGE_FILTER.AFTER'?: string;\n  'SI_DATE_RANGE_FILTER.APPLY'?: string;\n  'SI_DATE_RANGE_FILTER.BEFORE'?: string;\n  'SI_DATE_RANGE_FILTER.DATE'?: string;\n  'SI_DATE_RANGE_FILTER.DATE_PLACEHOLDER'?: string;\n  'SI_DATE_RANGE_FILTER.DAYS'?: string;\n  'SI_DATE_RANGE_FILTER.FROM'?: string;\n  'SI_DATE_RANGE_FILTER.HOURS'?: string;\n  'SI_DATE_RANGE_FILTER.MINUTES'?: string;\n  'SI_DATE_RANGE_FILTER.MONTHS'?: string;\n  'SI_DATE_RANGE_FILTER.NOW'?: string;\n  'SI_DATE_RANGE_FILTER.PRESETS'?: string;\n  'SI_DATE_RANGE_FILTER.PREVIEW'?: string;\n  'SI_DATE_RANGE_FILTER.RANGE'?: string;\n  'SI_DATE_RANGE_FILTER.REF_POINT'?: string;\n  'SI_DATE_RANGE_FILTER.SEARCH'?: string;\n  'SI_DATE_RANGE_FILTER.SELECT_RANGE_END'?: string;\n  'SI_DATE_RANGE_FILTER.SELECT_RANGE_LABEL'?: string;\n  'SI_DATE_RANGE_FILTER.TO'?: string;\n  'SI_DATE_RANGE_FILTER.TODAY'?: string;\n  'SI_DATE_RANGE_FILTER.UNIT'?: string;\n  'SI_DATE_RANGE_FILTER.VALUE'?: string;\n  'SI_DATE_RANGE_FILTER.WEEKS'?: string;\n  'SI_DATE_RANGE_FILTER.WITHIN'?: string;\n  'SI_DATE_RANGE_FILTER.YEARS'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.CANCEL_BTN'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.DELETE_BTN'?: string;\n  'SI_DELETE_CONFIRMATION_DIALOG.MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.CANCEL_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISABLE_SAVE_DISCARD_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISABLE_SAVE_MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.DISCARD_BTN'?: string;\n  'SI_EDIT_DISCARD_DIALOG.MESSAGE'?: string;\n  'SI_EDIT_DISCARD_DIALOG.SAVE_BTN'?: string;\n  'SI_ELECTRON_TITLEBAR.BACK'?: string;\n  'SI_ELECTRON_TITLEBAR.FORWARD'?: string;\n  'SI_ELECTRON_TITLEBAR.MENU'?: string;\n  'SI_EXPLICIT_LEGAL_ACKNOWLEDGE.ACCEPT'?: string;\n  'SI_EXPLICIT_LEGAL_ACKNOWLEDGE.BACK'?: string;\n  'SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES'?: string;\n  'SI_FILE_UPLOADER.CANCEL'?: string;\n  'SI_FILE_UPLOADER.CLEAR'?: string;\n  'SI_FILE_UPLOADER.DROP'?: string;\n  'SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED'?: string;\n  'SI_FILE_UPLOADER.ERROR_FILE_TYPE'?: string;\n  'SI_FILE_UPLOADER.FILE_SELECT'?: string;\n  'SI_FILE_UPLOADER.MAX_FILE_REACHED'?: string;\n  'SI_FILE_UPLOADER.MAX_SIZE'?: string;\n  'SI_FILE_UPLOADER.REMOVE'?: string;\n  'SI_FILE_UPLOADER.UPLOAD'?: string;\n  'SI_FILE_UPLOADER.UPLOADING'?: string;\n  'SI_FILE_UPLOADER.UPLOAD_COMPLETED'?: string;\n  'SI_FILE_UPLOADER.UPLOAD_FAILED'?: string;\n  'SI_FILTERED_SEARCH.CLEAR'?: string;\n  'SI_FILTERED_SEARCH.ITEM_COUNT'?: string;\n  'SI_FILTERED_SEARCH.SEARCH'?: string;\n  'SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT'?: string;\n  'SI_FILTERED_SEARCH.SUBMIT_BUTTON'?: string;\n  'SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION'?: string;\n  'SI_FILTER_BAR.NO_FILTERS'?: string;\n  'SI_FILTER_BAR.RESET_FILTERS'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT_END'?: string;\n  'SI_FORM_CONTAINER.ERROR.DATE_FORMAT_START'?: string;\n  'SI_FORM_CONTAINER.ERROR.EMAIL'?: string;\n  'SI_FORM_CONTAINER.ERROR.END_BEFORE_START'?: string;\n  'SI_FORM_CONTAINER.ERROR.HOURS'?: string;\n  'SI_FORM_CONTAINER.ERROR.INVALID_PHONE'?: string;\n  'SI_FORM_CONTAINER.ERROR.IPV4'?: string;\n  'SI_FORM_CONTAINER.ERROR.IPV6'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_LENGTH'?: string;\n  'SI_FORM_CONTAINER.ERROR.MAX_TIME'?: string;\n  'SI_FORM_CONTAINER.ERROR.MILLISECONDS'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN'?: string;\n  'SI_FORM_CONTAINER.ERROR.MINUTES'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_LENGTH'?: string;\n  'SI_FORM_CONTAINER.ERROR.MIN_TIME'?: string;\n  'SI_FORM_CONTAINER.ERROR.NUMBER_FORMAT'?: string;\n  'SI_FORM_CONTAINER.ERROR.PATTERN'?: string;\n  'SI_FORM_CONTAINER.ERROR.PHONE_COUNTRY'?: string;\n  'SI_FORM_CONTAINER.ERROR.RANGE_AFTER_MAX_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.RANGE_BEFORE_MIN_DATE'?: string;\n  'SI_FORM_CONTAINER.ERROR.REQUIRED'?: string;\n  'SI_FORM_CONTAINER.ERROR.REQUIRED_TRUE'?: string;\n  'SI_FORM_CONTAINER.ERROR.SECONDS'?: string;\n  'SI_ICON_STATUS.CAUTION'?: string;\n  'SI_ICON_STATUS.CRITICAL'?: string;\n  'SI_ICON_STATUS.DANGER'?: string;\n  'SI_ICON_STATUS.INFO'?: string;\n  'SI_ICON_STATUS.PENDING'?: string;\n  'SI_ICON_STATUS.PROGRESS'?: string;\n  'SI_ICON_STATUS.SUCCESS'?: string;\n  'SI_ICON_STATUS.UNKNOWN'?: string;\n  'SI_ICON_STATUS.WARNING'?: string;\n  'SI_LANGUAGE_SWITCHER.LABEL'?: string;\n  'SI_LAUNCHPAD.CLOSE'?: string;\n  'SI_LAUNCHPAD.DEFAULT_CATEGORY_TITLE'?: string;\n  'SI_LAUNCHPAD.EXTERNAL_LINK'?: string;\n  'SI_LAUNCHPAD.FAVORITE_APPS'?: string;\n  'SI_LAUNCHPAD.SHOW_LESS'?: string;\n  'SI_LAUNCHPAD.SHOW_MORE'?: string;\n  'SI_LAUNCHPAD.SUB_TITLE'?: string;\n  'SI_LAUNCHPAD.TITLE'?: string;\n  'SI_LIST_DETAILS.BACK'?: string;\n  'SI_LIST_WIDGET.SEARCH_PLACEHOLDER'?: string;\n  'SI_LIST_WIDGET.SORT_ASCENDING'?: string;\n  'SI_LIST_WIDGET.SORT_DESCENDING'?: string;\n  'SI_LOADING_SPINNER.LABEL'?: string;\n  'SI_LOGIN_BASIC.BACK'?: string;\n  'SI_LOGIN_BASIC.FORGOT_PASSWORD'?: string;\n  'SI_LOGIN_BASIC.LOGIN'?: string;\n  'SI_LOGIN_BASIC.NEXT'?: string;\n  'SI_LOGIN_BASIC.PASSWORD'?: string;\n  'SI_LOGIN_BASIC.REGISTER_NOW'?: string;\n  'SI_LOGIN_BASIC.USERNAME'?: string;\n  'SI_LOGIN_SINGLE-SIGN-ON.LOGIN_SIGN_UP'?: string;\n  'SI_MAIN_DETAIL_CONTAINER.BACK'?: string;\n  'SI_NAVBAR.OPEN_LAUNCHPAD'?: string;\n  'SI_NAVBAR.TOGGLE_NAVIGATION'?: string;\n  'SI_NAVBAR_VERTICAL.COLLAPSE'?: string;\n  'SI_NAVBAR_VERTICAL.EXPAND'?: string;\n  'SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER'?: string;\n  'SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL'?: string;\n  'SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL'?: string;\n  'SI_NAVBAR_VERTICAL.TOGGLE'?: string;\n  'SI_PAGINATION.BACK'?: string;\n  'SI_PAGINATION.FORWARD'?: string;\n  'SI_PAGINATION.NAV_LABEL'?: string;\n  'SI_PASSWORD_TOGGLE.HIDE'?: string;\n  'SI_PASSWORD_TOGGLE.SHOW'?: string;\n  'SI_PHONE_NUMBER_INPUT.PHONE_NUMBER_INPUT_LABEL'?: string;\n  'SI_PHONE_NUMBER_INPUT.SEARCH_NO-RESULTS_FOUND'?: string;\n  'SI_PHONE_NUMBER_INPUT.SEARCH_PLACEHOLDER'?: string;\n  'SI_PHONE_NUMBER_INPUT.SELECT_COUNTRY'?: string;\n  'SI_PHOTO_UPLOAD.APPLY_PHOTO'?: string;\n  'SI_PHOTO_UPLOAD.CANCEL'?: string;\n  'SI_PHOTO_UPLOAD.CHANGE_PHOTO'?: string;\n  'SI_PHOTO_UPLOAD.CROPPER_FRAME_LABEL'?: string;\n  'SI_PHOTO_UPLOAD.ERROR_FILE_SIZE_EXCEEDED'?: string;\n  'SI_PHOTO_UPLOAD.ERROR_FILE_TYPE'?: string;\n  'SI_PHOTO_UPLOAD.MODAL_TITLE'?: string;\n  'SI_PHOTO_UPLOAD.REMOVE'?: string;\n  'SI_PHOTO_UPLOAD.UPLOAD_PHOTO'?: string;\n  'SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL'?: string;\n  'SI_PROGRESSBAR.LABEL'?: string;\n  'SI_SEARCH_BAR.CLEAR_BUTTON'?: string;\n  'SI_SELECT.NO-RESULTS-FOUND'?: string;\n  'SI_SELECT.SEARCH-PLACEHOLDER'?: string;\n  'SI_SIDE_PANEL.CLOSE'?: string;\n  'SI_SIDE_PANEL.ENTER_FULLSCREEN'?: string;\n  'SI_SIDE_PANEL.EXIT_FULLSCREEN'?: string;\n  'SI_SIDE_PANEL.SEARCH_PLACEHOLDER'?: string;\n  'SI_SIDE_PANEL.TOGGLE'?: string;\n  'SI_SKIP_LINKS.JUMP_TO'?: string;\n  'SI_SLIDER.DECREMENT'?: string;\n  'SI_SLIDER.INCREMENT'?: string;\n  'SI_SLIDER.LABEL'?: string;\n  'SI_SORT_BAR.TITLE'?: string;\n  'SI_STATUS_BAR.ALL_OK'?: string;\n  'SI_STATUS_BAR.COLLAPSE'?: string;\n  'SI_STATUS_BAR.EXPAND'?: string;\n  'SI_STATUS_BAR.MUTE'?: string;\n  'SI_THRESHOLD.ADD'?: string;\n  'SI_THRESHOLD.DELETE'?: string;\n  'SI_THRESHOLD.INPUT_LABEL'?: string;\n  'SI_THRESHOLD.STATUS'?: string;\n  'SI_TOAST.CLOSE'?: string;\n  'SI_TOUR.BACK'?: string;\n  'SI_TOUR.CLOSE'?: string;\n  'SI_TOUR.DONE'?: string;\n  'SI_TOUR.NEXT'?: string;\n  'SI_TOUR.PROGRESS'?: string;\n  'SI_TOUR.SKIP'?: string;\n  'SI_TREE_VIEW.COLLAPSE_ALL'?: string;\n  'SI_TREE_VIEW.EXPAND_ALL'?: string;\n  'SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL'?: string;\n  'SI_USER_MESSAGE.SECONDARY_ACTIONS'?: string;\n  'SI_WEATHER_WIDGET.FORECAST_LABEL'?: string;\n  'SI_WEATHER_WIDGET.ILLUSTRATION_ALT'?: string;\n  'SI_WEATHER_WIDGET.METRICS_LABEL'?: string;\n  'SI_WIZARD.BACK'?: string;\n  'SI_WIZARD.CANCEL'?: string;\n  'SI_WIZARD.COMPLETED'?: string;\n  'SI_WIZARD.NEXT'?: string;\n  'SI_WIZARD.SAVE'?: string;\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\nimport { SI_TRANSLATABLE_VALUES } from '@siemens/element-translate-ng/translate';\n\nimport { SiTranslatableKeys } from './si-translatable-keys.interface';\n\nexport const provideSiTranslatableOverrides: (values: SiTranslatableKeys) => Provider = values => ({\n  useValue: values,\n  multi: true,\n  provide: SI_TRANSLATABLE_VALUES\n});\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-translatable-keys.interface';\nexport * from './si-translatable-overrides.provider';\n// @deprecated use @simpl-labs/element-translate-ng/translate directly\nexport * from '@siemens/element-translate-ng/translate';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAAA;;MCSa,8BAA8B,GAA6C,MAAM,KAAK;AACjG,IAAA,QAAQ,EAAE,MAAM;AAChB,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,OAAO,EAAE;AACV,CAAA;;ACbD;;;AAGG;;ACHH;;AAEG;;;;"}

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

@@ -834,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:.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" }] });
+    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-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(--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,
@@ -855,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:.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"] }]
+                    }, 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-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(--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']