@siemens/element-ng 49.11.0 → 49.12.0

package/fesm2022/siemens-element-ng-electron-titlebar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, Component, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { elementOptionsVertical, elementRight4, elementLeft4 } from '@siemens/element-icons';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
@@ -77,11 +77,11 @@ class SiElectrontitlebarComponent {
     ariaLabelMenu = input(t(() => $localize `:@@SI_ELECTRON_TITLEBAR.MENU:Menu`), ...(ngDevMode ? [{ debugName: "ariaLabelMenu" }] : []));
     icons = addIcons({ elementLeft4, elementRight4, elementOptionsVertical });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiElectrontitlebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiElectrontitlebarComponent, isStandalone: true, selector: "si-electron-titlebar", inputs: { appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: true, transformFunction: null }, canGoBack: { classPropertyName: "canGoBack", publicName: "canGoBack", isSignal: true, isRequired: false, transformFunction: null }, canGoForward: { classPropertyName: "canGoForward", publicName: "canGoForward", isSignal: true, isRequired: false, transformFunction: null }, hasFocus: { classPropertyName: "hasFocus", publicName: "hasFocus", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelForward: { classPropertyName: "ariaLabelForward", publicName: "ariaLabelForward", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelBack: { classPropertyName: "ariaLabelBack", publicName: "ariaLabelBack", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelMenu: { classPropertyName: "ariaLabelMenu", publicName: "ariaLabelMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forward: "forward", back: "back" }, ngImport: i0, template: "<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n", styles: [".electron-title-bar-container{block-size:calc(1.5rem + 12px);z-index:1033;inset-block-start:var(--element-system-banner-spacing, 0px)}.electron-title-bar{position:absolute;inset-inline-start:env(titlebar-area-x,0);inline-size:env(titlebar-area-width,100%)}.electron-title-bar-app-name{color:var(--element-text-secondary);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.electron-title-bar-draggable{flex-basis:content;-webkit-app-region:drag}.unfocused{color:var(--element-ui-3)}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiElectrontitlebarComponent, isStandalone: true, selector: "si-electron-titlebar", inputs: { appTitle: { classPropertyName: "appTitle", publicName: "appTitle", isSignal: true, isRequired: true, transformFunction: null }, canGoBack: { classPropertyName: "canGoBack", publicName: "canGoBack", isSignal: true, isRequired: false, transformFunction: null }, canGoForward: { classPropertyName: "canGoForward", publicName: "canGoForward", isSignal: true, isRequired: false, transformFunction: null }, hasFocus: { classPropertyName: "hasFocus", publicName: "hasFocus", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelForward: { classPropertyName: "ariaLabelForward", publicName: "ariaLabelForward", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelBack: { classPropertyName: "ariaLabelBack", publicName: "ariaLabelBack", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelMenu: { classPropertyName: "ariaLabelMenu", publicName: "ariaLabelMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forward: "forward", back: "back" }, ngImport: i0, template: "<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n", styles: [".electron-title-bar-container{block-size:calc(1.5rem + 12px);z-index:1033;inset-block-start:var(--element-system-banner-spacing, 0px)}.electron-title-bar{position:absolute;inset-inline-start:env(titlebar-area-x,0);inline-size:env(titlebar-area-width,100%)}.electron-title-bar-app-name{color:var(--element-text-secondary);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.electron-title-bar-draggable{flex-basis:content;-webkit-app-region:drag}.unfocused{color:var(--element-ui-3)}\n"], dependencies: [{ kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiElectrontitlebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-electron-titlebar', imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconComponent, SiTranslatePipe], template: "<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n", styles: [".electron-title-bar-container{block-size:calc(1.5rem + 12px);z-index:1033;inset-block-start:var(--element-system-banner-spacing, 0px)}.electron-title-bar{position:absolute;inset-inline-start:env(titlebar-area-x,0);inline-size:env(titlebar-area-width,100%)}.electron-title-bar-app-name{color:var(--element-text-secondary);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.electron-title-bar-draggable{flex-basis:content;-webkit-app-region:drag}.unfocused{color:var(--element-ui-3)}\n"] }]
+            args: [{ selector: 'si-electron-titlebar', imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n", styles: [".electron-title-bar-container{block-size:calc(1.5rem + 12px);z-index:1033;inset-block-start:var(--element-system-banner-spacing, 0px)}.electron-title-bar{position:absolute;inset-inline-start:env(titlebar-area-x,0);inline-size:env(titlebar-area-width,100%)}.electron-title-bar-app-name{color:var(--element-text-secondary);-webkit-app-region:drag;-webkit-user-select:none;user-select:none}.electron-title-bar-draggable{flex-basis:content;-webkit-app-region:drag}.unfocused{color:var(--element-ui-3)}\n"] }]
         }], propDecorators: { appTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "appTitle", required: true }] }], canGoBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGoBack", required: false }] }], canGoForward: [{ type: i0.Input, args: [{ isSignal: true, alias: "canGoForward", required: false }] }], hasFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFocus", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], forward: [{ type: i0.Output, args: ["forward"] }], back: [{ type: i0.Output, args: ["back"] }], ariaLabelForward: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelForward", required: false }] }], ariaLabelBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelBack", required: false }] }], ariaLabelMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelMenu", required: false }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-electron-titlebar.mjs","sources":["../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.component.ts","../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.component.html","../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.module.ts","../../../../projects/element-ng/electron-titlebar/electron.helpers.ts","../../../../projects/element-ng/electron-titlebar/index.ts","../../../../projects/element-ng/electron-titlebar/siemens-element-ng-electron-titlebar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { booleanAttribute, Component, input, output } from '@angular/core';\nimport { elementLeft4, elementOptionsVertical, elementRight4 } from '@siemens/element-icons';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-electron-titlebar',\n  imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-electron-titlebar.component.html',\n  styleUrl: './si-electron-titlebar.component.scss'\n})\nexport class SiElectrontitlebarComponent {\n  /**\n   * Title of your application\n   */\n  readonly appTitle = input.required<string>();\n\n  /**\n   * Defines if the application can go back or not\n   *\n   * @defaultValue false\n   */\n  readonly canGoBack = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines if the application can go forward or not\n   *\n   * @defaultValue false\n   */\n  readonly canGoForward = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines if the application is focused or not\n   *\n   * @defaultValue true\n   */\n  readonly hasFocus = input(true, { transform: booleanAttribute });\n\n  /**\n   * List of menu items for the dropdown\n   * In this dropdown should the zoom functionality as well as the refresh function be provided\n   *\n   * @defaultValue []\n   */\n  readonly menuItems = input<(MenuItemLegacy | MenuItem)[]>([]);\n\n  /**\n   * Browsing forward function\n   */\n  readonly forward = output<void>();\n\n  /**\n   * Browsing back function\n   */\n  readonly back = output<void>();\n\n  /**\n   * Aria Label for Forward Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`)\n   * ```\n   */\n  readonly ariaLabelForward = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`));\n\n  /**\n   * Aria Label for Back Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`)\n   * ```\n   */\n  readonly ariaLabelBack = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`));\n\n  /**\n   * Aria Label for Menu Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`)\n   * ```\n   */\n  readonly ariaLabelMenu = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`));\n\n  protected readonly icons = addIcons({ elementLeft4, elementRight4, elementOptionsVertical });\n}\n","<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiElectrontitlebarComponent } from './si-electron-titlebar.component';\n\n@NgModule({\n  imports: [SiElectrontitlebarComponent],\n  exports: [SiElectrontitlebarComponent]\n})\nexport class SiElectrontitlebarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/** */\nexport const runsInElectron = (): boolean => {\n  const windowAny = window as any;\n  const processAny = windowAny.process as any;\n\n  // Renderer process\n  if (\n    typeof windowAny !== 'undefined' &&\n    typeof processAny === 'object' &&\n    processAny.type === 'renderer'\n  ) {\n    return true;\n  }\n\n  // Main process\n  if (\n    typeof processAny !== 'undefined' &&\n    typeof processAny.versions === 'object' &&\n    !!processAny.versions.electron\n  ) {\n    return true;\n  }\n\n  // Detect the user agent when the `nodeIntegration` option is set to true\n  if (\n    typeof navigator === 'object' &&\n    typeof navigator.userAgent === 'string' &&\n    navigator.userAgent.includes('Electron')\n  ) {\n    return true;\n  }\n  return false;\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-electron-titlebar.module';\nexport * from './si-electron-titlebar.component';\nexport * from './electron.helpers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-electron-titlebar.mjs","sources":["../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.component.ts","../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.component.html","../../../../projects/element-ng/electron-titlebar/si-electron-titlebar.module.ts","../../../../projects/element-ng/electron-titlebar/electron.helpers.ts","../../../../projects/element-ng/electron-titlebar/index.ts","../../../../projects/element-ng/electron-titlebar/siemens-element-ng-electron-titlebar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { elementLeft4, elementOptionsVertical, elementRight4 } from '@siemens/element-icons';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-electron-titlebar',\n  imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-electron-titlebar.component.html',\n  styleUrl: './si-electron-titlebar.component.scss',\n  changeDetection: ChangeDetectionStrategy.Default\n})\nexport class SiElectrontitlebarComponent {\n  /**\n   * Title of your application\n   */\n  readonly appTitle = input.required<string>();\n\n  /**\n   * Defines if the application can go back or not\n   *\n   * @defaultValue false\n   */\n  readonly canGoBack = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines if the application can go forward or not\n   *\n   * @defaultValue false\n   */\n  readonly canGoForward = input(false, { transform: booleanAttribute });\n\n  /**\n   * Defines if the application is focused or not\n   *\n   * @defaultValue true\n   */\n  readonly hasFocus = input(true, { transform: booleanAttribute });\n\n  /**\n   * List of menu items for the dropdown\n   * In this dropdown should the zoom functionality as well as the refresh function be provided\n   *\n   * @defaultValue []\n   */\n  readonly menuItems = input<(MenuItemLegacy | MenuItem)[]>([]);\n\n  /**\n   * Browsing forward function\n   */\n  readonly forward = output<void>();\n\n  /**\n   * Browsing back function\n   */\n  readonly back = output<void>();\n\n  /**\n   * Aria Label for Forward Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`)\n   * ```\n   */\n  readonly ariaLabelForward = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`));\n\n  /**\n   * Aria Label for Back Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`)\n   * ```\n   */\n  readonly ariaLabelBack = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`));\n\n  /**\n   * Aria Label for Menu Button\n   *\n   * @defaultValue\n   * ```\n   * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`)\n   * ```\n   */\n  readonly ariaLabelMenu = input(t(() => $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`));\n\n  protected readonly icons = addIcons({ elementLeft4, elementRight4, elementOptionsVertical });\n}\n","<div class=\"electron-title-bar-container w-100 bg-base-1 border-bottom fixed-top\">\n  <div class=\"electron-title-bar align-items-center d-flex h-100 gap-6\">\n    <span\n      class=\"mx-6 si-body electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-icon btn-sm btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-icon electron-title-bar-btn btn-tertiary btn-sm\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon [icon]=\"icons.elementOptionsVertical\" />\n      </button>\n    }\n    <div class=\"electron-title-bar-draggable flex-grow-1 w-100 h-100\"></div>\n  </div>\n</div>\n<ng-template #menu>\n  <div class=\"mt-2\">\n    <si-menu-factory [items]=\"menuItems()\" />\n  </div>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiElectrontitlebarComponent } from './si-electron-titlebar.component';\n\n@NgModule({\n  imports: [SiElectrontitlebarComponent],\n  exports: [SiElectrontitlebarComponent]\n})\nexport class SiElectrontitlebarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\n/** */\nexport const runsInElectron = (): boolean => {\n  const windowAny = window as any;\n  const processAny = windowAny.process as any;\n\n  // Renderer process\n  if (\n    typeof windowAny !== 'undefined' &&\n    typeof processAny === 'object' &&\n    processAny.type === 'renderer'\n  ) {\n    return true;\n  }\n\n  // Main process\n  if (\n    typeof processAny !== 'undefined' &&\n    typeof processAny.versions === 'object' &&\n    !!processAny.versions.electron\n  ) {\n    return true;\n  }\n\n  // Detect the user agent when the `nodeIntegration` option is set to true\n  if (\n    typeof navigator === 'object' &&\n    typeof navigator.userAgent === 'string' &&\n    navigator.userAgent.includes('Electron')\n  ) {\n    return true;\n  }\n  return false;\n};\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-electron-titlebar.module';\nexport * from './si-electron-titlebar.component';\nexport * from './electron.helpers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-empty-state.mjs

@@ -21,11 +21,11 @@ class SiEmptyStateComponent {
      */
     content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiEmptyStateComponent, isStandalone: true, selector: "si-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <h3 class=\"my-6 text-center\">{{ heading() | translate }}</h3>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:24px;padding-block:32px}.state-icon{color:var(--element-ui-2);font-size:80px}\n"], dependencies: [{ 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: SiEmptyStateComponent, isStandalone: true, selector: "si-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:24px;padding-block:32px}.state-icon{color:var(--element-ui-2);font-size:80px}\n"], dependencies: [{ 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: SiEmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-empty-state', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <h3 class=\"my-6 text-center\">{{ heading() | translate }}</h3>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:24px;padding-block:32px}.state-icon{color:var(--element-ui-2);font-size:80px}\n"] }]
+            args: [{ selector: 'si-empty-state', imports: [SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n", styles: [".list-group-item-empty{block-size:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:24px;padding-block:32px}.state-icon{color:var(--element-ui-2);font-size:80px}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
 /**

package/fesm2022/siemens-element-ng-empty-state.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-empty-state.mjs","sources":["../../../../projects/element-ng/empty-state/si-empty-state.component.ts","../../../../projects/element-ng/empty-state/si-empty-state.component.html","../../../../projects/element-ng/empty-state/si-empty-state.module.ts","../../../../projects/element-ng/empty-state/index.ts","../../../../projects/element-ng/empty-state/siemens-element-ng-empty-state.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-empty-state.component.html',\n  styleUrl: './si-empty-state.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiEmptyStateComponent {\n  /**\n   * CSS class name of the desired icon.\n   */\n  readonly icon = input.required<string>();\n\n  /**\n   * Heading of empty state content.\n   */\n  readonly heading = input.required<TranslatableString>();\n\n  /**\n   * Description of empty state content.\n   */\n  readonly content = input<TranslatableString>();\n}\n","<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <h3 class=\"my-6 text-center\">{{ heading() | translate }}</h3>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiEmptyStateComponent } from './si-empty-state.component';\n\n@NgModule({\n  imports: [SiEmptyStateComponent],\n  exports: [SiEmptyStateComponent]\n})\nexport class SiEmptyStateModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-empty-state.component';\nexport * from './si-empty-state.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAYU,qBAAqB,CAAA;AAChC;;AAEG;AACM,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAExC;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAsB;AAEvD;;AAEG;IACM,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;uGAdnC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECflC,uSAQA,EAAA,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK/B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAG1B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uSAAA,EAAA,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA;;;AEbjD;;;AAGG;MASU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,qBAAqB,CAAA,EAAA,CAAA;;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-empty-state.mjs","sources":["../../../../projects/element-ng/empty-state/si-empty-state.component.ts","../../../../projects/element-ng/empty-state/si-empty-state.component.html","../../../../projects/element-ng/empty-state/si-empty-state.module.ts","../../../../projects/element-ng/empty-state/index.ts","../../../../projects/element-ng/empty-state/siemens-element-ng-empty-state.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconComponent, SiTranslatePipe],\n  templateUrl: './si-empty-state.component.html',\n  styleUrl: './si-empty-state.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SiEmptyStateComponent {\n  /**\n   * CSS class name of the desired icon.\n   */\n  readonly icon = input.required<string>();\n\n  /**\n   * Heading of empty state content.\n   */\n  readonly heading = input.required<TranslatableString>();\n\n  /**\n   * Description of empty state content.\n   */\n  readonly content = input<TranslatableString>();\n}\n","<div class=\"list-group-item-empty\">\n  <si-icon class=\"state-icon\" [icon]=\"icon()\" />\n  <span class=\"si-h3 my-6 text-center\">{{ heading() | translate }}</span>\n  @if (content()) {\n    <p class=\"text-pre-wrap text-center mb-6\">{{ content() | translate }}</p>\n  }\n  <ng-content />\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiEmptyStateComponent } from './si-empty-state.component';\n\n@NgModule({\n  imports: [SiEmptyStateComponent],\n  exports: [SiEmptyStateComponent]\n})\nexport class SiEmptyStateModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-empty-state.component';\nexport * from './si-empty-state.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;AAGG;MAYU,qBAAqB,CAAA;AAChC;;AAEG;AACM,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU;AAExC;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAsB;AAEvD;;AAEG;IACM,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAsB;uGAdnC,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECflC,iTAQA,EAAA,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,iEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK/B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,eAAe,EAAE,eAAe,CAAC,EAAA,eAAA,EAG1B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,iTAAA,EAAA,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA;;;AEbjD;;;AAGG;MASU,kBAAkB,CAAA;uGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAlB,kBAAkB,EAAA,OAAA,EAAA,CAHnB,qBAAqB,CAAA,EAAA,OAAA,EAAA,CACrB,qBAAqB,CAAA,EAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAHnB,qBAAqB,CAAA,EAAA,CAAA;;2FAGpB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,qBAAqB;AAChC,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}

package/fesm2022/siemens-element-ng-file-uploader.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, inject, ElementRef, LOCALE_ID, Directive, computed, viewChild, ChangeDetectionStrategy, Component, numberAttribute, ChangeDetectorRef, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, LOCALE_ID, Directive, computed, viewChild, ChangeDetectionStrategy, Component, numberAttribute, signal, effect, untracked, NgModule } from '@angular/core';
 import { elementUpload, elementRedo, elementDocument, elementDelete, elementCancel } from '@siemens/element-icons';
 import { addIcons, SiIconComponent, SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
@@ -388,7 +388,7 @@ class SiFileDropzoneComponent {
         event.stopPropagation();
         this.dragOver = true;
     }
-    inputEnterHandler() {
+    triggerFileSelect() {
         this.fileUploadDirective().triggerClick();
     }
     onFilesAdded(files) {
@@ -404,11 +404,11 @@ class SiFileDropzoneComponent {
         this.fileUploadDirective().reset();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileDropzoneComponent, isStandalone: true, selector: "si-file-dropzone", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileError: "fileError" }, viewQueries: [{ propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"multiple()\"\n        [directoryUpload]=\"directoryUpload()\"\n        [errorTextFileType]=\"errorTextFileType()\"\n        [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n        (filesAdded)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileDropzoneComponent, isStandalone: true, selector: "si-file-dropzone", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileError: "fileError" }, viewQueries: [{ propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadTextFileSelect() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, SiTranslatePipe, SiFileUploadDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"multiple()\"\n        [directoryUpload]=\"directoryUpload()\"\n        [errorTextFileType]=\"errorTextFileType()\"\n        [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n        (filesAdded)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"] }]
+            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, SiTranslatePipe, SiFileUploadDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadTextFileSelect() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"] }]
         }], propDecorators: { uploadTextFileSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTextFileSelect", required: false }] }], uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }] } });
 
 /**
@@ -640,18 +640,20 @@ class SiFileUploaderComponent {
         elementDocument,
         elementRedo
     });
-    files = [];
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     pending = 0;
     uploading = 0;
-    uploadEnabled = false;
-    maxFilesReached = false;
+    uploadEnabled = signal(false, ...(ngDevMode ? [{ debugName: "uploadEnabled" }] : []));
+    maxFilesReached = signal(false, ...(ngDevMode ? [{ debugName: "maxFilesReached" }] : []));
     dropZone = viewChild.required('dropZone');
-    cdRef = inject(ChangeDetectorRef);
     http = inject(HttpClient, { optional: true });
-    ngOnChanges(changes) {
-        if (changes.maxFiles || changes.disableUpload) {
-            this.updateStates();
-        }
+    constructor() {
+        effect(() => {
+            // Track only these inputs; use untracked to avoid tracking files() inside updateStates()
+            this.maxFiles();
+            this.disableUpload();
+            untracked(() => this.updateStates());
+        });
     }
     handleFiles(files) {
         if (!files?.length) {
@@ -659,12 +661,13 @@ class SiFileUploaderComponent {
         }
         const maxFiles = this.maxFiles();
         // for single-file case, replace exiting file if any
-        if (maxFiles === 1 && this.files.length) {
+        if (maxFiles === 1 && this.files().length) {
             this.reset(false);
         }
         let numValid = this.countValid();
+        const current = this.files().slice();
         for (const file of files) {
-            const duplicate = this.isDuplicate(file);
+            const duplicate = this.isDuplicate(file, current);
             if (duplicate) {
                 // in case this is duplicated: reset if already uploaded or not handled yet
                 if (duplicate.status !== 'uploading' && duplicate.status !== 'queued') {
@@ -675,29 +678,28 @@ class SiFileUploaderComponent {
             const canAdd = numValid + 1 <= maxFiles;
             const valid = file.status === 'added';
             if (valid && !canAdd) {
-                this.maxFilesReached = true;
+                this.maxFilesReached.set(true);
                 break;
             }
             else if (valid) {
                 numValid++;
             }
-            this.files.push(file);
+            current.push(file);
         }
-        this.files.sort((a, b) => a.fileName.localeCompare(b.fileName));
-        this.filesChanges.emit(this.files.slice());
+        current.sort((a, b) => a.fileName.localeCompare(b.fileName));
+        this.files.set(current);
+        this.filesChanges.emit(current.slice());
         this.updateStates();
-        // needed for drag drop of directory
-        this.cdRef.markForCheck();
         if (this.autoUpload()) {
             // allow concurrent uploads for auto upload mode.
-            this.uploadEnabled = true;
+            this.uploadEnabled.set(true);
             this.fileUpload(false);
         }
     }
     removeFile(index) {
         if (index >= 0) {
-            this.files.splice(index, 1);
-            this.filesChanges.emit(this.files.slice());
+            this.files.update(current => current.filter((_, i) => i !== index));
+            this.filesChanges.emit(this.files());
             this.dropZone().reset();
             this.updateStates();
         }
@@ -711,6 +713,7 @@ class SiFileUploaderComponent {
         this.pending--;
         file.status = 'added';
         file.progress = 0;
+        this.files.update(f => [...f]);
         this.updateStates();
         const { status, fileName, size, progress } = file;
         this.uploadCanceled.emit({
@@ -729,8 +732,8 @@ class SiFileUploaderComponent {
      * Reset the state.
      */
     reset(emit = true) {
-        this.files.forEach(f => f.subscription?.unsubscribe());
-        this.files = [];
+        this.files().forEach(f => f.subscription?.unsubscribe());
+        this.files.set([]);
         this.dropZone().reset();
         this.updateStates();
         if (emit) {
@@ -741,11 +744,11 @@ class SiFileUploaderComponent {
      * Uploads the file
      */
     fileUpload(doRetry = true) {
-        if (!this.uploadEnabled) {
+        if (!this.uploadEnabled()) {
             return;
         }
-        this.uploadEnabled = false;
-        this.doUpload(this.files, doRetry);
+        this.uploadEnabled.set(false);
+        this.doUpload(this.files(), doRetry);
     }
     doUpload(files, doRetry) {
         for (const file of files) {
@@ -758,8 +761,8 @@ class SiFileUploaderComponent {
         this.processQueue();
     }
     processQueue() {
-        for (let i = 0; i < this.files.length && this.uploading < this.maxConcurrentUploads(); i++) {
-            const file = this.files[i];
+        for (let i = 0; i < this.files().length && this.uploading < this.maxConcurrentUploads(); i++) {
+            const file = this.files()[i];
             if (file.status === 'queued') {
                 this.uploading++;
                 this.uploadOneFile(file);
@@ -788,6 +791,7 @@ class SiFileUploaderComponent {
         file.status = 'uploading';
         file.errorText = undefined;
         file.httpErrorText = undefined;
+        this.files.update(f => [...f]);
         const requestHandler = config.handler ??
             (this.http ? (r) => this.http.request(r) : undefined);
         if (!requestHandler) {
@@ -802,8 +806,8 @@ class SiFileUploaderComponent {
         });
     }
     // this is a light check for duplicate file - name and size only, not content!
-    isDuplicate(file) {
-        for (const uploadFile of this.files) {
+    isDuplicate(file, current) {
+        for (const uploadFile of current) {
             if (uploadFile.file.name === file.file.name && uploadFile.file.size === file.file.size) {
                 return uploadFile;
             }
@@ -816,7 +820,7 @@ class SiFileUploaderComponent {
         }
         else if (httpEvent.type === HttpEventType.UploadProgress && httpEvent.total) {
             file.progress = Math.floor((100 * httpEvent.loaded) / httpEvent.total);
-            this.cdRef.markForCheck();
+            this.files.update(f => [...f]);
         }
     }
     handleUploadError(file, error) {
@@ -842,34 +846,32 @@ class SiFileUploaderComponent {
         file.subscription = undefined;
         this.pending--;
         this.uploading--;
+        this.files.update(f => [...f]);
         this.updateStates();
         this.processQueue();
     }
     fadeOut(file) {
         setTimeout(() => {
             file.fadeOut = true;
-            this.cdRef.markForCheck();
+            this.files.update(f => [...f]);
             setTimeout(() => {
-                this.removeFile(this.files.indexOf(file));
-                this.cdRef.markForCheck();
+                this.removeFile(this.files().indexOf(file));
             }, 500);
-            this.cdRef.markForCheck();
         }, 3500);
     }
     updateStates() {
-        this.uploadEnabled =
-            !this.disableUpload() &&
-                !this.pending &&
-                this.files.some(f => f.status === 'added' || f.status === 'error');
-        if (this.maxFilesReached && this.countValid() < this.maxFiles()) {
-            this.maxFilesReached = false;
+        this.uploadEnabled.set(!this.disableUpload() &&
+            !this.pending &&
+            this.files().some(f => f.status === 'added' || f.status === 'error'));
+        if (this.maxFilesReached() && this.countValid() < this.maxFiles()) {
+            this.maxFilesReached.set(false);
         }
     }
     countValid() {
-        return this.files.reduce((acc, f) => acc + (f.status !== 'invalid' ? 1 : 0), 0);
+        return this.files().reduce((acc, f) => acc + (f.status !== 'invalid' ? 1 : 0), 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileUploaderComponent, isStandalone: true, selector: "si-file-uploader", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, maxFilesReachedText: { classPropertyName: "maxFilesReachedText", publicName: "maxFilesReachedText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, uploadButtonText: { classPropertyName: "uploadButtonText", publicName: "uploadButtonText", isSignal: true, isRequired: false, transformFunction: null }, clearButtonText: { classPropertyName: "clearButtonText", publicName: "clearButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadingText: { classPropertyName: "uploadingText", publicName: "uploadingText", isSignal: true, isRequired: false, transformFunction: null }, removeButtonText: { classPropertyName: "removeButtonText", publicName: "removeButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, successTextTitle: { classPropertyName: "successTextTitle", publicName: "successTextTitle", isSignal: true, isRequired: false, transformFunction: null }, errorUploadFailed: { classPropertyName: "errorUploadFailed", publicName: "errorUploadFailed", isSignal: true, isRequired: false, transformFunction: null }, showHttpError: { classPropertyName: "showHttpError", publicName: "showHttpError", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, retries: { classPropertyName: "retries", publicName: "retries", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, disableUpload: { classPropertyName: "disableUpload", publicName: "disableUpload", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadCanceled: "uploadCanceled", uploadCompleted: "uploadCompleted", filesChanges: "filesChanges" }, viewQueries: [{ propertyName: "dropZone", first: true, predicate: ["dropZone"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files.length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "component", type: SiFileDropzoneComponent, selector: "si-file-dropzone", inputs: ["uploadTextFileSelect", "uploadDropText", "maxFileSizeText", "acceptText", "errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["filesAdded", "fileError"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiProgressbarComponent, selector: "si-progressbar", inputs: ["ariaLabel", "max", "value", "heading", "progress", "height"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileUploaderComponent, isStandalone: true, selector: "si-file-uploader", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, maxFilesReachedText: { classPropertyName: "maxFilesReachedText", publicName: "maxFilesReachedText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, uploadButtonText: { classPropertyName: "uploadButtonText", publicName: "uploadButtonText", isSignal: true, isRequired: false, transformFunction: null }, clearButtonText: { classPropertyName: "clearButtonText", publicName: "clearButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadingText: { classPropertyName: "uploadingText", publicName: "uploadingText", isSignal: true, isRequired: false, transformFunction: null }, removeButtonText: { classPropertyName: "removeButtonText", publicName: "removeButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, successTextTitle: { classPropertyName: "successTextTitle", publicName: "successTextTitle", isSignal: true, isRequired: false, transformFunction: null }, errorUploadFailed: { classPropertyName: "errorUploadFailed", publicName: "errorUploadFailed", isSignal: true, isRequired: false, transformFunction: null }, showHttpError: { classPropertyName: "showHttpError", publicName: "showHttpError", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, retries: { classPropertyName: "retries", publicName: "retries", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, disableUpload: { classPropertyName: "disableUpload", publicName: "disableUpload", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadCanceled: "uploadCanceled", uploadCompleted: "uploadCompleted", filesChanges: "filesChanges" }, viewQueries: [{ propertyName: "dropZone", first: true, predicate: ["dropZone"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "component", type: SiFileDropzoneComponent, selector: "si-file-dropzone", inputs: ["uploadTextFileSelect", "uploadDropText", "maxFileSizeText", "acceptText", "errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["filesAdded", "fileError"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiProgressbarComponent, selector: "si-progressbar", inputs: ["ariaLabel", "max", "value", "heading", "progress", "height"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
             type: Component,
@@ -880,8 +882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiInlineNotificationComponent,
                         SiProgressbarComponent,
                         SiTranslatePipe
-                    ], template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files.length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
-        }], propDecorators: { uploadTextFileSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTextFileSelect", required: false }] }], uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], maxFilesReachedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFilesReachedText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], uploadButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonText", required: false }] }], clearButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonText", required: false }] }], uploadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingText", required: false }] }], removeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButtonText", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], successTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "successTextTitle", required: false }] }], errorUploadFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorUploadFailed", required: false }] }], showHttpError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHttpError", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], retries: [{ type: i0.Input, args: [{ isSignal: true, alias: "retries", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], disableUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableUpload", required: false }] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], uploadCanceled: [{ type: i0.Output, args: ["uploadCanceled"] }], uploadCompleted: [{ type: i0.Output, args: ["uploadCompleted"] }], filesChanges: [{ type: i0.Output, args: ["filesChanges"] }], dropZone: [{ type: i0.ViewChild, args: ['dropZone', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { uploadTextFileSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTextFileSelect", required: false }] }], uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], maxFilesReachedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFilesReachedText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], uploadButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonText", required: false }] }], clearButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonText", required: false }] }], uploadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingText", required: false }] }], removeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButtonText", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], successTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "successTextTitle", required: false }] }], errorUploadFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorUploadFailed", required: false }] }], showHttpError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHttpError", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], retries: [{ type: i0.Input, args: [{ isSignal: true, alias: "retries", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], disableUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableUpload", required: false }] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], uploadCanceled: [{ type: i0.Output, args: ["uploadCanceled"] }], uploadCompleted: [{ type: i0.Output, args: ["uploadCompleted"] }], filesChanges: [{ type: i0.Output, args: ["filesChanges"] }], dropZone: [{ type: i0.ViewChild, args: ['dropZone', { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026