@siemens/element-ng 47.9.0 → 48.0.0-next.2

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

@@ -3,7 +3,7 @@ import { input, booleanAttribute, output, Component, NgModule } from '@angular/c
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { addIcons, elementOptionsVertical, elementRight4, elementLeft4, SiIconNextComponent } from '@siemens/element-ng/icon';
 import { SiMenuFactoryComponent } from '@siemens/element-ng/menu';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -52,33 +52,33 @@ class SiElectrontitlebarComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`
+     * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`)
      * ```
      */
-    ariaLabelForward = input($localize `:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`);
+    ariaLabelForward = input(t(() => $localize `:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`));
     /**
      * Aria Label for Back Button
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`
+     * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`)
      * ```
      */
-    ariaLabelBack = input($localize `:@@SI_ELECTRON_TITLEBAR.BACK:Back`);
+    ariaLabelBack = input(t(() => $localize `:@@SI_ELECTRON_TITLEBAR.BACK:Back`));
     /**
      * Aria Label for Menu Button
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`
+     * t(() => $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`)
      * ```
      */
-    ariaLabelMenu = input($localize `:@@SI_ELECTRON_TITLEBAR.MENU:Menu`);
+    ariaLabelMenu = input(t(() => $localize `:@@SI_ELECTRON_TITLEBAR.MENU:Menu`));
     icons = addIcons({ elementLeft4, elementRight4, elementOptionsVertical });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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-2 electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle electron-title-bar-btn btn-tertiary btn-xs\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon-next [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:36px;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"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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-2 electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle electron-title-bar-btn btn-tertiary btn-xs\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon-next [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:36px;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"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "component", type: SiMenuFactoryComponent, selector: "si-menu-factory", inputs: ["items", "actionParam"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-electron-titlebar', imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconNextComponent, 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-2 electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle electron-title-bar-btn btn-tertiary btn-xs\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon-next [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:36px;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"] }]
         }] });
@@ -88,11 +88,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiElectrontitlebarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarModule, imports: [SiElectrontitlebarComponent], exports: [SiElectrontitlebarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarModule, imports: [SiElectrontitlebarComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarModule, imports: [SiElectrontitlebarComponent], exports: [SiElectrontitlebarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarModule, imports: [SiElectrontitlebarComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiElectrontitlebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiElectrontitlebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiElectrontitlebarComponent],

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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { booleanAttribute, Component, input, output } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n  addIcons,\n  elementLeft4,\n  elementOptionsVertical,\n  elementRight4,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { MenuItem, SiMenuFactoryComponent } from '@siemens/element-ng/menu';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-electron-titlebar',\n  imports: [CdkMenuTrigger, SiMenuFactoryComponent, SiIconNextComponent, 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   * $localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`\n   * ```\n   */\n  readonly ariaLabelForward = input($localize`:@@SI_ELECTRON_TITLEBAR.FORWARD:Forward`);\n\n  /**\n   * Aria Label for Back Button\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`\n   * ```\n   */\n  readonly ariaLabelBack = input($localize`:@@SI_ELECTRON_TITLEBAR.BACK:Back`);\n\n  /**\n   * Aria Label for Menu Button\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_ELECTRON_TITLEBAR.MENU:Menu`\n   * ```\n   */\n  readonly ariaLabelMenu = input($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-2 electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle electron-title-bar-btn btn-tertiary btn-xs\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon-next [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 - 2025\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 - 2025\n * SPDX-License-Identifier: MIT\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 - 2025\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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { CdkMenuTrigger } from '@angular/cdk/menu';\nimport { booleanAttribute, Component, input, output } from '@angular/core';\nimport { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';\nimport {\n  addIcons,\n  elementLeft4,\n  elementOptionsVertical,\n  elementRight4,\n  SiIconNextComponent\n} 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, SiIconNextComponent, 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-2 electron-title-bar-app-name text-truncate\"\n      [class.unfocused]=\"!hasFocus()\"\n      >{{ appTitle() }}</span\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelBack() | translate\"\n      [disabled]=\"!canGoBack()\"\n      (click)=\"back.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementLeft4\" />\n    </button>\n    <button\n      type=\"button\"\n      class=\"btn btn-circle btn-xs btn-tertiary\"\n      [class.unfocused]=\"!hasFocus()\"\n      [attr.aria-label]=\"ariaLabelForward() | translate\"\n      [disabled]=\"!canGoForward()\"\n      (click)=\"forward.emit()\"\n    >\n      <si-icon-next class=\"flip-rtl\" [icon]=\"icons.elementRight4\" />\n    </button>\n    @if (menuItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"btn btn-circle electron-title-bar-btn btn-tertiary btn-xs\"\n        [class.unfocused]=\"!hasFocus()\"\n        [attr.aria-label]=\"ariaLabelMenu() | translate\"\n        [cdkMenuTriggerFor]=\"menu\"\n      >\n        <si-icon-next [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 - 2025\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 - 2025\n * SPDX-License-Identifier: MIT\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 - 2025\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

@@ -20,10 +20,10 @@ class SiEmptyStateComponent {
      * Description of empty state content.
      */
     content = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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-next 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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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-next 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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-empty-state', imports: [SiIconNextComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list-group-item-empty\">\n  <si-icon-next 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"] }]
         }] });
