@infineon/infineon-design-system-stencil 33.3.0 → 33.3.1--canary.1824.9e747abc2c6c3dcc35abd2895ce37d503bd1f141.0

package/dist/cjs/ifx-alert_2.cjs.entry.js

@@ -177,7 +177,7 @@ const Template = class {
         }
     }
     render() {
-        return (index.h("div", { key: '846a13427fd8ac957e2ed543167f3679274c110d' }, this.isTemplatePage
+        return (index.h("div", { key: 'be6f91bdcf65d990045ce7beb573e18a5d25b96c' }, this.isTemplatePage
             ?
                 index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && index.h("div", null, index.h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && index.h("div", null, this.repoError))

package/dist/cjs/ifx-basic-table.cjs.entry.js

@@ -183,7 +183,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: '354a1e781e5323bb669fa4058bb757d99d131f9e' }, index.h("div", { key: '39ae396feba51be9babfa48c1614e223967ba125', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'be413883119cf1862cf171af2944dacf86d8b521', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: '5142758a2db73f270378e480ad4866b884cc5b14' }, index.h("div", { key: 'e0e8f0644f34ac4ba61644ecd449f5e926e786b0', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'e938e3410c348bbc226d75e07b70a3580486b726', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ifx-chip_3.cjs.entry.js

@@ -485,7 +485,7 @@ const Pagination = class {
         this.initPagination();
     }
     render() {
-        return (index.h("div", { key: 'bcdab8abc24c10ba0ad9cd3c71f627b88dec16fd', class: "container" }, index.h("div", { key: '6e91f29112ed3f16b6a4a7dd3772f1be98267c4e', class: "items__per-page-wrapper" }, index.h("div", { key: 'c55a1a8d5d213e58410e282401ff7ea1cb065719', class: "items__per-page-label" }, "Results per Page"), index.h("div", { key: 'aafdfb3482ca7da258fe12be652eb2fa9aee5109', class: "items__per-page-field" }, index.h("ifx-select", { key: '7539b53f66917ce6aa9eb6ff8dc7dfa91028e092', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), index.h("div", { key: '2fe1cf00bb8f56791443da1db747d68d68f898ab', class: "items__total-wrapper" }, index.h("div", { key: '5a8783ab57e95a898bacfb230a7d26ed56fb7830', class: "pagination" }, index.h("ifx-icon-button", { key: '792c14de7a13b461bbb076e8e2b31a1379ff87c1', class: "prev", icon: "arrow-left-24", onClick: () => this.changePage(this.internalPage - 1) }), index.h("ol", { key: '75ed8c16588e6822531145fb076b427010e822f5' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (index.h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, index.h("a", { href: "javascript:void(0)" }, page))) : (index.h("li", { class: "ellipsis", key: `ellipsis-${i}` }, index.h("span", null, "..."))))), index.h("ifx-icon-button", { key: '3375e62005080c9ae58059cc6b988e1879025d71', class: "next", icon: "arrow-right-24", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (index.h("div", { key: 'f698a31b53410da1c2e13fcf96b86369033c4342', class: "container" }, index.h("div", { key: '71542655e2e76337e866c2266ca32fd56fa041af', class: "items__per-page-wrapper" }, index.h("div", { key: 'b71fc0a3945051dfa321fe56bdf74424d0f4032e', class: "items__per-page-label" }, "Results per Page"), index.h("div", { key: '75afae25208d194f1f8ebcc9b0f462115ccb21ba', class: "items__per-page-field" }, index.h("ifx-select", { key: '21524346259b19f24ab3daef379acecd519cfd28', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), index.h("div", { key: '076eb08f4117de8b8fca19c809778e247b4dae18', class: "items__total-wrapper" }, index.h("div", { key: '0e13cab91e2dcbc84643a405ae34fdbe6c5ae35b', class: "pagination" }, index.h("ifx-icon-button", { key: '1e898b6189eac137ea9e420d4a5982afcfb35cac', class: "prev", icon: "arrow-left-24", onClick: () => this.changePage(this.internalPage - 1) }), index.h("ol", { key: 'c336abf1b7d28c83f9b0176468da44f36b902daf' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (index.h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, index.h("a", { href: "javascript:void(0)" }, page))) : (index.h("li", { class: "ellipsis", key: `ellipsis-${i}` }, index.h("span", null, "..."))))), index.h("ifx-icon-button", { key: '7e8ad73143c1b4c2c5ccd9cfc60a2549291467b8', class: "next", icon: "arrow-right-24", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-faq.cjs.entry.js

@@ -12,7 +12,7 @@ const Faq = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '654cada4bb1b178453c1183b8fe0554b38dbfa27', class: 'container' }, index.h("ifx-accordion", { key: 'a74e7603f6e9a772515d303342185453ec7cd809' }, index.h("ifx-accordion-item", { key: '5367585f585edd4a2ee9877a1611e2bca3aa966a', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '44ae0a274050c9d5f894a25f3f40f3688c95ff53', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: 'd97b7d946a933e70b7232f4dbbbb89c582d22b8d', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: '8c46c204474887279bba9976dd290237a0ce1797', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '829affec52cab85adf74014060bb2a4443be1533', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (index.h("div", { key: '1ef10be917644b56a0c61d123335a3b9807dc21e', class: 'container' }, index.h("ifx-accordion", { key: 'bb4bed20180007bd358dd62c5632e9bf64ced8aa' }, index.h("ifx-accordion-item", { key: '22f0b7e0a99560027f3b104c5aff5d4df497f08a', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '93af0d9eb81169d4295de96c2ad8a38c98f7472d', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: '513af2390df5b2c92103623b6ac468b58a951d5b', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: 'd198d32f2d537bc7c860aaa46f299188d07c3537', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '43ab4602486cb02854c8d76b3a2a0c2b7774be24', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = IfxFaqStyle0;

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

@@ -0,0 +1,570 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c9480f70.js');
+
+const fileUploadCss = ":root{font-family:\"Source Sans 3\", sans-serif}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{background:#F7F7F7}.upload-dropzone.drag-over,.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem \"Source Sans 3\";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}";
+const IfxFileUploadStyle0 = fileUploadCss;
+
+const IfxFileUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxFileUploadAdd = index.createEvent(this, "ifxFileUploadAdd", 7);
+        this.ifxFileUploadRemove = index.createEvent(this, "ifxFileUploadRemove", 7);
+        this.ifxFileUploadChange = index.createEvent(this, "ifxFileUploadChange", 7);
+        this.ifxFileUploadError = index.createEvent(this, "ifxFileUploadError", 7);
+        this.ifxFileUploadInvalid = index.createEvent(this, "ifxFileUploadInvalid", 7);
+        this.ifxFileUploadStart = index.createEvent(this, "ifxFileUploadStart", 7);
+        this.ifxFileUploadComplete = index.createEvent(this, "ifxFileUploadComplete", 7);
+        this.ifxFileUploadAllComplete = index.createEvent(this, "ifxFileUploadAllComplete", 7);
+        this.ifxFileUploadAbort = index.createEvent(this, "ifxFileUploadAbort", 7);
+        this.ifxFileUploadDrop = index.createEvent(this, "ifxFileUploadDrop", 7);
+        this.ifxFileUploadClick = index.createEvent(this, "ifxFileUploadClick", 7);
+        this.ifxFileUploadMaxFilesExceeded = index.createEvent(this, "ifxFileUploadMaxFilesExceeded", 7);
+        this.ifxFileUploadValidation = index.createEvent(this, "ifxFileUploadValidation", 7);
+        this.ifxFileUploadRetry = index.createEvent(this, "ifxFileUploadRetry", 7);
+        this.dragAndDrop = false;
+        this.required = false;
+        this.disabled = false;
+        this.maxFileSizeMB = 7;
+        /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */
+        this.allowedFileTypes = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];
+        this.additionalAllowedFileTypes = [];
+        this.label = 'Label';
+        this.labelRequiredError = 'At least one file must be uploaded';
+        this.labelBrowseFiles = 'Browse files';
+        this.labelDragAndDrop = 'Drag & Drop or browse files to upload';
+        this.labelUploadedFilesHeading = 'Uploaded files';
+        this.labelFileTooLarge = 'Upload failed. Max file size: {{size}}MB.';
+        this.labelUnsupportedFileType = 'Unsupported file type.';
+        this.labelUploaded = 'Successfully uploaded';
+        this.labelUploadFailed = 'Upload failed. Please try again.';
+        this.labelSupportedFormatsTemplate = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';
+        this.labelFileSingular = 'file';
+        this.labelFilePlural = 'files';
+        this.labelMaxFilesInfo = 'Up to {{count}} {{files}}.';
+        this.labelMaxFilesExceeded = 'Upload limit exceeded. Only {{count}} {{files}} allowed.';
+        this.ariaLabelBrowseFiles = 'Browse files';
+        this.ariaLabelDropzone = 'Upload area. Click to browse or drag and drop files.';
+        this.ariaLabelFileInput = 'Upload file';
+        this.ariaLabelRemoveFile = 'Remove file';
+        this.ariaLabelCancelUpload = 'Cancel upload';
+        this.ariaLabelRetryUpload = 'Retry upload';
+        this.ariaLabelUploadingStatus = 'Upload in progress';
+        this.ariaLabelUploadedStatus = 'Upload completed';
+        this.ariaLabelUploadFailedStatus = 'Upload failed';
+        this.internalId = `ifx-file-upload-${Math.random().toString(36).substr(2, 9)}`;
+        this.isDragOver = false;
+        this.files = [];
+        this.uploadTasks = [];
+        this.rejectedSizeFiles = [];
+        this.rejectedTypeFiles = [];
+        this.requiredError = false;
+        this.statusMessage = null;
+        this.fileInputEl = null;
+        this.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.
+             */
+            // 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',
+            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',
+            rar: 'application/vnd.rar',
+            tar: 'application/x-tar',
+            gz: 'application/gzip',
+            // Sonstiges
+            xml: 'application/xml',
+            html: 'text/html',
+            css: 'text/css',
+            js: 'application/javascript'
+        };
+    }
+    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;
+        }
+    }
+    validateRequired() {
+        var _a, _b;
+        if (this.required && this.files.length === 0) {
+            this.requiredError = true;
+            if (((_a = this.statusMessage) === null || _a === void 0 ? void 0 : _a.text) !== this.labelRequiredError) {
+                this.statusMessage = {
+                    type: 'error',
+                    text: this.labelRequiredError
+                };
+            }
+            this.ifxFileUploadValidation.emit({ valid: false });
+        }
+        else {
+            this.requiredError = false;
+            if (((_b = this.statusMessage) === null || _b === void 0 ? void 0 : _b.text) === this.labelRequiredError) {
+                this.statusMessage = null;
+            }
+            this.ifxFileUploadValidation.emit({ valid: true });
+        }
+    }
+    pluralize(count) {
+        return count === 1 ? this.labelFileSingular : this.labelFilePlural;
+    }
+    getNormalizedFileTypes() {
+        if (Array.isArray(this.allowedFileTypes)) {
+            return this.allowedFileTypes;
+        }
+        try {
+            return JSON.parse(this.allowedFileTypes);
+        }
+        catch (_a) {
+            return this.allowedFileTypes.split(',').map(t => t.trim());
+        }
+    }
+    getLabelFromMimeType(mime) {
+        for (const [ext, knownMime] of Object.entries(this.extensionToMimeMap)) {
+            if (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) {
+        var _a;
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+            const droppedFiles = Array.from(event.dataTransfer.files);
+            const allowedMimes = [
+                ...this.getNormalizedFileTypes()
+                    .map(ext => this.extensionToMimeMap[ext.toLowerCase()])
+                    .filter(Boolean),
+                ...this.getAdditionalMimeTypes()
+            ];
+            const acceptedFiles = [];
+            const rejectedFiles = [];
+            droppedFiles.forEach(file => {
+                const isValidType = allowedMimes.includes(file.type);
+                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 allowedMimes = [
+            ...this.getNormalizedFileTypes()
+                .map(ext => this.extensionToMimeMap[ext.toLowerCase()])
+                .filter(Boolean),
+            ...this.getAdditionalMimeTypes()
+        ];
+        const validFiles = [];
+        const rejectedSize = [];
+        const rejectedType = [];
+        selectedFiles.forEach(file => {
+            const isValidType = allowedMimes.includes(file.type);
+            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);
+    }
+    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) => {
+                if (percent > task.progress) {
+                    task.progress = Math.min(100, percent);
+                    this.uploadTasks = [...this.uploadTasks];
+                }
+            }).then(() => {
+                task.progress = 100;
+                task.completed = true;
+                this.uploadTasks = [...this.uploadTasks];
+                this.ifxFileUploadComplete.emit({ file });
+                this.ifxFileUploadChange.emit({ files: this.files });
+                if (this.uploadTasks.every(t => t.completed)) {
+                    this.ifxFileUploadAllComplete.emit({ files: this.files });
+                }
+            }).catch(() => {
+                task.error = true;
+                this.uploadTasks = [...this.uploadTasks];
+                this.ifxFileUploadError.emit({
+                    file,
+                    errorType: 'upload-failed',
+                    message: 'Upload handler rejected file',
+                    reason: 'custom'
+                });
+            });
+        }
+        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));
+                task.progress = progress;
+                this.uploadTasks = [...this.uploadTasks];
+                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 });
+                    if (this.uploadTasks.every(t => t.completed)) {
+                        this.ifxFileUploadAllComplete.emit({ files: this.files });
+                    }
+                }
+            }, 200);
+        }
+        this.uploadTasks = [...this.uploadTasks, task];
+    }
+    cancelUpload(file) {
+        const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);
+        if (taskIndex !== -1) {
+            const task = this.uploadTasks[taskIndex];
+            if ((task === null || task === void 0 ? void 0 : 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 });
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+        this.validateRequired();
+    }
+    removeFile(file) {
+        var _a;
+        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();
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+        if (this.maxFiles &&
+            this.files.length < this.maxFiles &&
+            ((_a = this.statusMessage) === null || _a === void 0 ? void 0 : _a.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);
+        }
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+        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) {
+        var _a;
+        const extension = (_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.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() {
+        const extensionTypes = this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase());
+        const mimeTypes = this.getAdditionalMimeTypes();
+        return [...extensionTypes, ...mimeTypes].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() {
+        const extensions = this.getNormalizedFileTypes().map(ext => ext.toUpperCase());
+        const mimeTypes = this.getAdditionalMimeTypes().map(mime => this.getLabelFromMimeType(mime));
+        const allTypes = [...extensions, ...mimeTypes];
+        const typesLabel = 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 (index.h("div", { class: `file-upload-status file-upload-status__${this.statusMessage.type}` }, this.statusMessage.type === 'error' && (index.h("ifx-icon", { icon: "c-warning-16" })), this.statusMessage.text));
+    }
+    isInputDisabled() {
+        return this.disabled || (this.maxFiles !== undefined && this.files.length >= this.maxFiles);
+    }
+    componentDidLoad() {
+        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 (index.h("div", { key: 'a80f89cee43ccff778f59842bb62e64e4b425753', class: {
+                'file-upload-wrapper': true,
+                'disabled': this.disabled
+            } }, this.label && (index.h("label", { key: 'b7de45f36b57f21185fc43173a90dd8fbda0b690', class: "file-upload-label", htmlFor: this.internalId }, this.label, this.required && (index.h("span", { key: 'd72b7c08c54f8fad7ea298df762b815eb565f648', class: `required ${this.requiredError ? 'error' : ''}` }, "*")))), this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), (this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (index.h("div", { key: 'f0553b7a7f45764c416d5daa594aa9b1232f6399', class: "file-list-wrapper" }, index.h("div", { key: '56a0a3004b16ecb9bb348a274c2c2a286ca745e1', class: "upload-heading" }, this.labelUploadedFilesHeading), index.h("ul", { key: 'f0076761dab5015e5dd02f5ae8f8e4d65f5e9eef', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (index.h("li", { class: "file-item upload-failed", key: `rejected-size-${fileName}` }, index.h("div", { class: "file-icon" }, index.h("ifx-icon", { icon: "file-16" })), index.h("div", { class: "file-info" }, index.h("div", { class: "file-top-row" }, index.h("span", { class: "file-name-wrapper" }, index.h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), index.h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), index.h("div", { class: "file-actions" }, index.h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'size') }))), index.h("div", { class: "file-middle-row" }, index.h("span", { class: "file-status", "aria-label": this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString()) }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (index.h("li", { class: "file-item upload-failed", key: `rejected-type-${fileName}` }, index.h("div", { class: "file-icon" }, index.h("ifx-icon", { icon: "file-16" })), index.h("div", { class: "file-info" }, index.h("div", { class: "file-top-row" }, index.h("span", { class: "file-name-wrapper" }, index.h("span", { class: "file-name-base" }, this.splitFileNameParts({ name: fileName }).base), index.h("span", { class: "file-name-ext" }, this.splitFileNameParts({ name: fileName }).ext)), index.h("div", { class: "file-actions" }, index.h("ifx-icon-button", { shape: "square", variant: "tertiary", icon: "delete-forever-16", size: "s", "aria-label": this.ariaLabelRemoveFile, onClick: () => this.clearRejectedFile(fileName, 'type') }))), index.h("div", { class: "file-middle-row" }, index.h("span", { class: "file-status", "aria-label": this.labelUnsupportedFileType }, this.labelUnsupportedFileType)))))), this.files.map((file) => {
+            var _a;
+            const task = this.uploadTasks.find(t => t.file.name === file.name);
+            const progress = (_a = task === null || task === void 0 ? void 0 : task.progress) !== null && _a !== void 0 ? _a : 100;
+            const isUploading = task && !task.completed;
+            const isError = (task === null || task === void 0 ? void 0 : 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 (index.h("li", { class: itemClass, key: uniqueKey }, index.h("div", { class: "file-icon" }, index.h("ifx-icon", { icon: this.getFileIcon(file) })), index.h("div", { class: "file-info" }, index.h("div", { class: "file-top-row" }, index.h("span", { class: "file-name-wrapper" }, index.h("span", { class: "file-name-base" }, base), index.h("span", { class: "file-name-ext" }, ext)), index.h("div", { class: "file-actions" }, index.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' } }), index.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' } }), index.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' } }))), index.h("div", { class: "file-middle-row" }, isUploading && task && !task.error && (index.h("span", { class: "file-uploading", "aria-label": this.ariaLabelUploadingStatus }, this.getFormattedProgressText(task))), !isUploading && !isError && (index.h("span", null, index.h("span", { class: "file-size" }, this.formatSize(file.size)), index.h("span", { class: "file-status", "aria-label": this.ariaLabelUploadedStatus }, index.h("ifx-icon", { icon: "check-12" }), this.labelUploaded))), isError && (index.h("span", { class: "file-status", "aria-label": this.ariaLabelUploadFailedStatus }, this.labelUploadFailed))), isUploading && task && !task.error && (index.h("div", { class: "file-progress-row" }, index.h("ifx-progress-bar", { size: "s", value: progress, "show-label": "true" }))))));
+        }))))));
+    }
+    renderUploadArea() {
+        const handleInputRef = (el) => {
+            this.fileInputEl = el;
+        };
+        return (index.h("div", { class: { 'upload-button': true } }, index.h("ifx-button", { variant: "secondary", onClick: () => { var _a; return (_a = this.fileInputEl) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.isInputDisabled(), "aria-label": this.ariaLabelBrowseFiles }, index.h("ifx-icon", { icon: "upload-16" }), this.labelBrowseFiles), index.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 }), index.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 (index.h("div", { class: { 'disabled': this.isInputDisabled() } }, index.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 }, index.h("ifx-icon", { icon: "upload-24", class: "custom-icon" }), index.h("p", null, this.labelDragAndDrop), index.h("p", { class: "file-upload-info" }, this.getSupportedFileText()), index.h("div", { style: { height: '0px', overflow: 'hidden' } }, index.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()));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+IfxFileUpload.style = IfxFileUploadStyle0;
+
+exports.ifx_file_upload = IfxFileUpload;
+
+//# sourceMappingURL=ifx-file-upload.cjs.entry.js.map