@siemens/element-ng 49.14.0 → 51.0.0-rc.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, inject, ElementRef, LOCALE_ID, Directive, computed, viewChild, ChangeDetectionStrategy, Component, numberAttribute, signal, effect, untracked, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, LOCALE_ID, Directive, computed, viewChild, Component, numberAttribute, signal, effect, untracked, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { elementUpload, elementRedo, elementDocument, elementDelete, elementCancel } from '@siemens/element-icons';
 import { addIcons, SiIconComponent, SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
@@ -41,41 +41,45 @@ class SiFileUploadDirective {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
-    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`), ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : []));
+    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : /* istanbul ignore next */ []));
     /**
      * Message or translation key if file exceeds the maximum file size limit.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
-    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`), ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : []));
+    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : /* istanbul ignore next */ []));
     /**
      * Define which file types are suggested in file browser.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
      */
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
     /**
      * Define maximal allowed file size in bytes.
      */
-    maxFileSize = input(...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : []));
+    maxFileSize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
     /**
      * Defines whether the file input allows selecting multiple files.
      * When {@link directoryUpload} is enabled, this will have no effect.
      *
      * @defaultValue false
      */
-    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Enable directory upload.
      *
      * @defaultValue false
      */
-    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : {}), transform: booleanAttribute });
+    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Event emitted when valid files are added.
      * Invalid files (due to size or type) will be ignored and instead the {@link fileError} event will be emitted.
@@ -260,10 +264,10 @@ class SiFileUploadDirective {
         }
         return numberFormat.format(num) + suffix;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiFileUploadDirective, isStandalone: true, selector: "input[type=\"file\"][siFileUpload]", inputs: { 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: { validFiles: "validFiles", filesAdded: "filesAdded", fileError: "fileError" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.accept": "accept()", "multiple": "directoryUpload() || multiple()", "attr.webkitdirectory": "directoryUpload() ? \"\" : null" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: SiFileUploadDirective, isStandalone: true, selector: "input[type=\"file\"][siFileUpload]", inputs: { 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: { validFiles: "validFiles", filesAdded: "filesAdded", fileError: "fileError" }, host: { listeners: { "change": "onInputChange($event)" }, properties: { "attr.accept": "accept()", "multiple": "directoryUpload() || multiple()", "attr.webkitdirectory": "directoryUpload() ? \"\" : null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[type="file"][siFileUpload]',
@@ -282,32 +286,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 class SiFileDropzoneComponent {
     /**
-     * Text or translation key of the input file selector (is combined with the `uploadTextRest`).
+     * Text or translation key of the drag&drop field.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
      * ```
      */
-    uploadTextFileSelect = input(t(() => $localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`), ...(ngDevMode ? [{ debugName: "uploadTextFileSelect" }] : []));
-    /**
-     * Text or translation key of the drag&drop field (is combined with the `uploadTextFileSelect`).
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
-     * ```
-     */
-    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`), ...(ngDevMode ? [{ debugName: "uploadDropText" }] : []));
+    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadDropText" }] : /* istanbul ignore next */ []));
     /**
      * Text or translation key for max file size.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`)
      * ```
      */
-    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`), ...(ngDevMode ? [{ debugName: "maxFileSizeText" }] : []));
+    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFileSizeText" }] : /* istanbul ignore next */ []));
     /**
      * Text or translation key for accepted types.
      *
@@ -316,41 +313,46 @@ class SiFileDropzoneComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`)
      * ```
      */
-    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`), ...(ngDevMode ? [{ debugName: "acceptText" }] : []));
+    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptText" }] : /* istanbul ignore next */ []));
     /**
      * Text or translation key of message title if incorrect file type is dragged / dropped.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
-    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`), ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : []));
+    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : /* istanbul ignore next */ []));
     /**
      * Message or translation key if file exceeds the maximum file size limit.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
-    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`), ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : []));
+    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : /* istanbul ignore next */ []));
     /**
      * Define which file types are suggested in file browser.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
      */
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
     /**
      * Define maximal allowed file size in bytes.
      */
-    maxFileSize = input(...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : []));
+    maxFileSize = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
     /**
      * Defines whether the file input allows selecting multiple files.
      * When {@link directoryUpload} is enabled, this will have no effect.
      *
      * @defaultValue false
      */