@@ -33,11 +33,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiEmptyStateModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateModule, imports: [SiEmptyStateComponent], exports: [SiEmptyStateComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateModule, imports: [SiEmptyStateComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateModule, imports: [SiEmptyStateComponent], exports: [SiEmptyStateComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateModule, imports: [SiEmptyStateComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiEmptyStateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiEmptyStateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiEmptyStateComponent],

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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconNextComponent, 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-next 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 - 2025\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 - 2025\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,EAAU;AAExC;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAsB;AAEvD;;AAEG;IACM,OAAO,GAAG,KAAK,EAAsB;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,ECflC,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,EAAA,4SAQA,EDEY,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,mBAAmB,sEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKnC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,mBAAmB,EAAE,eAAe,CAAC,EAAA,eAAA,EAG9B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4SAAA,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 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { SiIconNextComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';\n\n@Component({\n  selector: 'si-empty-state',\n  imports: [SiIconNextComponent, 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-next 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 - 2025\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 - 2025\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,EAAU;AAExC;;AAEG;AACM,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAsB;AAEvD;;AAEG;IACM,OAAO,GAAG,KAAK,EAAsB;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,4SAQA,EAAA,MAAA,EAAA,CAAA,oNAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,mBAAmB,sEAAE,eAAe,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKnC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;+BACE,gBAAgB,EAAA,OAAA,EACjB,CAAC,mBAAmB,EAAE,eAAe,CAAC,EAAA,eAAA,EAG9B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,4SAAA,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,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, booleanAttribute, output, computed, viewChild, inject, LOCALE_ID, ChangeDetectionStrategy, Component, numberAttribute, ChangeDetectorRef, NgModule } from '@angular/core';
-import { addIcons, elementUpload, SiIconNextComponent, elementRedo, elementDocument, elementDelete, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { addIcons, elementUpload, SiIconNextComponent, elementRedo, elementDocument, elementDelete, elementCancel, SiStatusIconComponent } from '@siemens/element-ng/icon';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { NgClass } from '@angular/common';
 import { HttpHeaders, HttpClient, HttpRequest, HttpResponse, HttpEventType } from '@angular/common/http';
 import { SiInlineNotificationComponent } from '@siemens/element-ng/inline-notification';
@@ -18,55 +18,55 @@ class SiFileDropzoneComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
      * ```
      */
-    uploadTextFileSelect = input($localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`);
+    uploadTextFileSelect = input(t(() => $localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`));
     /**
      * Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect`).
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
      * ```
      */
-    uploadDropText = input($localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`);
+    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`));
     /**
      * Text or translation key for max file size.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`)
      * ```
      */
-    maxFileSizeText = input($localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`);
+    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`));
     /**
      * Text or translation key for accepted types.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`)
      * ```
      */
-    acceptText = input($localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`);
+    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`));
     /**
      * Text or translation key of message title if incorrect file type is dragged / dropped.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
      * ```
      */
