@siemens/element-ng 48.2.0 → 48.3.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, computed, viewChild, inject, LOCALE_ID, ChangeDetectionStrategy, Component, numberAttribute, ChangeDetectorRef, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, inject, ElementRef, LOCALE_ID, Directive, computed, viewChild, ChangeDetectionStrategy, Component, numberAttribute, ChangeDetectorRef, NgModule } from '@angular/core';
 import { addIcons, elementUpload, SiIconComponent, elementRedo, elementDocument, elementDelete, elementCancel, SiStatusIconComponent } from '@siemens/element-ng/icon';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { NgClass } from '@angular/common';
@@ -17,43 +17,25 @@ import { retry } from 'rxjs/operators';
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-class SiFileDropzoneComponent {
-    /**
-     * Text or translation key of the input file selector (is combined with the `uploadTextRest`).
-     *
-     * @defaultValue
-     * ```
-     * t(() => $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
-     * ```
-     * t(() => $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
-     * ```
-     * t(() => $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
-     * ```
-     * t(() => $localize`:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`)
-     * ```
-     */
-    acceptText = input(t(() => $localize `:@@SI_FILE_UPLOADER.ACCEPTED_FILE_TYPES:Accepted file types`));
+/**
+ * Directive for handling file uploads with validation for file type and size.
+ *
+ * @example
+ * ```html
+ * <input
+ *   #fileInput
+ *   type="file"
+ *   class="d-none"
+ *   siFileUpload
+ *   [accept]="accept()"
+ *   [maxFileSize]="maxFileSize()"
+ *   [multiple]="true"
+ *   (validFiles)="onFilesAdded($event)"
+ *   (fileError)="onFileError($event)"
+ * />
+ * ```
+ */
+class SiFileUploadDirective {
     /**
      * Text or translation key of message title if incorrect file type is dragged / dropped.
      *
@@ -88,64 +70,130 @@ class SiFileDropzoneComponent {
      * @defaultValue false
      */
     multiple = input(false, { transform: booleanAttribute });
-    /**
-     * Event emitted when files are added.
-     */
-    filesAdded = output();
     /**
      * Enable directory upload.
      *
      * @defaultValue false
      */
     directoryUpload = input(false, { transform: booleanAttribute });
-    maxFileSizeString = computed(() => {
-        const maxFileSize = this.maxFileSize();
-        return maxFileSize ? this.fileSizeToString(maxFileSize) : '';
-    });
-    icons = addIcons({ elementUpload });
-    dragOver = false;
-    fileInput = viewChild.required('fileInput');
+    /**
+     * 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.
+     */
+    validFiles = output();
+    /**
+     * Event emitted when valid files are added.
+     * Also includes invalid files, but with status 'invalid' and an errorText describing why they were ignored.
+     */
+    filesAdded = output();
+    /**
+     * Event emitted when file validation errors occur, including files that were ignored due to size or type.
+     */
+    fileError = output();
+    elementRef = inject((ElementRef));
     locale = inject(LOCALE_ID).toString();
     numberFormat = new Intl.NumberFormat(this.locale, { maximumFractionDigits: 2 });
-    dropHandler(event) {
-        event.preventDefault();
-        if (this.directoryUpload()) {
-            this.handleItems(event.dataTransfer.items);
-        }
-        else {
-            this.handleFiles(event.dataTransfer.files);
-        }
-        this.dragOver = false;
-    }
-    dragOverHandler(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.dragOver = true;
-    }
-    inputEnterHandler() {
-        this.fileInput().nativeElement.click();
-    }
-    inputHandler(event) {
-        this.handleFiles(event.target.files);
+    onInputChange(event) {
+        const inputElement = event.target;
+        this.handleFiles(inputElement.files);
     }
+    /**
+     * Handle files from input or drag and drop
+     */
     handleFiles(files) {
         if (!files?.length) {
             return;
         }
         const newFiles = [];
+        const validFiles = [];
         // eslint-disable-next-line @typescript-eslint/prefer-for-of
         for (let i = 0; i < files.length; i++) {
-            newFiles.push(this.makeUploadFile(files[i]));
+            const uploadFile = this.makeUploadFile(files[i]);
+            newFiles.push(uploadFile);
+            if (uploadFile.status === 'invalid' && uploadFile.errorText) {
+                this.fileError.emit(uploadFile);
+            }
+            else if (uploadFile.status === 'added') {
+                validFiles.push(uploadFile);
+            }
+        }
+        if (newFiles.length > 0) {
+            newFiles.sort((a, b) => a.fileName.localeCompare(b.fileName));
+            this.filesAdded.emit(newFiles);
+        }
+        if (validFiles.length > 0) {
+            validFiles.sort((a, b) => a.fileName.localeCompare(b.fileName));
+            this.validFiles.emit(validFiles);
         }
-        newFiles.sort((a, b) => a.fileName.localeCompare(b.fileName));
-        this.filesAdded.emit(newFiles);
         this.reset();
     }
     /**
-     * Reset all the files inside the native file input (and therefore the dropzone).
+     * Handle directory entries for drag and drop
+     */
+    handleItems(items) {
+        const newFiles = [];
+        let pendingEntries = 0;
+        const traverseFileTree = (item) => {
+            if (item.isFile) {
+                item.file(file => {
+                    const uploadFile = this.makeUploadFile(file);
+                    newFiles.push(uploadFile);
+                    if (uploadFile.status === 'invalid' && uploadFile.errorText) {
+                        this.fileError.emit(uploadFile);
+                    }
+                    if (--pendingEntries === 0) {
+                        if (newFiles.length > 0) {
+                            this.filesAdded.emit(newFiles);
+                        }
+                        const validFiles = newFiles.filter(f => f.status === 'added');
+                        if (validFiles.length > 0) {
+                            this.filesAdded.emit(validFiles);
+                        }
+                        this.reset();
+                    }
+                });
+            }
+            else if (item.isDirectory) {
+                const dirReader = item.createReader();
+                dirReader.readEntries(entries => {
+                    for (const entry of entries) {
+                        pendingEntries++;
+                        traverseFileTree(entry);
+                    }
+                    if (--pendingEntries === 0) {
+                        if (newFiles.length > 0) {
+                            this.filesAdded.emit(newFiles);
+                        }
+                        const validFiles = newFiles.filter(f => f.status === 'added');
+                        if (validFiles.length > 0) {
+                            this.filesAdded.emit(validFiles);
+                        }
+                        this.reset();
+                    }
+                });
+            }
+        };
+        // items is not an array but of type DataTransferItemList
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i].webkitGetAsEntry();
+            if (item) {
+                pendingEntries++;
+                traverseFileTree(item);
+            }
+        }
+    }
+    /**
+     * Reset the file input value
      */
     reset() {
-        this.fileInput().nativeElement.value = '';
+        this.elementRef.nativeElement.value = '';
+    }
+    /**
+     * Trigger the file input click
+     */
+    triggerClick() {
+        this.elementRef.nativeElement.click();
     }
     makeUploadFile(file) {
         const uploadFile = {
@@ -182,7 +230,7 @@ class SiFileDropzoneComponent {
         // Spec says that comma is the delimiter for filetypes. Also allow pipe for compatibility
         return accept.split(/,|\|/).some(acceptedType => {
             // convert accept glob into regex (example: images/* --> images/.*)
-            const acceptedRegexStr = acceptedType.replace('.', '.').replace('*', '.*').trim();
+            const acceptedRegexStr = acceptedType.replace(/\./g, '\\.').replace('*', '.*').trim();
             const acceptedRegex = new RegExp(acceptedRegexStr, 'i');
             // if fileType is set and accepted type looks like a MIME type, match that otherwise extension
             if (fileType && acceptedType.includes('/')) {
@@ -192,12 +240,16 @@ class SiFileDropzoneComponent {
         });
     }
     fileSizeToString(num) {
+        return SiFileUploadDirective.formatFileSize(num, this.numberFormat);
+    }
+    static formatFileSize(num, formatter) {
+        const numberFormat = formatter ?? new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
         let suffix = 'B';
         if (num >= 1_073_741_824) {
             num /= 1_073_741_824;
             suffix = 'GB';
         }
-        if (num >= 1_048_576) {
+        else if (num >= 1_048_576) {
             num /= 1_048_576;
             suffix = 'MB';
         }
@@ -205,51 +257,158 @@ class SiFileDropzoneComponent {
             num /= 1_024;
             suffix = 'KB';
         }
-        return this.numberFormat.format(num) + suffix;
+        return numberFormat.format(num) + suffix;
     }
-    handleItems(items) {
-        const newFiles = [];
-        let pendingEntries = 0;
-        const traverseFileTree = (item) => {
-            if (item.isFile) {
-                item.file(file => {
-                    newFiles.push(this.makeUploadFile(file));
-                    if (--pendingEntries === 0) {
-                        this.filesAdded.emit(newFiles);
-                        this.reset();
-                    }
-                });
-            }
-            else if (item.isDirectory) {
-                const dirReader = item.createReader();
-                dirReader.readEntries(entries => {
-                    for (const entry of entries) {
-                        pendingEntries++;
-                        traverseFileTree(entry);
-                    }
-                    if (--pendingEntries === 0) {
-                        this.filesAdded.emit(newFiles);
-                        this.reset();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", 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: "20.0.6", ngImport: i0, type: SiFileUploadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="file"][siFileUpload]',
+                    standalone: true,
+                    host: {
+                        '[attr.accept]': 'accept()',
+                        '[multiple]': 'directoryUpload() || multiple()',
+                        '[attr.webkitdirectory]': 'directoryUpload() ? "" : null',
+                        '(change)': 'onInputChange($event)'
                     }
-                });
-            }
-        };
-        // items is not an array but of type DataTransferItemList
-        // eslint-disable-next-line @typescript-eslint/prefer-for-of
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i].webkitGetAsEntry();
-            if (item) {
-                pendingEntries++;
-                traverseFileTree(item);
-            }
+                }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiFileDropzoneComponent {
+    /**
+     * Text or translation key of the input file selector (is combined with the `uploadTextRest`).
+     *
+     * @defaultValue
+     * ```
+     * t(() => $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
+     * ```
+     * t(() => $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
+     * ```
+     * t(() => $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
+     * ```
+     * t(() => $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
+     * ```
+     * t(() => $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
+     * ```
+     * t(() => $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
+     */
+    accept = input();
+    /**
+     * Define maximal allowed file size in bytes.
+     */
+    maxFileSize = input();
+    /**
+     * Defines whether the file input allows selecting multiple files.
+     * When {@link directoryUpload} is enabled, this will have no effect.
+     *
+     * @defaultValue false
+     */
+    multiple = input(false, { 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.
+     */
+    filesAdded = output();
+    /**
+     * Event emitted when file validation errors occur, including files that were ignored due to size or type.
+     */
+    fileError = output();
+    /**
+     * Enable directory upload.
+     *
+     * @defaultValue false
+     */
+    directoryUpload = input(false, { transform: booleanAttribute });
+    maxFileSizeString = computed(() => {
+        const maxFileSize = this.maxFileSize();
+        return maxFileSize ? this.fileUploadDirective().fileSizeToString(maxFileSize) : '';
+    });
+    icons = addIcons({ elementUpload });
+    dragOver = false;
+    fileUploadDirective = viewChild.required(SiFileUploadDirective);
+    dropHandler(event) {
+        event.preventDefault();
+        if (this.directoryUpload()) {
+            this.fileUploadDirective().handleItems(event.dataTransfer.items);
         }
+        else {
+            this.fileUploadDirective().handleFiles(event.dataTransfer.files);
+        }
+        this.dragOver = false;
+    }
+    dragOverHandler(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragOver = true;
+    }
+    inputEnterHandler() {
+        this.fileUploadDirective().triggerClick();
+    }
+    onFilesAdded(files) {
+        this.filesAdded.emit(files);
+    }
+    onFileError(error) {
+        this.fileError.emit(error);
+    }
+    /**
+     * Reset all the files inside the native file input (and therefore the dropzone).
+     */
+    reset() {
+        this.fileUploadDirective().reset();
     }
     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 class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        [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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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", fileError: "fileError" }, viewQueries: [{ propertyName: "fileUploadDirective", first: true, predicate: SiFileUploadDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"multiple()\"\n        [directoryUpload]=\"directoryUpload()\"\n        [errorTextFileType]=\"errorTextFileType()\"\n        [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n        (filesAdded)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6\">\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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiFileUploadDirective, selector: "input[type=\"file\"][siFileUpload]", inputs: ["errorTextFileType", "errorTextFileMaxSize", "accept", "maxFileSize", "multiple", "directoryUpload"], outputs: ["validFiles", "filesAdded", "fileError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileDropzoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, 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 class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        [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"] }]
+            args: [{ selector: 'si-file-dropzone', imports: [SiIconComponent, SiTranslatePipe, SiFileUploadDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"drag-and-drop rounded p-6\"\n  [class.drag-over]=\"dragOver\"\n  (drop)=\"dropHandler($event)\"\n  (dragover)=\"dragOverHandler($event)\"\n  (dragleave)=\"dragOver = false\"\n>\n  <si-icon class=\"mb-6 si-display-bold\" [icon]=\"icons.elementUpload\" />\n  <span class=\"drag-and-drop-description si-h5 d-flex\">\n    <span>{{ uploadDropText() | translate }}</span>\n    &nbsp;\n    <label class=\"select-file si-h5 mb-0\">\n      <span tabindex=\"0\" (keydown.enter)=\"inputEnterHandler()\">{{\n        uploadTextFileSelect() | translate\n      }}</span>\n      <input\n        #fileInput\n        type=\"file\"\n        tabindex=\"-1\"\n        class=\"d-none\"\n        siFileUpload\n        [accept]=\"accept()\"\n        [maxFileSize]=\"maxFileSize()\"\n        [multiple]=\"multiple()\"\n        [directoryUpload]=\"directoryUpload()\"\n        [errorTextFileType]=\"errorTextFileType()\"\n        [errorTextFileMaxSize]=\"errorTextFileMaxSize()\"\n        (filesAdded)=\"onFilesAdded($event)\"\n        (fileError)=\"onFileError($event)\"\n        (cancel)=\"$event.stopPropagation()\"\n      />\n    </label>\n  </span>\n  @if (maxFileSize() || accept()) {\n    <div class=\"allowed si-caption mt-6\">\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"] }]
         }] });
 
 /**
@@ -712,7 +871,7 @@ class SiFileUploaderComponent {
         return this.files.reduce((acc, f) => acc + (f.status !== 'invalid' ? 1 : 0), 0);
     }
     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 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-h5\">{{ 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        } @else {\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 [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 [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 [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: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiInlineNotificationComponent, selector: "si-inline-notification", inputs: ["severity", "heading", "message", "action", "translationParams", "embedded"] }, { kind: "component", type: SiProgressbarComponent, selector: "si-progressbar", inputs: ["ariaLabel", "max", "value", "heading", "progress", "height"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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 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-h5\">{{ 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        } @else {\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 [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 [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 [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", "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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderComponent, decorators: [{
             type: Component,
@@ -733,14 +892,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  */
 class SiFileUploaderModule {
     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 ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiFileUploaderModule, imports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective], exports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective] });
     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: "20.0.6", ngImport: i0, type: SiFileUploaderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [SiFileDropzoneComponent, SiFileUploaderComponent],
-                    exports: [SiFileDropzoneComponent, SiFileUploaderComponent]
+                    imports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective],
+                    exports: [SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploadDirective]
                 }]
         }] });
 
@@ -753,5 +912,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiFileDropzoneComponent, SiFileUploaderComponent, SiFileUploaderModule };
+export { SiFileDropzoneComponent, SiFileUploadDirective, SiFileUploaderComponent, SiFileUploaderModule };
 //# sourceMappingURL=siemens-element-ng-file-uploader.mjs.map