-    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Event emitted when valid files are added.
      * Invalid files are also included here, but with status 'invalid' and an errorText describing why they were ignored.
@@ -365,14 +367,16 @@ class SiFileDropzoneComponent {
      *
      * @defaultValue false
      */
-    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : {}), transform: booleanAttribute });
+    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     maxFileSizeString = computed(() => {
         const maxFileSize = this.maxFileSize();
         return maxFileSize ? this.fileUploadDirective().fileSizeToString(maxFileSize) : '';
-    }, ...(ngDevMode ? [{ debugName: "maxFileSizeString" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFileSizeString" }] : /* istanbul ignore next */ []));
     icons = addIcons({ elementUpload });
     dragOver = false;
-    fileUploadDirective = viewChild.required(SiFileUploadDirective);
+    fileUploadDirective = viewChild.required(SiFileUploadDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileUploadDirective" }] : /* istanbul ignore next */ []));
     dropHandler(event) {
         event.preventDefault();
         if (this.directoryUpload()) {
@@ -403,46 +407,39 @@ class SiFileDropzoneComponent {
     reset() {
         this.fileUploadDirective().reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileDropzoneComponent, isStandalone: true, selector: "si-file-dropzone", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileError: "fileError" }, viewQueries: [{ propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadTextFileSelect() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileDropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFileDropzoneComponent, isStandalone: true, selector: "si-file-dropzone", inputs: { uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesAdded: "filesAdded", fileError: "fileError" }, viewQueries: [{ propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadDropText() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, SiTranslatePipe, SiFileUploadDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadTextFileSelect() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"] }]
-        }], propDecorators: { uploadTextFileSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTextFileSelect", required: false }] }], uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }] } });
+            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, SiTranslatePipe, SiFileUploadDirective], template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <button type=\"button\" class=\"select-file si-h5 mb-0\" (click)=\"triggerFileSelect()\">\n      {{ uploadDropText() | translate }}\n    </button>\n    <input\n      #fileInput\n      type=\"file\"\n      tabindex=\"-1\"\n      class=\"d-none\"\n      siFileUpload\n      [accept]=\"accept()\"\n      [maxFileSize]=\"maxFileSize()\"\n      [multiple]=\"multiple()\"\n      [directoryUpload]=\"directoryUpload()\"\n      [errorTextFileType]=\"errorTextFileType()\"\n      [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n      (filesAdded)=\"onFilesAdded($event)\"\n      (fileError)=\"onFileError($event)\"\n      (cancel)=\"$event.stopPropagation()\"\n    />\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6 text-center\">\n      @if (maxFileSize()) {\n        {{ maxFileSizeText() | translate: { maxFileSize: maxFileSizeString() } }}\n      }\n      @if (accept()) {\n        {{ acceptText() | translate: { accept: accept() } }}\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.select-file{margin-block-end:0;padding:0;border:0;background:transparent;cursor:pointer;color:var(--element-ui-0)}.select-file:hover,.select-file:active{text-decoration:underline}.drag-and-drop{background-color:var(--element-base-1);border:1px dashed var(--element-ui-2);display:flex;flex-direction:column;justify-content:center;align-items:center}.drag-and-drop.drag-over{border:1px solid var(--element-focus-default);box-shadow:0 0 0 1px var(--element-focus-default)}\n"] }]
+        }], propDecorators: { uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileError: [{ type: i0.Output, args: ["fileError"] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], fileUploadDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFileUploadDirective), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiFileUploaderComponent {
-    /**
-     * Text of the link to open the file select dialog (follows `uploadDropText`).
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`)
-     * ```
-     */
-    uploadTextFileSelect = input(t(() => $localize `:@@SI_FILE_UPLOADER.FILE_SELECT:click to upload`), ...(ngDevMode ? [{ debugName: "uploadTextFileSelect" }] : []));
     /**
      * Text instructing a user to drop the files inside the dropzone.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`)
      * ```
      */
-    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or`), ...(ngDevMode ? [{ debugName: "uploadDropText" }] : []));
+    uploadDropText = input(t(() => $localize `:@@SI_FILE_UPLOADER.DROP:Drop files here or click to upload`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadDropText" }] : /* istanbul ignore next */ []));
     /**
      * Text to describe the maximum file size.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`)
      * ```
      */
-    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Max. {{maxFileSize}} upload size.`), ...(ngDevMode ? [{ debugName: "maxFileSizeText" }] : []));
+    maxFileSizeText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_SIZE:Upload max. {{maxFileSize}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFileSizeText" }] : /* istanbul ignore next */ []));
     /**
      * Error message shown when the maximum number of files are reached.
      *
@@ -451,7 +448,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Max. {{maxFiles}} files`)
      * ```
      */
-    maxFilesReachedText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Max. {{maxFiles}} files`), ...(ngDevMode ? [{ debugName: "maxFilesReachedText" }] : []));
+    maxFilesReachedText = input(t(() => $localize `:@@SI_FILE_UPLOADER.MAX_FILE_REACHED:Max. {{maxFiles}} files`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFilesReachedText" }] : /* istanbul ignore next */ []));
     /**
      * Text for the accepted file types.
      *
@@ -460,7 +458,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`)
      * ```
      */
-    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`), ...(ngDevMode ? [{ debugName: "acceptText" }] : []));
+    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types: {{accept}}.`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptText" }] : /* istanbul ignore next */ []));
     /**
      * Text used inside the upload button.
      *
@@ -469,7 +468,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD:Upload`)
      * ```
      */
-    uploadButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD:Upload`), ...(ngDevMode ? [{ debugName: "uploadButtonText" }] : []));
+    uploadButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD:Upload`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadButtonText" }] : /* istanbul ignore next */ []));
     /**
      * Text used inside the clear button.
      *
@@ -478,7 +478,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.CLEAR:Clear`)
      * ```
      */
-    clearButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CLEAR:Clear`), ...(ngDevMode ? [{ debugName: "clearButtonText" }] : []));
+    clearButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CLEAR:Clear`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonText" }] : /* istanbul ignore next */ []));
     /**
      * Text shown during the file upload.
      *
@@ -487,7 +488,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOADING:Uploading`)
      * ```
      */
-    uploadingText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOADING:Uploading`), ...(ngDevMode ? [{ debugName: "uploadingText" }] : []));
+    uploadingText = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOADING:Uploading`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadingText" }] : /* istanbul ignore next */ []));
     /**
      * Text shown to remove a file from the file list. Required for a11y.
      *
@@ -496,7 +498,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.REMOVE:Remove`)
      * ```
      */
-    removeButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.REMOVE:Remove`), ...(ngDevMode ? [{ debugName: "removeButtonText" }] : []));
+    removeButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.REMOVE:Remove`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeButtonText" }] : /* istanbul ignore next */ []));
     /**
      * Text of cancel button. Shown during upload. Required for a11y.
      *
@@ -505,7 +508,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.CANCEL:Cancel`)
      * ```
      */
-    cancelButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CANCEL:Cancel`), ...(ngDevMode ? [{ debugName: "cancelButtonText" }] : []));
+    cancelButtonText = input(t(() => $localize `:@@SI_FILE_UPLOADER.CANCEL:Cancel`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelButtonText" }] : /* istanbul ignore next */ []));
     /**
      * Text shown if the upload was successful.
      *
@@ -514,7 +518,8 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`)
      * ```
      */
-    successTextTitle = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`), ...(ngDevMode ? [{ debugName: "successTextTitle" }] : []));
+    successTextTitle = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_COMPLETED:Upload completed`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "successTextTitle" }] : /* istanbul ignore next */ []));
     /**
      * Text shown if the upload failed.
      *
@@ -523,31 +528,34 @@ class SiFileUploaderComponent {
      * t(() => $localize`:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`)
      * ```
      */
