@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/file-upload/file-upload.js

@@ -1,1040 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h } from "@stencil/core";
-import { Logger, stopEventBubbling, areArraysEqual, OneOf, Type, watchInvalidTextSlot } from "../../utils/index";
-import { defaultConfig, ListenToConfig } from "../../global/index";
-import { Field } from "../input/field.util";
-import { INPUT_COLORS } from "../input/input.interfaces";
-import { toFileArray, toFileList } from "./utils/file-list.util";
-import { validateFileArray } from "./utils/file-validation.util";
-import { formatFileSize } from "./utils/file-size.util";
-import { i18nDsFileUpload } from "./file-upload.i18n";
-/**
- * FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration.
- *
- * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
- * @part drop-zone - The main drop area where users drag files or click to select.
- * @part file-list - The list of selected files below the drop zone.
- */
-export class FileUpload {
-    constructor() {
-        this.fileUploadId = `ds-file-upload-${FileUploadIds++}`;
-        this.initialValue = [];
-        this.files = [];
-        this.focused = false;
-        this.isDragOver = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.hasInvalidTextSlotContent = false;
-        /**
-         * 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`, disables the Angular integration's automatic invalid-state behavior — the control won't have
-         * `invalid`/`invalidText` set from the bound `FormControl`'s touched/error state.
-         */
-        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) => {
-            stopEventBubbling(ev);
-            if (!this.disabled && !this.readonly && !this.loading) {
-                this.isDragOver = true;
-            }
-        };
-        this.handleDragover = (ev) => {
-            stopEventBubbling(ev);
-        };
-        this.handleDragleave = (ev) => {
-            stopEventBubbling(ev);
-            this.isDragOver = false;
-        };
-        this.handleDrop = (ev) => {
-            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) => {
-            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 (!areArraysEqual(this.files, newFiles)) {
-            this.files = [...newFiles];
-        }
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentWillLoad() {
-        this.valueChanged();
-    }
-    connectedCallback() {
-        this.initialValue = [...(this.value || [])];
-        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
-            this.hasInvalidTextSlotContent = hasContent;
-        });
-    }
-    componentDidLoad() {
-        this.addDragListeners();
-    }
-    disconnectedCallback() {
-        var _a;
-        this.removeDragListeners();
-        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
-    /**
-     * 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;
-        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
-        return (h(Field, { key: 'ba48506b55e97dea724c5c4fcd75f0496ec2deec', color: this.color, disabled: this.disabled, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, h("div", { key: 'bd3c54a1c3debc156f644505e51bbe68ce803be3', 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()); } }, h("span", { key: 'd000d84961259ab6e43ccd63be2e1260b9ca1dd5', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), h("input", { key: 'ff267497b43f107a63aef12b1e7bc9bb83cad829', 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": isInvalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), h("div", { key: '7b4854efac11d8a8421ba3e3e3a07952b02d3c77', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, h("slot", { key: '444433f2d5192f22943739e798c1b148b29ca17b' }, h("div", { key: '82e938f30c2fd8da7f376591bf5671e73ad9ad47', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && h("ds-icon", { key: 'fcd5549c2cac21b3dd2fb87e20a50e2d1b0bdb5b', name: "upload", size: "lg" }), this.loading && h("ds-spinner", { key: '2d6039c0db76188da9a671e07b60a2a5a16923b8', variation: "circle" }), h("span", { key: 'e5a69a4fadb1f5800d937627cf687f06a61d1028' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (h("ul", { key: '8ddb7e2c904fd1d47dad83a557070c69451e3ff0', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
-                'file-list': true,
-                'is-disabled': isDisabled,
-            } }, this.files.map((file, index) => (h("li", { id: `file-list-item-${index}`, key: file.name, class: "file-list-item" }, h("ds-stack", { direction: "row", align: "center" }, h("ds-icon", { name: "document", size: "md" }), h("ds-content", { space: "none" }, h("span", { class: "file-name", title: file.name }, file.name), h("span", { class: "file-size" }, formatFileSize(file.size))), h("ds-button", { size: "sm", icon: "trash", square: true, color: "secondary", title: `${removeFileLabel} ${file.name}`, a11yLabel: `${removeFileLabel} ${file.name}`, disabled: isDisabled, onKeyDown: (ev) => {
-                if (ev.key === 'Delete') {
-                    this.handleRemoveFile(ev, index);
-                }
-            }, onClick: (ev) => this.handleRemoveFile(ev, index) })))))))));
-    }
-    static get is() { return "ds-file-upload"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["file-upload.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["file-upload.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "File[]",
-                    "resolved": "File[]",
-                    "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the file upload (array of selected files)."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the control, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name",
-                "defaultValue": "this.fileUploadId"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label of the file upload, displayed in the drop zone area."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "'Choose or drop a file...'"
-            },
-            "dropZoneLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text displayed inside the drop zone. Defaults to localized \"Drag and drop or choose file(s) to upload\"."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "drop-zone-label",
-                "defaultValue": "''"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The description of the file upload, displayed below the drop zone."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description",
-                "defaultValue": "''"
-            },
-            "invalidText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display when the file upload is in an invalid state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid-text",
-                "defaultValue": "''"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputColor",
-                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
-                    "references": {
-                        "InputColor": {
-                            "location": "import",
-                            "path": "../input/input.interfaces",
-                            "id": "src/components/input/input.interfaces.ts::InputColor",
-                            "referenceLocation": "InputColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the color of the file upload. The default value is `primary`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the component gets an invalid style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            },
-            "multiple": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` multiple file upload is possible."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "multiple",
-                "defaultValue": "true"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the element can not be mutated, meaning the user can not edit the control."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the file upload is disabled and shows a spinner."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "loading",
-                "defaultValue": "false"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the user must fill in a value before submitting a form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
-            "accept": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Accepted MIME-Types like `image/png,image/jpeg`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "accept",
-                "defaultValue": "''"
-            },
-            "maxFiles": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Allowed number of files in the bundle."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-files"
-            },
-            "maxFileSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Allowed max file size in bytes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-file-size"
-            },
-            "maxBundleSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Allowed max bundle size in bytes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-bundle-size"
-            },
-            "hasFileList": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` below the drop-zone area it generates a file list."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "has-file-list",
-                "defaultValue": "true"
-            },
-            "autoInvalidOff": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, disables the Angular integration's automatic invalid-state behavior \u2014 the control won't have\n`invalid`/`invalidText` set from the bound `FormControl`'s touched/error state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "auto-invalid-off",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "files": {},
-            "focused": {},
-            "isDragOver": {},
-            "language": {},
-            "region": {},
-            "hasInvalidTextSlotContent": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsChange",
-                "name": "dsChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggers when a file is added or removed."
-                },
-                "complexType": {
-                    "original": "FileUploadChangeDetail",
-                    "resolved": "File[]",
-                    "references": {
-                        "FileUploadChangeDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadChangeDetail",
-                            "referenceLocation": "FileUploadChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFilesAdded",
-                "name": "dsFilesAdded",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggers when a file is added."
-                },
-                "complexType": {
-                    "original": "FileUploadFilesAddedDetail",
-                    "resolved": "File[]",
-                    "references": {
-                        "FileUploadFilesAddedDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadFilesAddedDetail",
-                            "referenceLocation": "FileUploadFilesAddedDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFilesRemoved",
-                "name": "dsFilesRemoved",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggers when a file is removed."
-                },
-                "complexType": {
-                    "original": "FileUploadFilesRemovedDetail",
-                    "resolved": "File[]",
-                    "references": {
-                        "FileUploadFilesRemovedDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadFilesRemovedDetail",
-                            "referenceLocation": "FileUploadFilesRemovedDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsRejectedFile",
-                "name": "dsRejectedFile",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Triggers when a file is rejected due to validation rules."
-                },
-                "complexType": {
-                    "original": "FileUploadRejectedFileDetail",
-                    "resolved": "FileUploadRejectedFile",
-                    "references": {
-                        "FileUploadRejectedFileDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadRejectedFileDetail",
-                            "referenceLocation": "FileUploadRejectedFileDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsInputClick",
-                "name": "dsInputClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input has clicked."
-                },
-                "complexType": {
-                    "original": "FileUploadInputClickDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "FileUploadInputClickDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadInputClickDetail",
-                            "referenceLocation": "FileUploadInputClickDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsBlur",
-                "name": "dsBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input loses focus."
-                },
-                "complexType": {
-                    "original": "FileUploadBlurDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "FileUploadBlurDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadBlurDetail",
-                            "referenceLocation": "FileUploadBlurDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFocus",
-                "name": "dsFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the input has focus."
-                },
-                "complexType": {
-                    "original": "FileUploadFocusDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "FileUploadFocusDetail": {
-                            "location": "import",
-                            "path": "./file-upload.interfaces",
-                            "id": "src/components/file-upload/file-upload.interfaces.ts::FileUploadFocusDetail",
-                            "referenceLocation": "FileUploadFocusDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "configChanged": {
-                "complexType": {
-                    "signature": "(state: { language: DsLanguage; region: DsRegion; }) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "{ language: DsLanguage; region: DsRegion; }",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "DsLanguage": {
-                            "location": "import",
-                            "path": "@global",
-                            "id": "src/global/index.ts::DsLanguage",
-                            "referenceLocation": "DsLanguage"
-                        },
-                        "DsRegion": {
-                            "location": "import",
-                            "path": "@global",
-                            "id": "src/global/index.ts::DsRegion",
-                            "referenceLocation": "DsRegion"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": []
-                }
-            },
-            "clear": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the file list to an empty list.",
-                    "tags": []
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus on the native `input`. Use this method instead of the global `input.focus()`.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "reset",
-                "method": "listenToReset",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
-}
-__decorate([
-    Logger('file-upload'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], FileUpload.prototype, "createLogger", null);
-__decorate([
-    Type('array'),
-    __metadata("design:type", Array)
-], FileUpload.prototype, "value", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "name", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "label", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "dropZoneLabel", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "description", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "invalidText", void 0);
-__decorate([
-    OneOf(INPUT_COLORS),
-    __metadata("design:type", String)
-], FileUpload.prototype, "color", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "invalid", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "multiple", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "disabled", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "readonly", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "loading", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "required", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], FileUpload.prototype, "accept", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], FileUpload.prototype, "maxFiles", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], FileUpload.prototype, "maxFileSize", void 0);
-__decorate([
-    Type('number'),
-    __metadata("design:type", Number)
-], FileUpload.prototype, "maxBundleSize", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "hasFileList", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], FileUpload.prototype, "autoInvalidOff", void 0);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], FileUpload.prototype, "configChanged", null);
-let FileUploadIds = 0;