-    errorTextFileType = input($localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`);
+    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`));
     /**
      * Message or translation key if file exceeds the maximum file size limit.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`)
      * ```
      */
-    errorTextFileMaxSize = input($localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`);
+    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`));
     /**
      * Define which file types are suggested in file browser.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
@@ -239,10 +239,10 @@ class SiFileDropzoneComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], 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-next class=\"mb-6 si-display-3\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-title-2 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-title-2 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        [attr.webkitdirectory]=\"directoryUpload() ? true : null\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"inputHandler($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate }}: {{ maxFileSizeString() }}.\n      }\n      @if (accept()) {\n        {{ acceptText() | translate }}: {{ 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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], 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-next class=\"mb-6 si-display-3\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-title-2 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-title-2 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        [attr.webkitdirectory]=\"directoryUpload() ? true : null\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"inputHandler($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate }}: {{ maxFileSizeString() }}.\n      }\n      @if (accept()) {\n        {{ acceptText() | translate }}: {{ 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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-file-dropzone', imports: [SiIconNextComponent, SiTranslatePipe], 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-next class=\"mb-6 si-display-3\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-title-2 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-title-2 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        [attr.webkitdirectory]=\"directoryUpload() ? true : null\"\n        [accept]=\"accept()\"\n        [multiple]=\"multiple()\"\n        (change)=\"inputHandler($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate }}: {{ maxFileSizeString() }}.\n      }\n      @if (accept()) {\n        {{ acceptText() | translate }}: {{ 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"] }]
         }] });
@@ -257,109 +257,109 @@ class SiFileUploaderComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
      * ```
      */
-    uploadTextFileSelect = input($localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`);
+    uploadTextFileSelect = input(t(() => $localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`));
     /**
      * Text instructing a user to drop the files inside the dropzone.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
      * ```
      */
-    uploadDropText = input($localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`);
+    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`));
     /**
      * Text to describe the maximum file size.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`)
      * ```
      */
-    maxFileSizeText = input($localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`);
+    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Maximum upload size`));
     /**
      * Error message shown when the maximum number of files are reached.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Maximum number of files reached`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Maximum number of files reached`)
      * ```
      */
-    maxFilesReachedText = input($localize `:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Maximum number of files reached`);
+    maxFilesReachedText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Maximum number of files reached`));
     /**
      * Text for the accepted file types.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`)
      * ```
      */
-    acceptText = input($localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`);
+    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`));
     /**
      * Text used inside the upload button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.UPLOAD:Upload`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD:Upload`)
      * ```
      */
-    uploadButtonText = input($localize `:@@SI_FILE_UPLOADER.UPLOAD:Upload`);
+    uploadButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD:Upload`));
     /**
      * Text used inside the clear button.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.CLEAR:Clear`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.CLEAR:Clear`)
      * ```
      */
-    clearButtonText = input($localize `:@@SI_FILE_UPLOADER.CLEAR:Clear`);
+    clearButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CLEAR:Clear`));
     /**
      * Text shown during the file upload.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.UPLOADING:Uploading`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOADING:Uploading`)
      * ```
      */
-    uploadingText = input($localize `:@@SI_FILE_UPLOADER.UPLOADING:Uploading`);
+    uploadingText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOADING:Uploading`));
     /**
      * Text shown to remove a file from the file list. Required for a11y.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.REMOVE:Remove`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.REMOVE:Remove`)
      * ```
      */
-    removeButtonText = input($localize `:@@SI_FILE_UPLOADER.REMOVE:Remove`);
+    removeButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.REMOVE:Remove`));
     /**
      * Text of cancel button. Shown during upload. Required for a11y.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.CANCEL:Cancel`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.CANCEL:Cancel`)
      * ```
      */
-    cancelButtonText = input($localize `:@@SI_FILE_UPLOADER.CANCEL:Cancel`);
+    cancelButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CANCEL:Cancel`));
     /**
      * Text shown if the upload was successful.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`)
      * ```
      */
-    successTextTitle = input($localize `:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`);
+    successTextTitle = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`));
     /**
      * Text shown if the upload failed.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`)
      * ```
      */
-    errorUploadFailed = input($localize `:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`);
+    errorUploadFailed = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`));
     /**
      * On failed upload, show the error received from the server.
      *
@@ -371,19 +371,19 @@ class SiFileUploaderComponent {
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
      * ```
      */
-    errorTextFileType = input($localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`);
+    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`));
     /**
      * Message or translation key if file exceeds the maximum file size limit.
      *
      * @defaultValue
      * ```
-     * $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`)
      * ```
      */
-    errorTextFileMaxSize = input($localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`);
+    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size`));
     /**
      * Config for HTTP request to upload file.
      *
@@ -704,20 +704,20 @@ class SiFileUploaderComponent {
     countValid() {
         return this.files.reduce((acc, f) => acc + (f.status !== 'invalid' ? 1 : 0), 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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  [ngClass]=\"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 class=\"mb-4\" severity=\"info\" [message]=\"maxFilesReachedText()\" />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div\n      class=\"file d-flex\"\n      [ngClass]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n      [class.fade-out]=\"file.fadeOut\"\n    >\n      <si-icon-next class=\"icon align-self-center ms-6 me-4\" [icon]=\"icons.elementDocument\" />\n      <div class=\"flex-fill overflow-hidden\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-title-2\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n        </div>\n        @if (file.errorText) {\n          <div\n            class=\"error text-truncate d-flex align-items-center\"\n            [class.text-warning]=\"file.status === 'invalid'\"\n            [class.text-danger]=\"file.status === 'error'\"\n          >\n            <si-icon\n              class=\"d-inline-block my-n2 me-2\"\n              size=\"icon-small\"\n              stackedIcon=\"element-state-exclamation-mark smooth-auto\"\n              alt=\"\"\n              [icon]=\"\n                file.status === 'invalid' ? 'element-triangle-filled' : 'element-circle-filled'\n              \"\n              [color]=\"file.status === 'invalid' ? 'status-warning' : 'status-danger'\"\n              [stackedColor]=\"\n                file.status === 'invalid' ? 'status-warning-contrast' : 'status-danger-contrast'\n              \"\n            />\n            {{ file.errorText | translate }}\n            @if (file.httpErrorText) {\n              : {{ file.httpErrorText }}\n            }\n          </div>\n        }\n        @if (!file.errorText) {\n          <div class=\"position-relative\">\n            <div class=\"position-absolute si-caption end-0 mt-n8\">{{ 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 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-sm 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-next [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-sm btn-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon-next [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-sm btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon-next [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-icon\n            class=\"mx-2\"\n            icon=\"element-circle-filled\"\n            color=\"status-success\"\n            stackedIcon=\"element-state-tick smooth-auto\"\n            stackedColor=\"status-success-contrast\"\n            [alt]=\"successTextTitle()\"\n          />\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;block-size:56px}.file{min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiFileDropzoneComponent, selector: "si-file-dropzone", inputs: ["uploadTextFileSelect", "uploadDropText", "maxFileSizeText", "acceptText", "errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["filesAdded"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon", "color", "stackedIcon", "stackedColor", "alt", "size"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", 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  [ngClass]=\"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 class=\"mb-4\" severity=\"info\" [message]=\"maxFilesReachedText()\" />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div\n      class=\"file d-flex\"\n      [ngClass]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n      [class.fade-out]=\"file.fadeOut\"\n    >\n      <si-icon-next class=\"icon align-self-center ms-6 me-4\" [icon]=\"icons.elementDocument\" />\n      <div class=\"flex-fill overflow-hidden\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-title-2\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n        </div>\n        @if (file.errorText) {\n          <div\n            class=\"error text-truncate d-flex align-items-center\"\n            [class.text-warning]=\"file.status === 'invalid'\"\n            [class.text-danger]=\"file.status === 'error'\"\n          >\n            <si-status-icon\n              class=\"icon-small my-n2 me-2\"\n              [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n            />\n            {{ file.errorText | translate }}\n            @if (file.httpErrorText) {\n              : {{ file.httpErrorText }}\n            }\n          </div>\n        }\n        @if (!file.errorText) {\n          <div class=\"position-relative\">\n            <div class=\"position-absolute si-caption end-0 mt-n8\">{{ 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 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-sm 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-next [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-sm btn-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon-next [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-sm btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon-next [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;block-size:56px}.file{min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-file-uploader', imports: [
                         NgClass,
+                        SiStatusIconComponent,
                         SiFileDropzoneComponent,
-                        SiIconComponent,
                         SiIconNextComponent,
                         SiInlineNotificationComponent,
                         SiProgressbarComponent,
                         SiTranslatePipe
-                    ], template: "<si-file-dropzone\n  #dropZone\n  [ngClass]=\"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 class=\"mb-4\" severity=\"info\" [message]=\"maxFilesReachedText()\" />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div\n      class=\"file d-flex\"\n      [ngClass]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n      [class.fade-out]=\"file.fadeOut\"\n    >\n      <si-icon-next class=\"icon align-self-center ms-6 me-4\" [icon]=\"icons.elementDocument\" />\n      <div class=\"flex-fill overflow-hidden\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-title-2\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n        </div>\n        @if (file.errorText) {\n          <div\n            class=\"error text-truncate d-flex align-items-center\"\n            [class.text-warning]=\"file.status === 'invalid'\"\n            [class.text-danger]=\"file.status === 'error'\"\n          >\n            <si-icon\n              class=\"d-inline-block my-n2 me-2\"\n              size=\"icon-small\"\n              stackedIcon=\"element-state-exclamation-mark smooth-auto\"\n              alt=\"\"\n              [icon]=\"\n                file.status === 'invalid' ? 'element-triangle-filled' : 'element-circle-filled'\n              \"\n              [color]=\"file.status === 'invalid' ? 'status-warning' : 'status-danger'\"\n              [stackedColor]=\"\n                file.status === 'invalid' ? 'status-warning-contrast' : 'status-danger-contrast'\n              \"\n            />\n            {{ file.errorText | translate }}\n            @if (file.httpErrorText) {\n              : {{ file.httpErrorText }}\n            }\n          </div>\n        }\n        @if (!file.errorText) {\n          <div class=\"position-relative\">\n            <div class=\"position-absolute si-caption end-0 mt-n8\">{{ 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 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-sm 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-next [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-sm btn-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon-next [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-sm btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon-next [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-icon\n            class=\"mx-2\"\n            icon=\"element-circle-filled\"\n            color=\"status-success\"\n            stackedIcon=\"element-state-tick smooth-auto\"\n            stackedColor=\"status-success-contrast\"\n            [alt]=\"successTextTitle()\"\n          />\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;block-size:56px}.file{min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
+                    ], template: "<si-file-dropzone\n  #dropZone\n  [ngClass]=\"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 class=\"mb-4\" severity=\"info\" [message]=\"maxFilesReachedText()\" />\n}\n\n<div class=\"file-list\">\n  @for (file of files; track file) {\n    <div\n      class=\"file d-flex\"\n      [ngClass]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n      [class.fade-out]=\"file.fadeOut\"\n    >\n      <si-icon-next class=\"icon align-self-center ms-6 me-4\" [icon]=\"icons.elementDocument\" />\n      <div class=\"flex-fill overflow-hidden\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-title-2\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n        </div>\n        @if (file.errorText) {\n          <div\n            class=\"error text-truncate d-flex align-items-center\"\n            [class.text-warning]=\"file.status === 'invalid'\"\n            [class.text-danger]=\"file.status === 'error'\"\n          >\n            <si-status-icon\n              class=\"icon-small my-n2 me-2\"\n              [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n            />\n            {{ file.errorText | translate }}\n            @if (file.httpErrorText) {\n              : {{ file.httpErrorText }}\n            }\n          </div>\n        }\n        @if (!file.errorText) {\n          <div class=\"position-relative\">\n            <div class=\"position-absolute si-caption end-0 mt-n8\">{{ 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 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-sm 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-next [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-sm btn-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon-next [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-sm btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon-next [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;block-size:56px}.file{min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
         }] });
 
 /**
@@ -725,11 +725,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiFileUploaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent], exports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent], exports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiFileUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiFileDropzoneComponent, SiFileUploaderComponent],