@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/cjs/ds-file-upload.cjs.entry.js

@@ -0,0 +1,516 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-CqInh7Vc.js');
+var tslib_es6 = require('./tslib.es6-BIB10hMZ.js');
+var array = require('./array-CYn4ALBt.js');
+var formControl = require('./form-control-B4Qf8fg-.js');
+var field_util = require('./field.util-g9nhtuZH.js');
+var input_interfaces = require('./input.interfaces-YapUUaRx.js');
+var type = require('./type-Br_NbeTX.js');
+var oneOf = require('./one-of-BotLfpAZ.js');
+var config_decorator = require('./config.decorator-C64wi-MA.js');
+require('./_commonjsHelpers-DVhpm0hL.js');
+require('./_getTag-DxZgmSPS.js');
+require('./isObjectLike-BNz6hnAu.js');
+require('./isArray-DvQst6zQ.js');
+require('./isNil-DuJ_OV5R.js');
+require('./aria-C3Tx6AHY.js');
+require('./label.i18n-C00ZY0P9.js');
+require('./create-validator-decorator-Ctd288ve.js');
+require('./config.utils-BhWbrVRz.js');
+
+const toFileArray = (list) => {
+    return Array.from(list !== null && list !== void 0 ? list : []);
+};
+const toFileList = (files) => {
+    const dataTransfer = new DataTransfer();
+    if (files && files.length > 0) {
+        files.forEach(file => dataTransfer.items.add(file));
+    }
+    return dataTransfer.files;
+};
+
+const validateFileArray = (state, files, fileOptions) => {
+    const validFiles = [];
+    const newState = [...state];
+    const invalidFiles = [];
+    for (let index = 0; index < files.length; index++) {
+        const file = files[index];
+        if (file) {
+            const reasons = [];
+            if (fileOptions.accept && fileOptions.accept.split(' ').join('').split(',').indexOf(file.type) === -1) {
+                reasons.push('BAD_EXTENSION');
+            }
+            if (fileOptions.maxFileSize !== undefined && file.size > fileOptions.maxFileSize) {
+                reasons.push('FILE_TOO_BIG');
+            }
+            const stateBundleSize = newState.map(f => f.size).reduce((a, b) => a + b, 0);
+            const bundleSize = stateBundleSize + file.size;
+            if (fileOptions.maxBundleSize !== undefined && bundleSize > fileOptions.maxBundleSize) {
+                reasons.push('FILE_SIZE_SUM_TOO_BIG');
+            }
+            const amountOfFiles = newState.length + 1;
+            if (fileOptions.maxFiles !== undefined && amountOfFiles > fileOptions.maxFiles) {
+                reasons.push('TOO_MANY_FILES');
+            }
+            const areFilesEqual = (fileA, fileB) => fileA.size === fileB.size &&
+                fileA.name === fileB.name &&
+                fileA.type === fileB.type &&
+                fileA.lastModified === fileB.lastModified;
+            const duplicatedFiles = state.filter(f => areFilesEqual(f, file));
+            if (duplicatedFiles.length > 0) {
+                reasons.push('DUPLICATED_FILE');
+            }
+            if (reasons.length > 0) {
+                invalidFiles.push({ file, reasons });
+            }
+            else {
+                newState.push(file);
+                validFiles.push(file);
+            }
+        }
+    }
+    return {
+        validFiles: validFiles,
+        invalidFiles: invalidFiles,
+    };
+};
+
+const formatFileSize = (bytes) => {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+
+const i18nDsFileUpload = {
+    en: {
+        dropZoneLabel: 'Drop files or browse',
+        selectedFilesLabel: 'Selected files',
+        removeFileLabel: 'Remove',
+    },
+    de: {
+        dropZoneLabel: 'Dateien ablegen oder durchsuchen',
+        selectedFilesLabel: 'Ausgewählte Dateien',
+        removeFileLabel: 'Entfernen',
+    },
+    fr: {
+        dropZoneLabel: 'Déposez les fichiers ou parcourez',
+        selectedFilesLabel: 'Fichiers sélectionnés',
+        removeFileLabel: 'Supprimer',
+    },
+    it: {
+        dropZoneLabel: 'Rilascia i file o sfoglia',
+        selectedFilesLabel: 'File selezionati',
+        removeFileLabel: 'Rimuovi',
+    },
+    nl: {
+        dropZoneLabel: 'Zet bestanden neer of blader',
+        selectedFilesLabel: 'Geselecteerde bestanden',
+        removeFileLabel: 'Verwijderen',
+    },
+    es: {
+        dropZoneLabel: 'Suelta archivos o busca',
+        selectedFilesLabel: 'Archivos seleccionados',
+        removeFileLabel: 'Eliminar',
+    },
+    pl: {
+        dropZoneLabel: 'Upuść pliki lub przeglądaj',
+        selectedFilesLabel: 'Wybrane pliki',
+        removeFileLabel: 'Usuń',
+    },
+    pt: {
+        dropZoneLabel: 'Solte ficheiros ou procure',
+        selectedFilesLabel: 'Ficheiros selecionados',
+        removeFileLabel: 'Remover',
+    },
+    sv: {
+        dropZoneLabel: 'Släpp filer eller bläddra',
+        selectedFilesLabel: 'Valda filer',
+        removeFileLabel: 'Ta bort',
+    },
+    fi: {
+        dropZoneLabel: 'Pudota tiedostot tai selaa',
+        selectedFilesLabel: 'Valitut tiedostot',
+        removeFileLabel: 'Poista',
+    },
+};
+
+const fileUploadHostCss = () => `:host{--_file-upload-label-family:var(--file-upload-label-family, var(--mod-file-upload-label-family, var(--ds-alias-text-family-body)));--_file-upload-label-weight:var(--file-upload-label-weight, var(--mod-file-upload-label-weight, var(--ds-alias-text-weight-bold)));--_file-upload-label-size:var(--file-upload-label-size, var(--mod-file-upload-label-size, var(--ds-alias-text-size-base-device)));--_file-upload-label-line-height:var(--file-upload-label-line-height, var(--mod-file-upload-label-line-height, var(--ds-alias-text-line-height-body)));--_file-upload-drop-zone-border-color:var(--file-upload-drop-zone-border-color, var(--mod-file-upload-drop-zone-border-color, var(--ds-alias-border-color-grey)));--_file-upload-drop-zone-background:var(--file-upload-drop-zone-background, var(--mod-file-upload-drop-zone-background, var(--ds-alias-background-color-transparent)));--_file-upload-drop-zone-hover-background:var(--file-upload-drop-zone-hover-background, var(--mod-file-upload-drop-zone-hover-background, var(--ds-alias-background-color-grey-lighter)));--_file-upload-drop-zone-hover-border-color:var(--file-upload-drop-zone-hover-border-color, var(--mod-file-upload-drop-zone-hover-border-color, var(--ds-alias-border-color-primary)));--_file-upload-drop-zone-hover-text-color:var(--file-upload-drop-zone-hover-text-color, var(--mod-file-upload-drop-zone-hover-text-color, var(--ds-alias-text-color-primary-hover)));--_file-upload-drop-zone-active-background:var(--file-upload-drop-zone-active-background, var(--mod-file-upload-drop-zone-active-background, var(--ds-alias-background-color-grey-light)));--_file-upload-drop-zone-active-border-color:var(--file-upload-drop-zone-active-border-color, var(--mod-file-upload-drop-zone-active-border-color, var(--ds-alias-border-color-primary)));--_file-upload-drop-zone-active-text-color:var(--file-upload-drop-zone-active-text-color, var(--mod-file-upload-drop-zone-active-text-color, var(--ds-alias-text-color-primary-active)));--_file-upload-drop-zone-focus-border-color:var(--file-upload-drop-zone-focus-border-color, var(--mod-file-upload-drop-zone-focus-border-color, var(--ds-alias-border-focus)));--_file-upload-drop-zone-disabled-background:var(--file-upload-drop-zone-disabled-background, var(--mod-file-upload-drop-zone-disabled-background, var(--ds-alias-background-color-grey-light)));--_file-upload-drop-zone-disabled-border-color:var(--file-upload-drop-zone-disabled-border-color, var(--mod-file-upload-drop-zone-disabled-border-color, var(--ds-button-color-disabled-base-text)));--_file-upload-drop-zone-disabled-text-color:var(--file-upload-drop-zone-disabled-text-color, var(--mod-file-upload-drop-zone-disabled-text-color, var(--ds-button-color-disabled-base-text)));--_file-upload-file-list-background:var(--file-upload-file-list-background, var(--mod-file-upload-file-list-background, var(--ds-alias-background-color-grey-light)));--_file-upload-file-name-color:var(--file-upload-file-name-color, var(--mod-file-upload-file-name-color, var(--ds-alias-text-color-primary)));--_file-upload-file-size-color:var(--file-upload-file-size-color, var(--mod-file-upload-file-size-color, var(--ds-alias-text-color-primary-light)));--_file-upload-disabled-icon-color:var(--file-upload-disabled-icon-color, var(--mod-file-upload-disabled-icon-color, var(--ds-button-color-disabled-base-text)));--_file-upload-disabled-text-color:var(--file-upload-disabled-text-color, var(--mod-file-upload-disabled-text-color, var(--ds-button-color-disabled-base-text)));--_file-upload-family:var(--file-upload-family, var(--mod-file-upload-family, var(--ds-form-control-family)));--_file-upload-weight:var(--file-upload-weight, var(--mod-file-upload-weight, var(--ds-form-control-weight)));--_file-upload-line-height:var(--file-upload-line-height, var(--mod-file-upload-line-height, var(--ds-form-control-line-height)));--_file-upload-size:var(--file-upload-size, var(--mod-file-upload-size, var(--ds-form-control-size-device)));--_file-upload-color:var(--file-upload-color, var(--mod-file-upload-color, var(--ds-form-control-color-value-base)));--_file-upload-placeholder:var(--file-upload-placeholder, var(--mod-file-upload-placeholder, var(--ds-form-control-color-placeholder-base)));--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)))}:host{position:relative;display:block;width:100%}:host #input{border:none;outline:none;-webkit-box-shadow:none;box-shadow:none;position:relative;background:inherit;-ms-flex:1;flex:1;color:var(--_file-upload-color);font-family:var(--_file-upload-family);font-weight:var(--_file-upload-weight);font-size:var(--_file-upload-size);line-height:var(--_file-upload-line-height);border-radius:var(--_file-upload-container-radius)}:host #input::-webkit-input-placeholder{color:var(--_file-upload-placeholder)}:host #input::-moz-placeholder{color:var(--_file-upload-placeholder)}:host #input:-ms-input-placeholder{color:var(--_file-upload-placeholder)}:host #input::-ms-input-placeholder{color:var(--_file-upload-placeholder)}:host #input::placeholder{color:var(--_file-upload-placeholder)}:host #input::-moz-placeholder{color:var(--_file-upload-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_file-upload-placeholder)}:host #input:-moz-placeholder{color:var(--_file-upload-placeholder)}:host #input:-ms-input-placeholder{color:var(--_file-upload-placeholder)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color:var(--_form-description-color)}:host input[type=file],:host #drop-zone-status{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host #drop-zone{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:1rem;width:100%;padding:1rem;border:2px dashed var(--_file-upload-drop-zone-border-color);border-radius:var(--ds-alias-radius-base);background-color:var(--_file-upload-drop-zone-background)}@media (hover: hover)and (pointer: fine){:host #drop-zone:hover:not(.is-disabled){background-color:var(--_file-upload-drop-zone-hover-background);color:var(--_file-upload-drop-zone-hover-text-color);--icon-color:var(--_file-upload-drop-zone-hover-text-color);cursor:pointer}}:host #drop-zone:active:not(.is-disabled){border-color:var(--_file-upload-drop-zone-active-border-color);background-color:var(--_file-upload-drop-zone-active-background);color:var(--_file-upload-drop-zone-active-text-color);--icon-color:var(--_file-upload-drop-zone-active-text-color)}:host #drop-zone:focus-within:not(.is-disabled):not(:active){border-color:var(--_file-upload-drop-zone-focus-border-color)}:host #drop-zone.is-disabled{background-color:var(--_file-upload-drop-zone-disabled-background);border-color:var(--_file-upload-drop-zone-disabled-border-color);color:var(--_file-upload-drop-zone-disabled-text-color);--icon-color:var(--_file-upload-drop-zone-disabled-text-color);cursor:default}:host #drop-zone-placeholder{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:1rem;font-family:var(--ds-alias-text-family-base);font-weight:var(--ds-alias-text-weight-bold);font-size:var(--ds-alias-text-size-base-device)}:host #file-list{margin-block:1rem;display:grid;gap:.5rem}:host #file-list li{padding:.5rem 1rem;border-radius:var(--ds-alias-radius-base);background-color:var(--_file-upload-file-list-background);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}:host #file-list li .stack{width:100%}:host #file-list li .file-name{color:var(--_file-upload-file-name-color);font-weight:var(--ds-alias-text-weight-bold);font-size:var(--ds-alias-text-size-base-device)}:host #file-list li .file-size{color:var(--_file-upload-file-size-color);font-size:var(--ds-alias-text-size-xs-device)}:host #file-list.is-disabled li{--icon-color:var(--_file-upload-disabled-icon-color)}:host #file-list.is-disabled li .file-name{color:var(--_file-upload-disabled-text-color)}:host #file-list.is-disabled li .file-size{color:var(--_file-upload-disabled-text-color)}:host(.is-danger){--mod-file-upload-description-color:var(--ds-input-description-color-danger);--mod-file-upload-drop-zone-border-color:var(--ds-input-container-color-danger-border);--mod-file-upload-drop-zone-hover-border-color:var(--ds-input-container-color-danger-border);--mod-file-upload-drop-zone-active-border-color:var(--ds-input-container-color-danger-border)}:host(.is-success){--mod-file-upload-description-color:var(--ds-input-description-color-success);--mod-file-upload-drop-zone-border-color:var(--ds-input-container-color-success-border);--mod-file-upload-drop-zone-hover-border-color:var(--ds-input-container-color-success-border);--mod-file-upload-drop-zone-active-border-color:var(--ds-input-container-color-success-border)}:host(.is-warning){--mod-file-upload-description-color:var(--ds-input-description-color-warning);--mod-file-upload-drop-zone-border-color:var(--ds-input-container-color-warning-border);--mod-file-upload-drop-zone-hover-border-color:var(--ds-input-container-color-warning-border);--mod-file-upload-drop-zone-active-border-color:var(--ds-input-container-color-warning-border)}`;
+
+const FileUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsChange = index.createEvent(this, "dsChange");
+        this.dsFilesAdded = index.createEvent(this, "dsFilesAdded");
+        this.dsFilesRemoved = index.createEvent(this, "dsFilesRemoved");
+        this.dsRejectedFile = index.createEvent(this, "dsRejectedFile");
+        this.dsInputClick = index.createEvent(this, "dsInputClick");
+        this.dsBlur = index.createEvent(this, "dsBlur");
+        this.dsFocus = index.createEvent(this, "dsFocus");
+        this.fileUploadId = `ds-file-upload-${FileUploadIds++}`;
+        this.initialValue = [];
+        this.files = [];
+        this.focused = false;
+        this.isDragOver = false;
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the file upload (array of selected files).
+         */
+        this.value = [];
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.fileUploadId;
+        /**
+         * The label of the file upload, displayed in the drop zone area.
+         */
+        this.label = 'Choose or drop a file...';
+        /**
+         * The text displayed inside the drop zone. Defaults to localized "Drag and drop or choose file(s) to upload".
+         */
+        this.dropZoneLabel = '';
+        /**
+         * The description of the file upload, displayed below the drop zone.
+         */
+        this.description = '';
+        /**
+         * The text to display when the file upload is in an invalid state.
+         */
+        this.invalidText = '';
+        /**
+         * Defines the color of the file upload. The default value is `primary`.
+         */
+        this.color = 'primary';
+        /**
+         * If `true` the component gets an invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true` multiple file upload is possible.
+         */
+        this.multiple = true;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not be mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the file upload is disabled and shows a spinner.
+         */
+        this.loading = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * Accepted MIME-Types like `image/png,image/jpeg`.
+         */
+        this.accept = '';
+        /**
+         * If `true` below the drop-zone area it generates a file list.
+         */
+        this.hasFileList = true;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid.
+         */
+        this.autoInvalidOff = false;
+        /**
+         * PRIVATE METHODS
+         * ------------------------------------------------------
+         */
+        this.addDragListeners = () => {
+            if (this.dropZoneEl) {
+                this.dropZoneEl.addEventListener('dragenter', this.handleDragenter);
+                this.dropZoneEl.addEventListener('dragover', this.handleDragover);
+                this.dropZoneEl.addEventListener('dragleave', this.handleDragleave);
+                this.dropZoneEl.addEventListener('drop', this.handleDrop);
+            }
+        };
+        this.removeDragListeners = () => {
+            if (this.dropZoneEl) {
+                this.dropZoneEl.removeEventListener('dragenter', this.handleDragenter);
+                this.dropZoneEl.removeEventListener('dragover', this.handleDragover);
+                this.dropZoneEl.removeEventListener('dragleave', this.handleDragleave);
+                this.dropZoneEl.removeEventListener('drop', this.handleDrop);
+            }
+        };
+        this.handleFiles = (fileList) => {
+            const files = toFileArray(fileList);
+            const validatedFiles = validateFileArray(this.files, files, {
+                accept: this.accept,
+                maxFileSize: this.maxFileSize,
+                maxBundleSize: this.maxBundleSize,
+                maxFiles: this.maxFiles,
+            });
+            if (validatedFiles.invalidFiles.length > 0) {
+                validatedFiles.invalidFiles.forEach(file => this.dsRejectedFile.emit(file));
+            }
+            if (validatedFiles.validFiles.length > 0) {
+                this.files = [...this.files, ...validatedFiles.validFiles];
+                this.dsChange.emit(this.files);
+                this.dsFilesAdded.emit(validatedFiles.validFiles);
+            }
+            this.updateFileInput();
+        };
+        this.updateFileInput = () => {
+            if (this.nativeInput) {
+                this.nativeInput.files = toFileList(this.files);
+            }
+        };
+        /**
+         * HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleDragenter = (ev) => {
+            formControl.stopEventBubbling(ev);
+            if (!this.disabled && !this.readonly && !this.loading) {
+                this.isDragOver = true;
+            }
+        };
+        this.handleDragover = (ev) => {
+            formControl.stopEventBubbling(ev);
+        };
+        this.handleDragleave = (ev) => {
+            formControl.stopEventBubbling(ev);
+            this.isDragOver = false;
+        };
+        this.handleDrop = (ev) => {
+            formControl.stopEventBubbling(ev);
+            this.isDragOver = false;
+            if (!this.disabled && !this.readonly && !this.loading) {
+                const dataTransfer = ev.dataTransfer;
+                if (dataTransfer) {
+                    this.handleFiles(dataTransfer.files);
+                }
+            }
+        };
+        this.handleInputChange = () => {
+            var _a;
+            if (!this.disabled && !this.readonly && !this.loading) {
+                if ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files) {
+                    this.handleFiles(this.nativeInput.files);
+                }
+            }
+        };
+        this.handleInputClick = (ev) => {
+            if (this.nativeInput && !this.disabled && !this.readonly && !this.loading) {
+                this.nativeInput.value = '';
+            }
+            this.dsInputClick.emit(ev);
+        };
+        this.handleInputFocus = (ev) => {
+            this.focused = true;
+            this.dsFocus.emit(ev);
+        };
+        this.handleInputBlur = (ev) => {
+            this.focused = false;
+            this.dsBlur.emit(ev);
+        };
+        this.handleRemoveFile = (ev, index) => {
+            formControl.stopEventBubbling(ev);
+            if (index >= 0 && index < this.files.length) {
+                const files = this.files;
+                const removedFiles = files.splice(index, 1);
+                this.dsFilesRemoved.emit(removedFiles);
+                this.files = [...files];
+                this.dsChange.emit(this.files);
+                this.updateFileInput();
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged() {
+        const newFiles = this.value || [];
+        if (!array.areArraysEqual(this.files, newFiles)) {
+            this.files = [...newFiles];
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillLoad() {
+        this.valueChanged();
+    }
+    connectedCallback() {
+        this.initialValue = [...(this.value || [])];
+    }
+    componentDidLoad() {
+        this.addDragListeners();
+    }
+    disconnectedCallback() {
+        this.removeDragListeners();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToReset(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            this.files = [...this.initialValue];
+            setTimeout(() => {
+                if (this.nativeInput) {
+                    this.nativeInput.files = toFileList(this.initialValue);
+                }
+            });
+        }
+    }
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Sets the file list to an empty list.
+     */
+    async clear() {
+        this.files = [];
+        this.updateFileInput();
+    }
+    /**
+     * Sets focus on the native `input`. Use this method instead of the global `input.focus()`.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isDisabled = this.disabled || this.readonly || this.loading;
+        const dropZoneLabel = this.dropZoneLabel || i18nDsFileUpload[this.language].dropZoneLabel;
+        const selectedFilesLabel = i18nDsFileUpload[this.language].selectedFilesLabel;
+        const removeFileLabel = i18nDsFileUpload[this.language].removeFileLabel;
+        return (index.h(field_util.Field, { key: '0262acd3da4ebb07ab1207c456eb49e2b7abd638', color: this.color, disabled: this.disabled, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, index.h("div", { key: '53ef4c5d329415ccd17d0be52ab73aadd1845612', id: "drop-zone", part: "drop-zone", ref: el => (this.dropZoneEl = el), class: {
+                'file-upload-drop-zone': true,
+                'is-dragover': this.isDragOver,
+                'is-disabled': isDisabled,
+            }, onClick: () => { var _a; return !isDisabled && ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click()); } }, index.h("span", { key: 'a4a362449b720986bbd9d6d82032c0004c760b19', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), index.h("input", { key: '456e17b2975c5ee0755b16d07a8ab3c2fa4f66d6', part: "input", ref: el => (this.nativeInput = el), id: this.fileUploadId, type: "file", name: this.name, multiple: this.multiple, disabled: isDisabled, required: this.required, accept: this.accept || undefined, "aria-invalid": this.invalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), index.h("div", { key: 'dfe3c5972da1593bef6c0aa94cc79851b6fe7b44', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, index.h("slot", { key: 'a76bb47e49f108cf9c054cba02a78110869870ce' }, index.h("div", { key: 'bc52009e955c1267d28f097a37e64019caaf364d', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && index.h("ds-icon", { key: 'dcab355b1cb4a89a8c8b2d67e3ab3f22d4a0eb7a', name: "upload", size: "lg" }), this.loading && index.h("ds-spinner", { key: '8e5451696abcdb8679d6741b53ce8267234b6435', variation: "circle" }), index.h("span", { key: 'e7989e8a8d431d0cb3709e890929d9fc59f01fef' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (index.h("ul", { key: '973570b4094cad00ee06b6dd1ca4ffbc55e76fee', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
+                'file-list': true,
+                'is-disabled': isDisabled,
+            } }, this.files.map((file, index$1) => (index.h("li", { id: `file-list-item-${index$1}`, key: file.name, class: "file-list-item" }, index.h("ds-stack", { direction: "row", align: "center" }, index.h("ds-icon", { name: "document", size: "md" }), index.h("ds-content", { space: "none" }, index.h("span", { class: "file-name", title: file.name }, file.name), index.h("span", { class: "file-size" }, formatFileSize(file.size))), index.h("ds-button", { size: "sm", icon: "trash", square: true, color: "secondary", a11yLabel: `${removeFileLabel} ${file.name}`, disabled: isDisabled, onKeyDown: (ev) => {
+                if (ev.key === 'Delete') {
+                    this.handleRemoveFile(ev, index$1);
+                }
+            }, onClick: (ev) => this.handleRemoveFile(ev, index$1) })))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('file-upload'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], FileUpload.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('array'),
+    tslib_es6.__metadata("design:type", Array)
+], FileUpload.prototype, "value", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "name", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "label", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "dropZoneLabel", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "description", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "invalidText", void 0);
+tslib_es6.__decorate([
+    oneOf.OneOf(input_interfaces.INPUT_COLORS),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "color", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "invalid", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "multiple", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "loading", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "required", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], FileUpload.prototype, "accept", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], FileUpload.prototype, "maxFiles", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], FileUpload.prototype, "maxFileSize", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], FileUpload.prototype, "maxBundleSize", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "hasFileList", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], FileUpload.prototype, "autoInvalidOff", void 0);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], FileUpload.prototype, "configChanged", null);
+let FileUploadIds = 0;
+FileUpload.style = fileUploadHostCss();
+
+exports.ds_file_upload = FileUpload;