-    errorUploadFailed = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`), ...(ngDevMode ? [{ debugName: "errorUploadFailed" }] : []));
+    errorUploadFailed = input(t(() => $localize `:@@SI_FILE_UPLOADER.UPLOAD_FAILED:Upload failed`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorUploadFailed" }] : /* istanbul ignore next */ []));
     /**
      * On failed upload, show the error received from the server.
      *
      * @defaultValue false
      */
-    showHttpError = input(false, { ...(ngDevMode ? { debugName: "showHttpError" } : {}), transform: booleanAttribute });
+    showHttpError = input(false, { ...(ngDevMode ? { debugName: "showHttpError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Text shown to indicate that an incorrect file type was added to file list.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`)
      * ```
      */
-    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Incorrect file type selected`), ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : []));
+    errorTextFileType = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_TYPE:Invalid file type`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileType" }] : /* istanbul ignore next */ []));
     /**
      * Message or translation key if file exceeds the maximum file size limit.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`)
+     * t(() => $localize`:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`)
      * ```
      */
-    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:File exceeds allowed maximum size of {{maxFileSize}}`), ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : []));
+    errorTextFileMaxSize = input(t(() => $localize `:@@SI_FILE_UPLOADER.ERROR_FILE_SIZE_EXCEEDED:Max. {{maxFileSize}}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorTextFileMaxSize" }] : /* istanbul ignore next */ []));
     /**
      * Config for HTTP request to upload file.
      *
@@ -568,48 +576,50 @@ class SiFileUploaderComponent {
         url: '',
         fieldName: 'upload_file',
         responseType: 'json'
-    }, ...(ngDevMode ? [{ debugName: "uploadConfig" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadConfig" }] : /* istanbul ignore next */ []));
     /**
      * Define which file types are suggested in file browser.
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
      */
-    accept = input(...(ngDevMode ? [undefined, { debugName: "accept" }] : []));
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
     /**
      * Define maximal allowed file size in bytes.
      *
      * @defaultValue undefined
      */
-    maxFileSize = input(undefined, { ...(ngDevMode ? { debugName: "maxFileSize" } : {}), transform: numberAttribute });
+    maxFileSize = input(undefined, { ...(ngDevMode ? { debugName: "maxFileSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Define maximal allowed number of files.
      * When {@link directoryUpload} is enabled, this will have no effect.
      * @defaultValue 10
      */
-    maxFiles = input(10, { ...(ngDevMode ? { debugName: "maxFiles" } : {}), transform: numberAttribute });
+    maxFiles = input(10, { ...(ngDevMode ? { debugName: "maxFiles" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Maximum number of concurrent uploads.
      *
      * @defaultValue 3
      */
-    maxConcurrentUploads = input(3, { ...(ngDevMode ? { debugName: "maxConcurrentUploads" } : {}), transform: numberAttribute });
+    maxConcurrentUploads = input(3, { ...(ngDevMode ? { debugName: "maxConcurrentUploads" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Numbers of retries for failed uploads.
      *
      * @defaultValue 0
      */
-    retries = input(0, { ...(ngDevMode ? { debugName: "retries" } : {}), transform: numberAttribute });
+    retries = input(0, { ...(ngDevMode ? { debugName: "retries" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Auto-upload mode - automatically start upload once files are added.
      *
      * @defaultValue false
      */
-    autoUpload = input(false, { ...(ngDevMode ? { debugName: "autoUpload" } : {}), transform: booleanAttribute });
+    autoUpload = input(false, { ...(ngDevMode ? { debugName: "autoUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Disable the upload button.
      *
      * @defaultValue false
      */
-    disableUpload = input(false, { ...(ngDevMode ? { debugName: "disableUpload" } : {}), transform: booleanAttribute });
+    disableUpload = input(false, { ...(ngDevMode ? { debugName: "disableUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Enable directory upload mode.
      * When enabled, the file input will accept directories and upload all files within as a flat list.
@@ -620,7 +630,7 @@ class SiFileUploaderComponent {
      *
      * @defaultValue false
      */
-    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : {}), transform: booleanAttribute });
+    directoryUpload = input(false, { ...(ngDevMode ? { debugName: "directoryUpload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Emits when a user press cancel during upload. The event provides the file details.
      */
@@ -640,12 +650,16 @@ class SiFileUploaderComponent {
         elementDocument,
         elementRedo
     });
-    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
     pending = 0;
     uploading = 0;
-    uploadEnabled = signal(false, ...(ngDevMode ? [{ debugName: "uploadEnabled" }] : []));
-    maxFilesReached = signal(false, ...(ngDevMode ? [{ debugName: "maxFilesReached" }] : []));
-    dropZone = viewChild.required('dropZone');
+    uploadEnabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadEnabled" }] : /* istanbul ignore next */ []));
+    maxFilesReached = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFilesReached" }] : /* istanbul ignore next */ []));
+    dropZone = viewChild.required('dropZone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropZone" }] : /* istanbul ignore next */ []));
     http = inject(HttpClient, { optional: true });
     constructor() {
         effect(() => {
@@ -870,10 +884,10 @@ 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: "21.0.8", ngImport: i0, type: SiFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiFileUploaderComponent, isStandalone: true, selector: "si-file-uploader", inputs: { uploadTextFileSelect: { classPropertyName: "uploadTextFileSelect", publicName: "uploadTextFileSelect", isSignal: true, isRequired: false, transformFunction: null }, uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, maxFilesReachedText: { classPropertyName: "maxFilesReachedText", publicName: "maxFilesReachedText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, uploadButtonText: { classPropertyName: "uploadButtonText", publicName: "uploadButtonText", isSignal: true, isRequired: false, transformFunction: null }, clearButtonText: { classPropertyName: "clearButtonText", publicName: "clearButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadingText: { classPropertyName: "uploadingText", publicName: "uploadingText", isSignal: true, isRequired: false, transformFunction: null }, removeButtonText: { classPropertyName: "removeButtonText", publicName: "removeButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, successTextTitle: { classPropertyName: "successTextTitle", publicName: "successTextTitle", isSignal: true, isRequired: false, transformFunction: null }, errorUploadFailed: { classPropertyName: "errorUploadFailed", publicName: "errorUploadFailed", isSignal: true, isRequired: false, transformFunction: null }, showHttpError: { classPropertyName: "showHttpError", publicName: "showHttpError", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, retries: { classPropertyName: "retries", publicName: "retries", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, disableUpload: { classPropertyName: "disableUpload", publicName: "disableUpload", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadCanceled: "uploadCanceled", uploadCompleted: "uploadCompleted", filesChanges: "filesChanges" }, viewQueries: [{ propertyName: "dropZone", first: true, predicate: ["dropZone"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "component", type: SiFileDropzoneComponent, selector: "si-file-dropzone", inputs: ["uploadTextFileSelect", "uploadDropText", "maxFileSizeText", "acceptText", "errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["filesAdded", "fileError"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiProgressbarComponent, selector: "si-progressbar", inputs: ["ariaLabel", "max", "value", "heading", "progress", "height"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiFileUploaderComponent, isStandalone: true, selector: "si-file-uploader", inputs: { uploadDropText: { classPropertyName: "uploadDropText", publicName: "uploadDropText", isSignal: true, isRequired: false, transformFunction: null }, maxFileSizeText: { classPropertyName: "maxFileSizeText", publicName: "maxFileSizeText", isSignal: true, isRequired: false, transformFunction: null }, maxFilesReachedText: { classPropertyName: "maxFilesReachedText", publicName: "maxFilesReachedText", isSignal: true, isRequired: false, transformFunction: null }, acceptText: { classPropertyName: "acceptText", publicName: "acceptText", isSignal: true, isRequired: false, transformFunction: null }, uploadButtonText: { classPropertyName: "uploadButtonText", publicName: "uploadButtonText", isSignal: true, isRequired: false, transformFunction: null }, clearButtonText: { classPropertyName: "clearButtonText", publicName: "clearButtonText", isSignal: true, isRequired: false, transformFunction: null }, uploadingText: { classPropertyName: "uploadingText", publicName: "uploadingText", isSignal: true, isRequired: false, transformFunction: null }, removeButtonText: { classPropertyName: "removeButtonText", publicName: "removeButtonText", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, successTextTitle: { classPropertyName: "successTextTitle", publicName: "successTextTitle", isSignal: true, isRequired: false, transformFunction: null }, errorUploadFailed: { classPropertyName: "errorUploadFailed", publicName: "errorUploadFailed", isSignal: true, isRequired: false, transformFunction: null }, showHttpError: { classPropertyName: "showHttpError", publicName: "showHttpError", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileType: { classPropertyName: "errorTextFileType", publicName: "errorTextFileType", isSignal: true, isRequired: false, transformFunction: null }, errorTextFileMaxSize: { classPropertyName: "errorTextFileMaxSize", publicName: "errorTextFileMaxSize", isSignal: true, isRequired: false, transformFunction: null }, uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentUploads: { classPropertyName: "maxConcurrentUploads", publicName: "maxConcurrentUploads", isSignal: true, isRequired: false, transformFunction: null }, retries: { classPropertyName: "retries", publicName: "retries", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, disableUpload: { classPropertyName: "disableUpload", publicName: "disableUpload", isSignal: true, isRequired: false, transformFunction: null }, directoryUpload: { classPropertyName: "directoryUpload", publicName: "directoryUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploadCanceled: "uploadCanceled", uploadCompleted: "uploadCompleted", filesChanges: "filesChanges" }, viewQueries: [{ propertyName: "dropZone", first: true, predicate: ["dropZone"], descendants: true, isSignal: true }], ngImport: i0, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"], dependencies: [{ kind: "component", type: SiStatusIconComponent, selector: "si-status-icon", inputs: ["status"] }, { kind: "component", type: SiFileDropzoneComponent, selector: "si-file-dropzone", inputs: ["uploadDropText", "maxFileSizeText", "acceptText", "errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["filesAdded", "fileError"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiProgressbarComponent, selector: "si-progressbar", inputs: ["ariaLabel", "max", "value", "heading", "progress", "height"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-file-uploader', imports: [
                         SiStatusIconComponent,
@@ -882,19 +896,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiInlineNotificationComponent,
                         SiProgressbarComponent,
                         SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.Default, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadTextFileSelect]=\"uploadTextFileSelect()\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { uploadTextFileSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadTextFileSelect", required: false }] }], uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], maxFilesReachedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFilesReachedText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], uploadButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonText", required: false }] }], clearButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonText", required: false }] }], uploadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingText", required: false }] }], removeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButtonText", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], successTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "successTextTitle", required: false }] }], errorUploadFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorUploadFailed", required: false }] }], showHttpError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHttpError", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], retries: [{ type: i0.Input, args: [{ isSignal: true, alias: "retries", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], disableUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableUpload", required: false }] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], uploadCanceled: [{ type: i0.Output, args: ["uploadCanceled"] }], uploadCompleted: [{ type: i0.Output, args: ["uploadCompleted"] }], filesChanges: [{ type: i0.Output, args: ["filesChanges"] }], dropZone: [{ type: i0.ViewChild, args: ['dropZone', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<si-file-dropzone\n  #dropZone\n  [class]=\"autoUpload() ? 'mb-8' : 'mb-4'\"\n  [uploadDropText]=\"uploadDropText()\"\n  [multiple]=\"maxFiles() > 1\"\n  [directoryUpload]=\"directoryUpload()\"\n  [maxFileSizeText]=\"maxFileSizeText()\"\n  [acceptText]=\"acceptText()\"\n  [errorTextFileType]=\"errorTextFileType()\"\n  [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n  [accept]=\"accept()\"\n  [maxFileSize]=\"maxFileSize()\"\n  (filesAdded)=\"handleFiles($event)\"\n/>\n\n@if (maxFilesReached()) {\n  <si-inline-notification\n    class=\"mb-4\"\n    severity=\"info\"\n    [message]=\"maxFilesReachedText()\"\n    [translationParams]=\"{ maxFiles: maxFiles() }\"\n  />\n}\n\n<div class=\"file-list\">\n  @for (file of files(); track file) {\n    <div class=\"file\" [class.fade-out]=\"file.fadeOut\">\n      <si-icon class=\"icon align-self-center ms-6 me-4\" icon=\"element-document\" />\n      <div class=\"flex-fill overflow-hidden mt-6\">\n        <div class=\"file-info\">\n          <div class=\"file-name text-truncate si-h5\">{{ file.fileName }}</div>\n          <div class=\"file-size text-secondary\">{{ file.size }}</div>\n          @if (file.errorText) {\n            <div\n              class=\"d-inline-flex gap-2 error text-truncate\"\n              [class.text-warning]=\"file.status === 'invalid'\"\n              [class.text-danger]=\"file.status === 'error'\"\n            >\n              <si-status-icon\n                class=\"icon-sm\"\n                [status]=\"file.status === 'invalid' ? 'warning' : 'danger'\"\n              />\n              {{ file.errorText | translate: file.errorParams }}\n              @if (file.httpErrorText) {\n                : {{ file.httpErrorText }}\n              }\n            </div>\n          } @else {\n            <div class=\"position-relative mt-1 mb-5\">\n              <div class=\"position-absolute end-0 progress-value\">{{ file.progress }} %</div>\n              <si-progressbar\n                height=\"small\"\n                [value]=\"file.progress\"\n                [ariaLabel]=\"uploadingText() | translate\"\n              />\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"status align-self-center text-nowrap ps-4 pe-6\">\n        @if (file.status === 'error') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary me-4\"\n            [disabled]=\"!uploadEnabled()\"\n            [title]=\"uploadButtonText() | translate\"\n            [attr.aria-label]=\"uploadButtonText() | translate\"\n            (click)=\"retryUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementRedo\" />\n          </button>\n        }\n        @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary-ghost\"\n            [title]=\"removeButtonText() | translate\"\n            [attr.aria-label]=\"removeButtonText() | translate\"\n            (click)=\"removeFile($index)\"\n          >\n            <si-icon [icon]=\"icons.elementDelete\" />\n          </button>\n        }\n        @if (file.status === 'uploading' || file.status === 'queued') {\n          <button\n            type=\"button\"\n            class=\"btn btn-circle btn-tertiary\"\n            [title]=\"cancelButtonText() | translate\"\n            [attr.aria-label]=\"cancelButtonText() | translate\"\n            (click)=\"cancelUpload(file)\"\n          >\n            <si-icon [icon]=\"icons.elementCancel\" />\n          </button>\n        }\n        @if (file.status === 'success') {\n          <si-status-icon class=\"icon mx-2\" status=\"success\" />\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (!autoUpload()) {\n  <div class=\"buttons text-end\">\n    <button\n      type=\"button\"\n      class=\"btn btn-secondary me-4\"\n      [disabled]=\"pending || !files().length\"\n      (click)=\"reset()\"\n      >{{ clearButtonText() | translate }}</button\n    >\n    <button\n      type=\"button\"\n      class=\"btn btn-primary\"\n      [disabled]=\"!uploadEnabled()\"\n      (click)=\"fileUpload()\"\n      >{{ uploadButtonText() | translate }}</button\n    >\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:stretch}:host>*{min-inline-size:320px;max-inline-size:680px;inline-size:100%;align-self:center}.file-list{overflow-y:auto}.file-info{display:flex;justify-content:center;flex-direction:column}.progress-value{inset-block-start:-1lh}.file{display:flex;position:relative;margin-block-end:8px;min-block-size:72px;transition:opacity calc(.5s * var(--element-animations-enabled, 1))}.fade-out{opacity:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { uploadDropText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadDropText", required: false }] }], maxFileSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeText", required: false }] }], maxFilesReachedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFilesReachedText", required: false }] }], acceptText: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptText", required: false }] }], uploadButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadButtonText", required: false }] }], clearButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonText", required: false }] }], uploadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingText", required: false }] }], removeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeButtonText", required: false }] }], cancelButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButtonText", required: false }] }], successTextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "successTextTitle", required: false }] }], errorUploadFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorUploadFailed", required: false }] }], showHttpError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHttpError", required: false }] }], errorTextFileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileType", required: false }] }], errorTextFileMaxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTextFileMaxSize", required: false }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxConcurrentUploads: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxConcurrentUploads", required: false }] }], retries: [{ type: i0.Input, args: [{ isSignal: true, alias: "retries", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], disableUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableUpload", required: false }] }], directoryUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "directoryUpload", required: false }] }], uploadCanceled: [{ type: i0.Output, args: ["uploadCanceled"] }], uploadCompleted: [{ type: i0.Output, args: ["uploadCompleted"] }], filesChanges: [{ type: i0.Output, args: ["filesChanges"] }], dropZone: [{ type: i0.ViewChild, args: ['dropZone', { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
 class SiFileUploaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective], exports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective], exports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiFileUploaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiFileUploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective],