@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,1796 @@
+import { h, } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class FileUpload {
+    hostElement;
+    /** Enables drag-and-drop for file uploads. */
+    dragAndDrop = false;
+    /** Wether at least one file is rewuired. */
+    required = false;
+    /** If true, the upload is disabled and not interactive. */
+    disabled = false;
+    /** Maximum file size allowed in megabytes. */
+    maxFileSizeMB = 7;
+    /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */
+    allowedFileTypes = undefined;
+    /** Extra file types to allow in addition to the  default ones. */
+    additionalAllowedFileTypes = [];
+    /** When set to true, allows any file type to be uploaded (no file type restrictions). */
+    allowAnyFileType = false;
+    /** Custom file extensions to allow (e.g., 'xml', 'asc', 'cfg'). Recommended format: without dots. Also accepts format with dots like '.xml'. Do not use wildcards like '*.xml'. */
+    allowedFileExtensions = [];
+    /** Custom function that handels file upload and progress reporting. */
+    uploadHandler;
+    _maxFiles;
+    get maxFiles() {
+        return this._maxFiles;
+    }
+    set maxFiles(value) {
+        if (typeof value === "number" && value < 1) {
+            console.warn("Invalid `maxFiles` value. Must be >= 1. Value ignored.");
+            this._maxFiles = undefined;
+        }
+        else {
+            this._maxFiles = value;
+        }
+    }
+    /** Main label for the upload component. */
+    label = "Label";
+    /** Error message shown when no file is uploaded but at least one is required. */
+    labelRequiredError = "At least one file must be uploaded";
+    /** Text for the “browse files” button or link. */
+    labelBrowseFiles = "Browse files";
+    /** Text shown in the drop zone area. */
+    labelDragAndDrop = "Drag & Drop or browse files to upload";
+    /** Heading label above the list of uploaded files. */
+    labelUploadedFilesHeading = "Uploaded files";
+    /** Message shown when a file is too large ({{size}} is replaced with max size). */
+    labelFileTooLarge = "Upload failed. Max file size: {{size}}MB.";
+    /** Message shown when the file type is not allowed. */
+    labelUnsupportedFileType = "Unsupported file type.";
+    /** Status text for a successfully uploaded file. */
+    labelUploaded = "Successfully uploaded";
+    /** Generic error message shown when upload fails. */
+    labelUploadFailed = "Upload failed. Please try again.";
+    /** Template text for listing supported formats and size ({{types}} and {{size}} are replaced). */
+    labelSupportedFormatsTemplate = "Supported file formats: {{types}}. Max file size: {{size}}MB.";
+    /** Singular word used for “file” in messages. */
+    labelFileSingular = "file";
+    /** Plural word used for “files” in messages. */
+    labelFilePlural = "files";
+    /** Info text about the maximum number of files allowed ({{count}} and {{files}} are replaced). */
+    labelMaxFilesInfo = "Up to {{count}} {{files}}.";
+    /** Error message shown when the max number of files is exceeded. */
+    labelMaxFilesExceeded = "Upload limit exceeded. Only {{count}} {{files}} allowed.";
+    /** ARIA label for the “browse files” control. */
+    ariaLabelBrowseFiles = "Browse files";
+    /** ARIA label for the drop zone area. */
+    ariaLabelDropzone = "Upload area. Click to browse or drag and drop files.";
+    /** ARIA label for the hidden/native file input element. */
+    ariaLabelFileInput = "Upload file";
+    /** ARIA label for the “remove file” action. */
+    ariaLabelRemoveFile = "Remove file";
+    /** ARIA label for the “cancel upload” action. */
+    ariaLabelCancelUpload = "Cancel upload";
+    /** ARIA label for the “retry upload” action. */
+    ariaLabelRetryUpload = "Retry upload";
+    /** ARIA label describing that an upload is currently in progress. */
+    ariaLabelUploadingStatus = "Upload in progress";
+    /** ARIA label describing that upload has completed successfully. */
+    ariaLabelUploadedStatus = "Upload completed";
+    /** ARIA label describing that the upload has failed. */
+    ariaLabelUploadFailedStatus = "Upload failed";
+    showDemoStates;
+    internalId = `ifx-file-upload-${Math.random().toString(36).substr(2, 9)}`;
+    isDragOver = false;
+    files = [];
+    uploadTasks = [];
+    rejectedSizeFiles = [];
+    rejectedTypeFiles = [];
+    requiredError = false;
+    statusMessage = null;
+    /** Fired when files are added (e.g. via browse or drop). */
+    ifxFileUploadAdd;
+    /** Fired when a file is removed from the list. */
+    ifxFileUploadRemove;
+    /** Fired whenever the list of selected files changes. */
+    ifxFileUploadChange;
+    /** Fired when an upload-related error occurs. */
+    ifxFileUploadError;
+    /** Fired when a file fails validation before upload. */
+    ifxFileUploadInvalid;
+    /** Fired when upload starts for a file. */
+    ifxFileUploadStart;
+    /** Fired when a single file upload finishes successfully. */
+    ifxFileUploadComplete;
+    /** Fired when all file uploads have finished successfully. */
+    ifxFileUploadAllComplete;
+    /** Fired when an ongoing upload is aborted/cancelled. */
+    ifxFileUploadAbort;
+    /** Fired when files are dropped onto the drop zone. */
+    ifxFileUploadDrop;
+    /** Fired when the upload area is clicked (typically to open file dialog). */
+    ifxFileUploadClick;
+    /** Fired when the user tries to add more than the allowed number of files. */
+    ifxFileUploadMaxFilesExceeded;
+    /** Fired after validating the current files (valid or invalid). */
+    ifxFileUploadValidation;
+    /** Fired when the user retries uploading a file after a failure. */
+    ifxFileUploadRetry;
+    fileInputEl = null;
+    extensionToMimeMap = {
+        /**
+         * Maps file extensions to MIME types.
+         * This is only used for translating `allowedFileTypes` (extensions) into MIME types,
+         * and for labeling in the UI. It does NOT define which files are globally allowed.
+         *
+         * Some extensions can map to multiple MIME types (e.g. ZIP files may be reported
+         * as `application/zip` on most systems, but as `application/x-zip-compressed`
+         * on Windows). All listed MIME types are accepted during validation.
+         */
+        // Images
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        svg: "image/svg+xml",
+        webp: "image/webp",
+        // Documents
+        pdf: "application/pdf",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        tsv: "text/tab-separated-values",
+        txt: "text/plain",
+        csv: "text/csv",
+        json: "application/json",
+        // Audio/Video
+        mp3: "audio/mpeg",
+        wav: "audio/wav",
+        mp4: "video/mp4",
+        mov: "video/quicktime",
+        webm: "video/webm",
+        // Archive / Code
+        zip: ["application/zip", "application/x-zip-compressed"],
+        rar: "application/vnd.rar",
+        tar: "application/x-tar",
+        gz: "application/gzip",
+        // Sonstiges
+        xml: "application/xml",
+        html: "text/html",
+        css: "text/css",
+        js: "application/javascript",
+    };
+    validateRequired() {
+        if (this.required && this.files.length === 0) {
+            this.requiredError = true;
+            if (this.statusMessage?.text !== this.labelRequiredError) {
+                this.statusMessage = {
+                    type: "error",
+                    text: this.labelRequiredError,
+                };
+            }
+            this.ifxFileUploadValidation.emit({ valid: false });
+        }
+        else {
+            this.requiredError = false;
+            if (this.statusMessage?.text === this.labelRequiredError) {
+                this.statusMessage = null;
+            }
+            this.ifxFileUploadValidation.emit({ valid: true });
+        }
+    }
+    pluralize(count) {
+        // If allowAnyFileType is true, use generic terms
+        if (this.allowAnyFileType) {
+            return count === 1 ? "file" : "files";
+        }
+        return count === 1 ? this.labelFileSingular : this.labelFilePlural;
+    }
+    getNormalizedFileTypes() {
+        // If allowedFileTypes is not set and allowedFileExtensions is set, return empty array
+        if (!this.allowedFileTypes &&
+            this.allowedFileExtensions &&
+            this.getNormalizedFileExtensions().length > 0) {
+            return [];
+        }
+        // If allowedFileTypes is not set and no allowedFileExtensions, use defaults
+        if (!this.allowedFileTypes) {
+            return [
+                "jpg",
+                "jpeg",
+                "png",
+                "pdf",
+                "xls",
+                "xlsx",
+                "tsv",
+                "mov",
+                "mp3",
+                "mp4",
+            ];
+        }
+        if (Array.isArray(this.allowedFileTypes)) {
+            return this.allowedFileTypes;
+        }
+        try {
+            return JSON.parse(this.allowedFileTypes);
+        }
+        catch {
+            return this.allowedFileTypes.split(",").map((t) => t.trim());
+        }
+    }
+    getNormalizedFileExtensions() {
+        if (!this.allowedFileExtensions)
+            return [];
+        if (Array.isArray(this.allowedFileExtensions)) {
+            return this.allowedFileExtensions;
+        }
+        try {
+            return JSON.parse(this.allowedFileExtensions);
+        }
+        catch {
+            return this.allowedFileExtensions.split(",").map((t) => t.trim());
+        }
+    }
+    /**
+     * Enhanced file type validation that supports:
+     * - allowAnyFileType flag for unrestricted uploads (overrides all restrictions)
+     * - allowedFileTypes (predefined extensions mapped to MIME types) - if not set and allowedFileExtensions is set, ignored
+     * - additionalAllowedFileTypes (MIME types)
+     * - allowedFileExtensions (custom extensions) - if only this is set, only these extensions are allowed
+     */
+    isFileTypeAllowed(file) {
+        // If allowAnyFileType is true, accept all files (overrides all restrictions)
+        if (this.allowAnyFileType) {
+            return true;
+        }
+        const fileExtension = this.getFileExtension(file.name);
+        // Check against allowedFileTypes (predefined extensions)
+        const normalizedTypes = this.getNormalizedFileTypes();
+        const allowedMimes = normalizedTypes
+            .flatMap((ext) => {
+            const mapped = this.extensionToMimeMap[ext.toLowerCase()];
+            if (!mapped)
+                return [];
+            return Array.isArray(mapped) ? mapped : [mapped];
+        })
+            .filter(Boolean);
+        if (allowedMimes.includes(file.type)) {
+            return true;
+        }
+        if (fileExtension &&
+            normalizedTypes.some((ext) => ext.replace(/^\./, "").toLowerCase() === fileExtension)) {
+            return true;
+        }
+        // Check against additionalAllowedFileTypes (MIME types)
+        const additionalMimeTypes = this.getAdditionalMimeTypes();
+        if (additionalMimeTypes.includes(file.type)) {
+            return true;
+        }
+        // Check against allowedFileExtensions (custom extensions)
+        const customExtensions = this.getNormalizedFileExtensions();
+        if (customExtensions.length > 0 && fileExtension) {
+            for (const ext of customExtensions) {
+                const normalizedExt = ext.startsWith(".")
+                    ? ext.substring(1).toLowerCase()
+                    : ext.toLowerCase();
+                if (fileExtension === normalizedExt) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    /**
+     * Extracts file extension from filename (without dot)
+     */
+    getFileExtension(filename) {
+        const lastDotIndex = filename.lastIndexOf(".");
+        if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+            return null;
+        }
+        return filename.substring(lastDotIndex + 1).toLowerCase();
+    }
+    getLabelFromMimeType(mime) {
+        for (const [ext, knownMime] of Object.entries(this.extensionToMimeMap)) {
+            if ((Array.isArray(knownMime) && knownMime.includes(mime)) ||
+                knownMime === mime) {
+                return ext.toUpperCase();
+            }
+        }
+        return mime; // fallback: show raw MIME
+    }
+    handleFileChange(event) {
+        const input = event.target;
+        if (!input.files)
+            return;
+        this.processFiles(input.files);
+    }
+    handleDrop(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        if (event.dataTransfer?.files) {
+            const droppedFiles = Array.from(event.dataTransfer.files);
+            const acceptedFiles = [];
+            const rejectedFiles = [];
+            droppedFiles.forEach((file) => {
+                const isValidType = this.isFileTypeAllowed(file);
+                const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;
+                if (isValidType && isValidSize)
+                    acceptedFiles.push(file);
+                else
+                    rejectedFiles.push(file);
+            });
+            this.ifxFileUploadDrop.emit({
+                droppedFiles,
+                acceptedFiles,
+                rejectedFiles,
+            });
+            this.processFiles(event.dataTransfer.files);
+        }
+    }
+    handleDragOver(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.isDragOver = true;
+    }
+    handleDragLeave(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    processFiles(fileList) {
+        const selectedFiles = Array.from(fileList);
+        const validFiles = [];
+        const rejectedSize = [];
+        const rejectedType = [];
+        selectedFiles.forEach((file) => {
+            const isValidType = this.isFileTypeAllowed(file);
+            const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;
+            const isDuplicate = this.files.some((existing) => existing.name === file.name && existing.size === file.size);
+            if (isDuplicate) {
+                this.ifxFileUploadInvalid.emit({ file, reason: "duplicate" });
+                this.ifxFileUploadError.emit({
+                    file,
+                    errorType: "duplicate",
+                    message: `File "${file.name}" is already added`,
+                    reason: "duplicate",
+                });
+                return;
+            }
+            if (isValidType && isValidSize) {
+                validFiles.push(file);
+            }
+            else {
+                if (!isValidType) {
+                    rejectedType.push(file.name);
+                    this.ifxFileUploadInvalid.emit({ file, reason: "invalid-type" });
+                }
+                if (!isValidSize) {
+                    rejectedSize.push(file.name);
+                    this.ifxFileUploadInvalid.emit({ file, reason: "invalid-size" });
+                }
+                this.ifxFileUploadError.emit({
+                    file,
+                    errorType: !isValidType ? "invalid-type" : "file-too-large",
+                    message: "Invalid file rejected",
+                    reason: !isValidType ? "unsupported-type" : "file-too-large",
+                });
+            }
+        });
+        this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];
+        this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];
+        if (this.maxFiles &&
+            this.files.length + validFiles.length > this.maxFiles) {
+            const availableSlots = this.maxFiles - this.files.length;
+            const limitedFiles = validFiles.slice(0, Math.max(availableSlots, 0));
+            const overflowFiles = validFiles.slice(availableSlots);
+            this.files = [...this.files, ...limitedFiles];
+            limitedFiles.forEach((file) => this.startUpload(file));
+            if (limitedFiles.length > 0) {
+                this.ifxFileUploadAdd.emit({
+                    addedFiles: limitedFiles,
+                    files: this.files,
+                });
+                this.ifxFileUploadChange.emit({ files: this.files });
+            }
+            overflowFiles.forEach((file) => {
+                this.ifxFileUploadInvalid.emit({ file, reason: "too-many-files" });
+                this.ifxFileUploadError.emit({
+                    file,
+                    errorType: "too-many-files",
+                    message: `Upload limit exceeded. Max ${this.maxFiles} files allowed.`,
+                    reason: "too-many-files",
+                });
+            });
+            if (overflowFiles.length > 0) {
+                this.statusMessage = {
+                    type: "error",
+                    text: this.labelMaxFilesExceeded
+                        .replace("{{count}}", this.maxFiles.toString())
+                        .replace("{{files}}", this.pluralize(this.maxFiles)),
+                };
+                this.ifxFileUploadMaxFilesExceeded.emit({
+                    maxFiles: this.maxFiles,
+                    attempted: this.files.length + validFiles.length,
+                });
+            }
+            return;
+        }
+        validFiles.forEach((file) => this.startUpload(file));
+        this.files = [...this.files, ...validFiles];
+        if (validFiles.length > 0) {
+            this.ifxFileUploadAdd.emit({ addedFiles: validFiles, files: this.files });
+            this.ifxFileUploadChange.emit({ files: this.files });
+        }
+        this.validateRequired();
+    }
+    retryUpload(file) {
+        const taskIndex = this.uploadTasks.findIndex((t) => t.file.name === file.name);
+        if (taskIndex !== -1) {
+            this.uploadTasks.splice(taskIndex, 1);
+            this.uploadTasks = [...this.uploadTasks];
+        }
+        this.ifxFileUploadRetry.emit({ file });
+        this.startUpload(file);
+    }
+    checkAndEmitAllComplete() {
+        if (this.uploadTasks.every((t) => t.completed || t.error)) {
+            const hasSuccessfulUploads = this.uploadTasks.some((t) => t.completed && !t.error);
+            if (hasSuccessfulUploads) {
+                const successfulFiles = this.uploadTasks
+                    .filter((t) => t.completed && !t.error)
+                    .map((t) => t.file);
+                this.ifxFileUploadAllComplete.emit({ files: successfulFiles });
+            }
+        }
+    }
+    resetFileInput() {
+        if (this.fileInputEl) {
+            this.fileInputEl.value = "";
+        }
+    }
+    updateTaskProgress(file, progress) {
+        const task = this.uploadTasks.find((t) => t.file === file);
+        if (task) {
+            const newProgress = Math.max(task.progress, Math.min(100, progress));
+            if (newProgress !== task.progress) {
+                task.progress = newProgress;
+                this.uploadTasks = [...this.uploadTasks];
+            }
+        }
+    }
+    startUpload(file) {
+        this.ifxFileUploadStart.emit({ file });
+        const task = {
+            file,
+            progress: 3, // Start with initial progress for better UX
+            intervalId: null,
+            completed: false,
+        };
+        this.uploadTasks = [...this.uploadTasks, task];
+        if (this.uploadHandler) {
+            this.uploadHandler(file, (percent) => {
+                this.updateTaskProgress(file, percent);
+            })
+                .then(() => {
+                task.progress = 100;
+                task.completed = true;
+                this.uploadTasks = [...this.uploadTasks];
+                this.ifxFileUploadComplete.emit({ file });
+                this.ifxFileUploadChange.emit({ files: this.files });
+                this.checkAndEmitAllComplete();
+            })
+                .catch(() => {
+                task.error = true;
+                this.uploadTasks = [...this.uploadTasks];
+                this.ifxFileUploadError.emit({
+                    file,
+                    errorType: "upload-failed",
+                    message: "Upload handler rejected file",
+                    reason: "custom",
+                });
+                this.checkAndEmitAllComplete();
+            });
+        }
+        else {
+            const totalSize = file.size;
+            const fakeUploadSpeed = 100000;
+            let uploaded = 0;
+            task.intervalId = window.setInterval(() => {
+                uploaded += fakeUploadSpeed / 5;
+                const progress = Math.min(100, Math.round((uploaded / totalSize) * 100));
+                this.updateTaskProgress(file, progress);
+                if (progress >= 100) {
+                    clearInterval(task.intervalId);
+                    task.completed = true;
+                    task.intervalId = null;
+                    this.uploadTasks = [...this.uploadTasks];
+                    this.ifxFileUploadComplete.emit({ file });
+                    this.ifxFileUploadChange.emit({ files: this.files });
+                    this.checkAndEmitAllComplete();
+                }
+            }, 200);
+        }
+    }
+    cancelUpload(file) {
+        const taskIndex = this.uploadTasks.findIndex((t) => t.file.name === file.name);
+        if (taskIndex !== -1) {
+            const task = this.uploadTasks[taskIndex];
+            if (task?.intervalId !== null) {
+                clearInterval(task.intervalId);
+            }
+            this.uploadTasks = this.uploadTasks.filter((_, i) => i !== taskIndex);
+        }
+        this.files = this.files.filter((f) => f.name !== file.name);
+        this.ifxFileUploadAbort.emit({ file });
+        this.ifxFileUploadChange.emit({ files: this.files });
+        this.resetFileInput();
+        this.validateRequired();
+    }
+    removeFile(file) {
+        this.uploadTasks = this.uploadTasks.filter((task) => task.file.name !== file.name);
+        this.files = this.files.filter((f) => f.name !== file.name);
+        this.ifxFileUploadRemove.emit({ removedFile: file, files: this.files });
+        this.ifxFileUploadChange.emit({ files: this.files });
+        this.validateRequired();
+        this.resetFileInput();
+        if (this.maxFiles &&
+            this.files.length < this.maxFiles &&
+            this.statusMessage?.text !== this.labelRequiredError) {
+            this.statusMessage = null;
+        }
+    }
+    clearRejectedFile(fileName, type) {
+        if (type === "size") {
+            this.rejectedSizeFiles = this.rejectedSizeFiles.filter((f) => f !== fileName);
+        }
+        else {
+            this.rejectedTypeFiles = this.rejectedTypeFiles.filter((f) => f !== fileName);
+        }
+        this.resetFileInput();
+        if (this.maxFiles && this.files.length < this.maxFiles) {
+            this.statusMessage = null;
+        }
+        this.validateRequired();
+    }
+    splitFileNameParts(file) {
+        const name = file.name;
+        const dotIndex = name.lastIndexOf(".");
+        if (dotIndex === -1)
+            return { base: name, ext: "" };
+        return {
+            base: name.substring(0, dotIndex),
+            ext: name.substring(dotIndex),
+        };
+    }
+    getFileIcon(file) {
+        const extension = file.name.split(".").pop()?.toLowerCase();
+        switch (extension) {
+            case "pdf":
+                return "file-pdf-16";
+            case "jpg":
+            case "jpeg":
+                return "file-jpg-16";
+            case "png":
+                return "file-png-16";
+            case "mov":
+                return "file-mov-16";
+            case "mp3":
+                return "file-mp3-16";
+            case "mp4":
+                return "file-mp4-16";
+            default:
+                return "file-16";
+        }
+    }
+    formatSize(bytes) {
+        if (bytes >= 1024 * 1024 * 1024) {
+            return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+        }
+        else if (bytes >= 1024 * 1024) {
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        else if (bytes >= 1024) {
+            return `${(bytes / 1024).toFixed(0)} KB`;
+        }
+        else {
+            return `${bytes} B`;
+        }
+    }
+    getAcceptAttribute() {
+        // If allowAnyFileType is true, don't restrict the input
+        if (this.allowAnyFileType) {
+            return "";
+        }
+        const acceptValues = [];
+        // Add extensions from allowedFileTypes
+        const extensionTypes = this.getNormalizedFileTypes().map((ext) => "." + ext.toLowerCase());
+        acceptValues.push(...extensionTypes);
+        // Add MIME types from additionalAllowedFileTypes
+        const mimeTypes = this.getAdditionalMimeTypes();
+        acceptValues.push(...mimeTypes);
+        // Add custom file extensions
+        const customExtensions = this.getNormalizedFileExtensions();
+        customExtensions.forEach((ext) => {
+            const normalizedExt = ext.startsWith(".") ? ext : "." + ext;
+            acceptValues.push(normalizedExt);
+        });
+        return acceptValues.join(",");
+    }
+    getFormattedProgressText(task) {
+        const uploadedSize = Math.round((task.progress / 100) * task.file.size);
+        const uploadedText = this.formatSize(uploadedSize);
+        const totalText = this.formatSize(task.file.size);
+        return `${uploadedText} / ${totalText} uploaded`;
+    }
+    getAdditionalMimeTypes() {
+        if (!this.additionalAllowedFileTypes)
+            return [];
+        if (Array.isArray(this.additionalAllowedFileTypes))
+            return this.additionalAllowedFileTypes;
+        return this.additionalAllowedFileTypes.split(",").map((t) => t.trim());
+    }
+    getSupportedFileText() {
+        if (this.allowAnyFileType) {
+            let text = `All file types allowed. Max file size: ${this.maxFileSizeMB}MB.`;
+            if (this.labelMaxFilesInfo && this.maxFiles) {
+                const fileWord = this.pluralize(this.maxFiles);
+                const maxFilesText = this.labelMaxFilesInfo
+                    .replace("{{count}}", this.maxFiles.toString())
+                    .replace("{{files}}", fileWord);
+                text += ` ${maxFilesText}`;
+            }
+            return text;
+        }
+        const allTypes = [];
+        // Add extensions from allowedFileTypes
+        const extensions = this.getNormalizedFileTypes().map((ext) => ext.toUpperCase());
+        allTypes.push(...extensions);
+        // Add MIME types from additionalAllowedFileTypes
+        const mimeTypes = this.getAdditionalMimeTypes().map((mime) => this.getLabelFromMimeType(mime));
+        allTypes.push(...mimeTypes);
+        // Add custom file extensions
+        const customExtensions = this.getNormalizedFileExtensions().map((ext) => {
+            const cleanExt = ext.startsWith(".") ? ext.substring(1) : ext;
+            return cleanExt.toUpperCase();
+        });
+        allTypes.push(...customExtensions);
+        // Deduplicate labels (e.g. `application/zip` and `application/x-zip-compressed`
+        // both map to "ZIP") while preserving order.
+        const typesLabel = [...new Set(allTypes)].join(", ");
+        let text = this.labelSupportedFormatsTemplate
+            .replace("{{types}}", typesLabel)
+            .replace("{{size}}", this.maxFileSizeMB.toString());
+        if (this.labelMaxFilesInfo && this.maxFiles) {
+            const fileWord = this.pluralize(this.maxFiles);
+            const maxFilesText = this.labelMaxFilesInfo
+                .replace("{{count}}", this.maxFiles.toString())
+                .replace("{{files}}", fileWord);
+            text += ` ${maxFilesText}`;
+        }
+        return text;
+    }
+    getFormattedFileTooLargeText() {
+        return this.labelFileTooLarge.replace("{{size}}", this.maxFileSizeMB.toString());
+    }
+    renderStatusMessage() {
+        if (!this.statusMessage)
+            return null;
+        return (h("div", { class: `file-upload-status file-upload-status__${this.statusMessage.type}` }, this.statusMessage.type === "error" && (h("ifx-icon", { icon: "c-warning-16" })), this.statusMessage.text));
+    }
+    isInputDisabled() {
+        return (this.disabled ||
+            (this.maxFiles !== undefined && this.files.length >= this.maxFiles));
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.hostElement)) {
+            const framework = detectFramework();
+            trackComponent("ifx-file-upload", await framework);
+        }
+        if (this.hostElement.hasAttribute("show-demo-states")) {
+            this.showDemoStates = true;
+        }
+        if (this.showDemoStates) {
+            this.injectDemoState();
+        }
+    }
+    /** Storybook Demo */
+    async injectDemoState() {
+        const dummyContent = new Array(50000).fill("a").join(""); // ~50 KB
+        const bigContent = dummyContent + dummyContent; // ~100 KB
+        const uploading = new File([dummyContent], "Image.jpg", {
+            type: "image/jpeg",
+        }); // ~50 KB
+        const uploaded = new File([bigContent], "File.pdf", {
+            type: "application/pdf",
+        }); // ~100 KB
+        const failed = new File([dummyContent], "Text.docx", {
+            type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        }); // ~50 KB
+        const tooLarge = new File([bigContent + bigContent + bigContent], "Video.mp4", { type: "video/mp4" }); // ~300 KB
+        const unsupported = new File(["demo"], "Script.exe", {
+            type: "application/x-msdownload",
+        }); // very small
+        this.files = [uploaded, uploading, failed];
+        this.uploadTasks = [
+            { file: uploaded, progress: 100, intervalId: null, completed: true },
+            { file: uploading, progress: 40, intervalId: null, completed: false },
+            {
+                file: failed,
+                progress: 80,
+                intervalId: null,
+                completed: false,
+                error: true,
+            },
+        ];
+        this.rejectedSizeFiles = [tooLarge.name];
+        this.rejectedTypeFiles = [unsupported.name];
+    }
+    /** Storybook Demo */
+    async triggerDemoValidation() {
+        this.validateRequired();
+    }
+    render() {
+        return (h("div", { key: 'dca54a990d8e7ceab7d967ef5d668a32fe73bd1d', class: {
+                "file-upload-wrapper": true,
+                disabled: this.disabled,
+            } }, this.label && (h("label", { key: '13024e8c1893aa0d7140c3c7401a22426afd5135', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && (h("span", { key: 'e0bdc1a2ec35cd2f3bf3808a7d0d9c8999827a11', class: `required ${this.requiredError ? "error" : ""}` }, "*")))), this.dragAndDrop
+            ? this.renderDragAndDropArea()
+            : this.renderUploadArea(), (this.files.length > 0 ||
+            this.rejectedSizeFiles.length > 0 ||
+            this.rejectedTypeFiles.length > 0) && (h("div", { key: '3fa499f4dec6a05ab50eb0890156f74857d0e05c', class: "file-list-wrapper" }, h("div", { key: '3dd79b686a52f964d75dd323027d8862d0ea4013', class: "upload-heading" }, this.labelUploadedFilesHeading), h("ul", { key: '47b913174f13cf93a28d5686d4efee5d68784d85', class: "file-list" }, this.rejectedSizeFiles.map((fileName) => (h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName })
+            .base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName })
+            .ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, "size") }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace("{{size}}", this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map((fileName) => (h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: "file-16" })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName })
+            .base), h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName })
+            .ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, "type") }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map((file) => {
+            const task = this.uploadTasks.find((t) => t.file.name === file.name);
+            const progress = task?.progress ?? 100;
+            const isUploading = task && !task.completed;
+            const isError = task?.error === true;
+            const itemClass = isError
+                ? "file-item upload-failed"
+                : isUploading
+                    ? "file-item uploading"
+                    : "file-item upload-success";
+            const uniqueKey = `${file.name}-${file.size}`;
+            const { base, ext } = this.splitFileNameParts(file);
+            return (h("li", { class: itemClass, key: uniqueKey }, h("div", { class: "file-icon" }, h("ifx-icon", { icon: this.getFileIcon(file) })), h("div", { class: "file-info" }, h("div", { class: "file-top-row" }, h("span", { class: "file-name-wrapper" }, h("span", { class: "file-name-base" }, base), h("span", { class: "file-name-ext" }, ext)), h("div", { class: "file-actions" }, h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "refresh-16", size: "s", "aria-label": this.ariaLabelRetryUpload, onClick: () => this.retryUpload(file), style: {
+                    display: isError ? "inline-flex" : "none",
+                } }), h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "cross-16", size: "s", "aria-label": this.ariaLabelCancelUpload, onClick: () => this.cancelUpload(file), style: {
+                    display: isUploading ? "inline-flex" : "none",
+                } }), h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.removeFile(file), style: {
+                    display: !isUploading ? "inline-flex" : "none",
+                } }))), h("div", { class: "file-middle-row" }, isUploading && task && !task.error && (h("span", { class: "file-uploading", "aria-label": this.ariaLabelUploadingStatus }, this.getFormattedProgressText(task))), !isUploading && !isError && (h("span", null, h("span", { class: "file-size" }, this.formatSize(file.size)), h("span", { class: "file-status", "aria-label": this.ariaLabelUploadedStatus }, h("ifx-icon", { icon: "check-16" }), this.labelUploaded))), isError && (h("span", { class: "file-status", "aria-label": this.ariaLabelUploadFailedStatus }, this.labelUploadFailed))), isUploading && task && !task.error && (h("div", { class: "file-progress-row" }, h("ifx-progress-bar", { size: "s", value: progress, "show-label": "true" }))))));
+        }))))));
+    }
+    renderUploadArea() {
+        const handleInputRef = (el) => {
+            this.fileInputEl = el;
+        };
+        return (h("div", { class: { "upload-button": true } }, h("ifx-button", { variant: "secondary", onClick: () => this.fileInputEl?.click(), disabled: this.isInputDisabled(), "aria-label": this.ariaLabelBrowseFiles }, h("ifx-icon", { icon: "upload-16" }), this.labelBrowseFiles), h("input", { id: this.internalId, ref: handleInputRef, type: "file", accept: this.getAcceptAttribute(), multiple: true, onChange: (e) => this.handleFileChange(e), style: { display: "none" }, disabled: this.isInputDisabled(), "aria-label": this.ariaLabelFileInput }), h("p", { class: "file-upload-info" }, this.getSupportedFileText()), this.renderStatusMessage()));
+    }
+    renderDragAndDropArea() {
+        const handleInputRef = (el) => {
+            this.fileInputEl = el;
+        };
+        const triggerInputClick = () => {
+            if (this.fileInputEl) {
+                this.fileInputEl.click();
+            }
+        };
+        return (h("div", { class: { disabled: this.isInputDisabled() } }, h("div", { class: {
+                "upload-dropzone": true,
+                "drag-over": this.isDragOver,
+                error: this.requiredError,
+            }, onClick: triggerInputClick, onDragOver: (e) => this.handleDragOver(e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(e), role: "button", tabIndex: 0, "aria-label": this.ariaLabelDropzone }, h("ifx-icon", { icon: "upload-16", class: "custom-icon" }), h("p", null, this.labelDragAndDrop), h("p", { class: "file-upload-info" }, this.getSupportedFileText()), h("div", { style: { height: "0px", overflow: "hidden" } }, h("input", { id: this.internalId, ref: handleInputRef, type: "file", accept: this.getAcceptAttribute(), multiple: true, onChange: (e) => this.handleFileChange(e), disabled: this.isInputDisabled(), "aria-label": this.ariaLabelFileInput }))), this.renderStatusMessage()));
+    }
+    static get is() { return "ifx-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dragAndDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables drag-and-drop for file uploads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-and-drop",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether at least one file is rewuired."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the upload is disabled and not interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "maxFileSizeMB": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum file size allowed in megabytes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-size-m-b",
+                "defaultValue": "7"
+            },
+            "allowedFileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allowed-file-types",
+                "defaultValue": "undefined"
+            },
+            "additionalAllowedFileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra file types to allow in addition to the  default ones."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "additional-allowed-file-types",
+                "defaultValue": "[]"
+            },
+            "allowAnyFileType": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true, allows any file type to be uploaded (no file type restrictions)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-any-file-type",
+                "defaultValue": "false"
+            },
+            "allowedFileExtensions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom file extensions to allow (e.g., 'xml', 'asc', 'cfg'). Recommended format: without dots. Also accepts format with dots like '.xml'. Do not use wildcards like '*.xml'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allowed-file-extensions",
+                "defaultValue": "[]"
+            },
+            "uploadHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n\t\tfile: File,\n\t\tonProgress?: (progress: number) => void,\n\t) => Promise<void>",
+                    "resolved": "(file: File, onProgress?: (progress: number) => void) => Promise<void>",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom function that handels file upload and progress reporting."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": false,
+                "attribute": "max-files"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main label for the upload component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "\"Label\""
+            },
+            "labelRequiredError": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message shown when no file is uploaded but at least one is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-required-error",
+                "defaultValue": "\"At least one file must be uploaded\""
+            },
+            "labelBrowseFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the \u201Cbrowse files\u201D button or link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-browse-files",
+                "defaultValue": "\"Browse files\""
+            },
+            "labelDragAndDrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown in the drop zone area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-drag-and-drop",
+                "defaultValue": "\"Drag & Drop or browse files to upload\""
+            },
+            "labelUploadedFilesHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading label above the list of uploaded files."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-uploaded-files-heading",
+                "defaultValue": "\"Uploaded files\""
+            },
+            "labelFileTooLarge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when a file is too large ({{size}} is replaced with max size)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-file-too-large",
+                "defaultValue": "\"Upload failed. Max file size: {{size}}MB.\""
+            },
+            "labelUnsupportedFileType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message shown when the file type is not allowed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-unsupported-file-type",
+                "defaultValue": "\"Unsupported file type.\""
+            },
+            "labelUploaded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Status text for a successfully uploaded file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-uploaded",
+                "defaultValue": "\"Successfully uploaded\""
+            },
+            "labelUploadFailed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Generic error message shown when upload fails."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-upload-failed",
+                "defaultValue": "\"Upload failed. Please try again.\""
+            },
+            "labelSupportedFormatsTemplate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template text for listing supported formats and size ({{types}} and {{size}} are replaced)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-supported-formats-template",
+                "defaultValue": "\"Supported file formats: {{types}}. Max file size: {{size}}MB.\""
+            },
+            "labelFileSingular": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Singular word used for \u201Cfile\u201D in messages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-file-singular",
+                "defaultValue": "\"file\""
+            },
+            "labelFilePlural": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Plural word used for \u201Cfiles\u201D in messages."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-file-plural",
+                "defaultValue": "\"files\""
+            },
+            "labelMaxFilesInfo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Info text about the maximum number of files allowed ({{count}} and {{files}} are replaced)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-max-files-info",
+                "defaultValue": "\"Up to {{count}} {{files}}.\""
+            },
+            "labelMaxFilesExceeded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message shown when the max number of files is exceeded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-max-files-exceeded",
+                "defaultValue": "\"Upload limit exceeded. Only {{count}} {{files}} allowed.\""
+            },
+            "ariaLabelBrowseFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the \u201Cbrowse files\u201D control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-browse-files",
+                "defaultValue": "\"Browse files\""
+            },
+            "ariaLabelDropzone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the drop zone area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-dropzone",
+                "defaultValue": "\"Upload area. Click to browse or drag and drop files.\""
+            },
+            "ariaLabelFileInput": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the hidden/native file input element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-file-input",
+                "defaultValue": "\"Upload file\""
+            },
+            "ariaLabelRemoveFile": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the \u201Cremove file\u201D action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-remove-file",
+                "defaultValue": "\"Remove file\""
+            },
+            "ariaLabelCancelUpload": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the \u201Ccancel upload\u201D action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-cancel-upload",
+                "defaultValue": "\"Cancel upload\""
+            },
+            "ariaLabelRetryUpload": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label for the \u201Cretry upload\u201D action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-retry-upload",
+                "defaultValue": "\"Retry upload\""
+            },
+            "ariaLabelUploadingStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label describing that an upload is currently in progress."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-uploading-status",
+                "defaultValue": "\"Upload in progress\""
+            },
+            "ariaLabelUploadedStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label describing that upload has completed successfully."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-uploaded-status",
+                "defaultValue": "\"Upload completed\""
+            },
+            "ariaLabelUploadFailedStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA label describing that the upload has failed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-upload-failed-status",
+                "defaultValue": "\"Upload failed\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragOver": {},
+            "files": {},
+            "uploadTasks": {},
+            "rejectedSizeFiles": {},
+            "rejectedTypeFiles": {},
+            "requiredError": {},
+            "statusMessage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxFileUploadAdd",
+                "name": "ifxFileUploadAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when files are added (e.g. via browse or drop)."
+                },
+                "complexType": {
+                    "original": "{\n    addedFiles: File[];\n    files: File[];\n}",
+                    "resolved": "{ addedFiles: File[]; files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadRemove",
+                "name": "ifxFileUploadRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a file is removed from the list."
+                },
+                "complexType": {
+                    "original": "{\n    removedFile: File;\n    files: File[];\n}",
+                    "resolved": "{ removedFile: File; files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadChange",
+                "name": "ifxFileUploadChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired whenever the list of selected files changes."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadError",
+                "name": "ifxFileUploadError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when an upload-related error occurs."
+                },
+                "complexType": {
+                    "original": "{\n    errorType: string;\n    file: File;\n    message: string;\n    reason?: string;\n}",
+                    "resolved": "{ errorType: string; file: File; message: string; reason?: string; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadInvalid",
+                "name": "ifxFileUploadInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a file fails validation before upload."
+                },
+                "complexType": {
+                    "original": "{ file: File; reason: string }",
+                    "resolved": "{ file: File; reason: string; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadStart",
+                "name": "ifxFileUploadStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when upload starts for a file."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadComplete",
+                "name": "ifxFileUploadComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a single file upload finishes successfully."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadAllComplete",
+                "name": "ifxFileUploadAllComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when all file uploads have finished successfully."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadAbort",
+                "name": "ifxFileUploadAbort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when an ongoing upload is aborted/cancelled."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadDrop",
+                "name": "ifxFileUploadDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when files are dropped onto the drop zone."
+                },
+                "complexType": {
+                    "original": "{\n    droppedFiles: File[];\n    acceptedFiles: File[];\n    rejectedFiles: File[];\n}",
+                    "resolved": "{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadClick",
+                "name": "ifxFileUploadClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the upload area is clicked (typically to open file dialog)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxFileUploadMaxFilesExceeded",
+                "name": "ifxFileUploadMaxFilesExceeded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user tries to add more than the allowed number of files."
+                },
+                "complexType": {
+                    "original": "{\n    maxFiles: number;\n    attempted: number;\n}",
+                    "resolved": "{ maxFiles: number; attempted: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxFileUploadValidation",
+                "name": "ifxFileUploadValidation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired after validating the current files (valid or invalid)."
+                },
+                "complexType": {
+                    "original": "{ valid: boolean }",
+                    "resolved": "{ valid: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxFileUploadRetry",
+                "name": "ifxFileUploadRetry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user retries uploading a file after a failure."
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "injectDemoState": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Storybook Demo",
+                    "tags": []
+                }
+            },
+            "triggerDemoValidation": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Storybook Demo",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}