@infineon/infineon-design-system-stencil 33.1.1--canary.1804.4db5a203a5155eeaa530f6fcf69f064532731762.0 → 33.1.1--canary.1824.75b5030250f4474f2c947b6e8dc7055bdc915c43.0

package/dist/components/ifx-checkbox-group.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$2 } from './p-35d83f23.js';
 
 const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem \"Source Sans 3\";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem \"Source Sans 3\";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
 const IfxCheckboxGroupStyle0 = checkboxGroupCss;

package/dist/components/ifx-checkbox.js

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-4ac265d2.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-846923e6.js';
 
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip-item.js

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-47b9635d.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-1678fee6.js';
 
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-b024aa08.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-d1985f77.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-date-picker.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$2 } from './p-35d83f23.js';
 
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
 const IfxDatePickerStyle0 = datePickerCss;

package/dist/components/ifx-download.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$2 } from './p-02830916.js';
+import { d as defineCustomElement$2 } from './p-ccc83a43.js';
 
 const downloadCss = "";
 const IfxDownloadStyle0 = downloadCss;

package/dist/components/ifx-dropdown-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$2 } from './p-35d83f23.js';
 
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;

package/dist/components/ifx-dropdown-trigger-button.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
 import { d as defineCustomElement$3 } from './p-c2b0bf22.js';
-import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$2 } from './p-35d83f23.js';
 
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;

package/dist/components/ifx-faq.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-2cc378b8.js';
 import { d as defineCustomElement$4 } from './p-905fb988.js';
-import { d as defineCustomElement$3 } from './p-94e019a6.js';
-import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$3 } from './p-2bc9826e.js';
+import { d as defineCustomElement$2 } from './p-35d83f23.js';
 
 const faqCss = ".container{padding-top:10px}";
 const IfxFaqStyle0 = faqCss;
@@ -13,7 +13,7 @@ const Faq = /*@__PURE__*/ proxyCustomElement(class Faq extends H {
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '38fe3ec5631fe45adcc35588f571cb04b9c2ff86', class: 'container' }, h("ifx-accordion", { key: '0a200c6d581b25df4d1ac5109a552fb03ce19248' }, h("ifx-accordion-item", { key: '817f3277cafe0434924c77df5f535a1aed24c31d', 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."), h("ifx-accordion-item", { key: 'c26ade22de3178d88f441dfeaf13af56b39a225e', 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."), h("ifx-accordion-item", { key: 'f294796deb5779d31b8d0436c0ebce363e17d51b', 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.)"), h("ifx-accordion-item", { key: '17996798e2b1a74e4ba64e0745cccc3de1af63dc', 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."), h("ifx-accordion-item", { key: 'f3246800892322c806e8710a8c7824b7dffa6a34', 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 (h("div", { key: 'b928d2815cf245bb06c56c43640204f443f25cf0', class: 'container' }, h("ifx-accordion", { key: 'fda9c230bf25223999d8776d15b00b28a6f39cdf' }, h("ifx-accordion-item", { key: 'c36c4b6bc64457232e64d5e15234306d70e383ec', 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."), h("ifx-accordion-item", { key: '703569935c7f5fc12adc3bb187d89dc6b2b55d6b', 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."), h("ifx-accordion-item", { key: '1c389e91f6c73984a9993fe44d5a76218018213e', 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.)"), h("ifx-accordion-item", { key: '6300f9e81e7eb1187ee98ffdab5fc13b1f387156', 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."), h("ifx-accordion-item", { key: 'a87958c2ed73c8ce22bca5ee9a3e7b324671020a', 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."))));
     }
     static get style() { return IfxFaqStyle0; }
 }, [1, "ifx-faq"]);

package/dist/components/ifx-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxFileUpload extends Components.IfxFileUpload, HTMLElement {}
+export const IfxFileUpload: {
+    prototype: IfxFileUpload;
+    new (): IfxFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,377 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
+import { d as defineCustomElement$5 } from './p-c2b0bf22.js';
+import { d as defineCustomElement$4 } from './p-35d83f23.js';
+import { d as defineCustomElement$3 } from './p-fc183f8e.js';
+import { d as defineCustomElement$2 } from './p-cf1e2d94.js';
+
+const fileUploadCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.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{border:1px solid #0A8276;background:#F7F7F7}.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-list{list-style:none;padding:0;margin:0;margin-top:16px;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding:16px;display:flex;gap:16px}.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:16px}.file-progress-row{margin-top:16px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:2px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}";
+const IfxFileUploadStyle0 = fileUploadCss;
+
+const IfxFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class IfxFileUpload extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ifxFileUploadAdd = createEvent(this, "ifxFileUploadAdd", 7);
+        this.ifxFileUploadRemove = createEvent(this, "ifxFileUploadRemove", 7);
+        this.ifxFileUploadChange = createEvent(this, "ifxFileUploadChange", 7);
+        this.ifxFileUploadError = createEvent(this, "ifxFileUploadError", 7);
+        this.ifxFileUploadInvalid = createEvent(this, "ifxFileUploadInvalid", 7);
+        this.ifxFileUploadStart = createEvent(this, "ifxFileUploadStart", 7);
+        this.ifxFileUploadComplete = createEvent(this, "ifxFileUploadComplete", 7);
+        this.ifxFileUploadAbort = createEvent(this, "ifxFileUploadAbort", 7);
+        this.ifxFileUploadDrop = createEvent(this, "ifxFileUploadDrop", 7);
+        this.ifxFileUploadClick = createEvent(this, "ifxFileUploadClick", 7);
+        this.dragAndDrop = false;
+        this.maxFileSizeMB = 7;
+        this.allowedFileTypes = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];
+        this.labelBrowseFiles = 'Browse files';
+        this.labelDragAndDrop = 'Drag & Drop or browse files to upload';
+        this.labelFileTooLarge = 'Upload failed. Max file size: {{size}}MB.';
+        this.labelUnsupportedFileType = 'Unsupported file type.';
+        this.labelUploaded = 'Successfully uploaded';
+        this.labelSupportedFormatsTemplate = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';
+        this.isDragOver = false;
+        this.files = [];
+        this.uploadTasks = [];
+        this.rejectedSizeFiles = [];
+        this.rejectedTypeFiles = [];
+        this.fileInputEl = null;
+        this.extensionToMimeMap = {
+            jpg: 'image/jpeg',
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            pdf: 'application/pdf',
+            mov: 'video/quicktime',
+            mp3: 'audio/mpeg',
+            mp4: 'video/mp4'
+        };
+    }
+    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());
+        }
+    }
+    handleFileChange(event) {
+        const input = event.target;
+        if (!input.files)
+            return;
+        this.processFiles(input.files);
+    }
+    handleDrop(event) {
+        var _a;
+        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);
+            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) {
+        event.preventDefault();
+        this.isDragOver = true;
+    }
+    handleDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    processFiles(fileList) {
+        const selectedFiles = Array.from(fileList);
+        const allowedMimes = this.getNormalizedFileTypes()
+            .map(ext => this.extensionToMimeMap[ext.toLowerCase()])
+            .filter(Boolean);
+        const validFiles = [];
+        const rejectedSize = [];
+        const rejectedType = [];
+        selectedFiles.forEach(file => {
+            const isValidType = allowedMimes.includes(file.type);
+            const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;
+            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' });
+            }
+        });
+        this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];
+        this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];
+        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 });
+        }
+    }
+    startUpload(file) {
+        this.ifxFileUploadStart.emit({ file });
+        const task = {
+            file,
+            progress: 0,
+            intervalId: null,
+            completed: false
+        };
+        if (this.uploadHandler) {
+            // Real Upload
+            // <ifx-file-upload
+            //   uploadHandler={(file) => {
+            //     const formData = new FormData();
+            //     formData.append('file', file);
+            //     return fetch('/api/upload', {
+            //       method: 'POST',
+            //       body: formData
+            //     }).then(res => {
+            //       if (!res.ok) throw new Error('Upload failed');
+            //     });
+            //   }}
+            // ></ifx-file-upload>
+            this.uploadHandler(file).then(() => {
+                task.progress = 100;
+                task.completed = true;
+                this.uploadTasks = [...this.uploadTasks];
+                this.ifxFileUploadComplete.emit({ file });
+                this.ifxFileUploadChange.emit({ files: this.files });
+            }).catch(() => {
+                console.error('Upload failed');
+                this.ifxFileUploadError.emit({ file, errorType: 'upload-failed', message: 'Upload handler rejected file' });
+            });
+        }
+        else {
+            const totalSize = file.size;
+            const fakeUploadSpeed = 500000;
+            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 });
+                }
+            }, 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 = '';
+        }
+    }
+    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 });
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+    }
+    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 = '';
+        }
+    }
+    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';
+        }
+    }
+    getFormattedSize(file) {
+        const sizeInKB = file.size / 1024;
+        return sizeInKB > 1024
+            ? `${(sizeInKB / 1024).toFixed(1)} MB`
+            : `${sizeInKB.toFixed(0)} KB`;
+    }
+    getAcceptAttribute() {
+        return this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase()).join(',');
+    }
+    getSupportedFileText() {
+        return this.labelSupportedFormatsTemplate
+            .replace('{{types}}', this.getNormalizedFileTypes().map(ext => ext.toUpperCase()).join(', '))
+            .replace('{{size}}', this.maxFileSizeMB.toString());
+    }
+    getFormattedFileTooLargeText() {
+        return this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString());
+    }
+    componentDidLoad() {
+        if (this.hostElement.hasAttribute('show-demo-states')) {
+            this.showDemoStates = true;
+        }
+        if (this.showDemoStates) {
+            this.injectDemoState();
+        }
+    }
+    async injectDemoState() {
+        const uploading = new File(['demo'], 'Image.jpg', { type: 'image/jpeg' });
+        const uploaded = new File(['demo'], 'File.pdf', { type: 'application/pdf' });
+        const tooLarge = new File(['demo'], 'Video.mp4', { type: 'video/mp4' });
+        const unsupported = new File(['demo'], 'Script.exe', { type: 'application/x-msdownload' });
+        this.files = [uploaded, uploading];
+        this.uploadTasks = [
+            { file: uploaded, progress: 100, intervalId: null, completed: true },
+            { file: uploading, progress: 35, intervalId: null, completed: false }
+        ];
+        this.rejectedSizeFiles = [tooLarge.name];
+        this.rejectedTypeFiles = [unsupported.name];
+    }
+    render() {
+        return (h("div", { key: '9ebbf4de0d20c25b5c0167dd48b6ab4d538ca736', class: "file-upload-wrapper" }, this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea(), h("ul", { key: 'ad545c35ebfaf6016b4cebe0d11d0f4798816718', class: "file-list" }, this.rejectedSizeFiles.map(fileName => (h("li", { class: "file-item upload-failed" }, 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": "Remove file", onClick: () => this.clearRejectedFile(fileName, 'size') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status" }, this.getFormattedFileTooLargeText())))))), this.rejectedTypeFiles.map(fileName => (h("li", { class: "file-item upload-failed" }, 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": "Remove file", onClick: () => this.clearRejectedFile(fileName, 'type') }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-status" }, 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 itemClass = isUploading ? 'file-item uploading' : 'file-item upload-success';
+            const { base, ext } = this.splitFileNameParts(file);
+            return (h("li", { class: itemClass }, 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: "cross-16", size: "s", "aria-label": "Cancel upload", 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": "Remove file", onClick: () => this.removeFile(file), style: { display: !isUploading ? 'inline-flex' : 'none' } }))), h("div", { class: "file-middle-row" }, h("span", { class: "file-size" }, this.getFormattedSize(file)), isUploading && (h("span", { class: "file-uploading" }, "\u00A0\u2013\u00A0Uploading \u2026")), h("span", { class: "file-status" }, !isUploading && (h("span", null, h("ifx-icon", { icon: "check-12" }), "\u00A0", this.labelUploaded)))), isUploading && (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("label", null, h("ifx-button", { variant: "secondary" }, h("ifx-icon", { icon: "upload-16" }), this.labelBrowseFiles), h("input", { ref: handleInputRef, type: "file", accept: this.getAcceptAttribute(), multiple: true, onChange: (e) => this.handleFileChange(e), style: { display: 'none' } })), h("p", { class: "file-upload-info" }, this.getSupportedFileText())));
+    }
+    renderDragAndDropArea() {
+        const handleInputRef = (el) => {
+            this.fileInputEl = el;
+        };
+        const triggerInputClick = () => {
+            if (this.fileInputEl) {
+                this.fileInputEl.click();
+            }
+        };
+        return (h("div", { class: { 'upload-dropzone': true, 'drag-over': this.isDragOver }, onClick: triggerInputClick, onDragOver: (e) => this.handleDragOver(e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(e) }, h("ifx-icon", { icon: "upload-24", 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", { ref: handleInputRef, type: "file", accept: this.getAcceptAttribute(), multiple: true, onChange: (e) => this.handleFileChange(e) }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return IfxFileUploadStyle0; }
+}, [1, "ifx-file-upload", {
+        "dragAndDrop": [4, "drag-and-drop"],
+        "maxFileSizeMB": [2, "max-file-size-m-b"],
+        "allowedFileTypes": [1, "allowed-file-types"],
+        "uploadHandler": [16],
+        "labelBrowseFiles": [1, "label-browse-files"],
+        "labelDragAndDrop": [1, "label-drag-and-drop"],
+        "labelFileTooLarge": [1, "label-file-too-large"],
+        "labelUnsupportedFileType": [1, "label-unsupported-file-type"],
+        "labelUploaded": [1, "label-uploaded"],
+        "labelSupportedFormatsTemplate": [1, "label-supported-formats-template"],
+        "isDragOver": [32],
+        "files": [32],
+        "uploadTasks": [32],
+        "rejectedSizeFiles": [32],
+        "rejectedTypeFiles": [32],
+        "injectDemoState": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-file-upload", "ifx-button", "ifx-icon", "ifx-icon-button", "ifx-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-file-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, IfxFileUpload$1);
+            }
+            break;
+        case "ifx-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ifx-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ifx-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ifx-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IfxFileUpload = IfxFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IfxFileUpload, defineCustomElement };
+
+//# sourceMappingURL=ifx-file-upload.js.map

package/dist/components/ifx-file-upload.js.map

@@ -0,0 +1 @@
+{"file":"ifx-file-upload.js","mappings":"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","names":["IfxFileUpload"],"sources":["src/components/file-upload/file-upload.scss?tag=ifx-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  font-family: var(--ifx-font-family, sans-serif);\n}\n\n.file-upload-wrapper {\n  display: flex;\n  flex-direction: column;\n}\n\n.upload-dropzone {\n  border: 1px dashed tokens.$ifxColorEngineering300;\n  padding: tokens.$ifxSpace500;\n  text-align: center;\n  cursor: pointer;\n  color: tokens.$ifxColorBaseBlack;\n  transition: border-color 0.3s ease;\n  border-radius: tokens.$ifxBorderRadius12;\n  background: tokens.$ifxColorBaseWhite;\n\n  ifx-icon {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover {\n    border: 1px dashed tokens.$ifxColorEngineering400;\n  }\n}\n\n.upload-dropzone.drag-over {\n  border: 1px solid tokens.$ifxColorOcean500;\n  background: tokens.$ifxColorEngineering100;\n}\n\n.upload-dropzone input {\n  display: none;\n}\n\n.file-upload-info {\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  letter-spacing: tokens.$ifxLetterSpacingDefault;\n  color: tokens.$ifxColorBaseBlack;\n  margin: 0;\n  margin-top: tokens.$ifxSpace50;\n}\n\n.file-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  margin-top: tokens.$ifxSpace200;\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace200;\n}\n\n.file-item {\n  border: 1px solid tokens.$ifxColorEngineering300;\n  padding: tokens.$ifxSpace200;\n  display: flex;\n  gap: tokens.$ifxSpace200;\n}\n\n.file-info {\n  width: 100%;\n  min-width: 0;\n}\n\n.file-top-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: tokens.$ifxSpace200;\n  margin-top: - tokens.$ifxSpace100;\n}\n\n.file-top-row ifx-icon {\n  flex-shrink: 0;\n}\n\n.file-name-wrapper {\n  display: flex;\n  min-width: 0;\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeS;\n}\n\n.file-name-base {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.file-name-ext {\n  flex-shrink: 0;\n  margin-left: 0;\n}\n\n.file-middle-row {\n  display: flex;\n  align-items: center;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  flex-wrap: wrap;\n  color: tokens.$ifxColorEngineering500;\n\n  .file-status {\n    margin-left: tokens.$ifxSpace200;\n  }\n}\n\n.file-progress-row {\n  margin-top: tokens.$ifxSpace200;\n}\n\n.file-progress-row ifx-progress-bar {\n  width: 100%;\n}\n\n.upload-success {\n  border-color: tokens.$ifxColorOcean500;\n\n  .file-status {\n    ifx-icon {\n      position: relative;\n      top: tokens.$ifxSpace25;\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n}\n\n.upload-failed {\n  border-color: tokens.$ifxColorRed500;\n\n  .file-status {\n    color: tokens.$ifxColorRed500;\n    margin-left: 0;\n  }\n}\n","import { Component, h, State, Event, EventEmitter, Prop, Method, Element } from '@stencil/core';\n\ninterface UploadTask {\n  file: File;\n  progress: number;\n  intervalId: number | null;\n  completed: boolean;\n}\n\n@Component({\n  tag: 'ifx-file-upload',\n  styleUrl: 'file-upload.scss',\n  shadow: true\n})\nexport class IfxFileUpload {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() dragAndDrop: boolean = false;\n  @Prop() maxFileSizeMB: number = 7;\n  @Prop() allowedFileTypes: string | string[] = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];\n  @Prop() uploadHandler?: (file: File) => Promise<void>;\n\n  @Prop() labelBrowseFiles: string = 'Browse files';\n  @Prop() labelDragAndDrop: string = 'Drag & Drop or browse files to upload';\n  @Prop() labelFileTooLarge: string = 'Upload failed. Max file size: {{size}}MB.';\n  @Prop() labelUnsupportedFileType: string = 'Unsupported file type.';\n  @Prop() labelUploaded: string = 'Successfully uploaded';\n  @Prop() labelSupportedFormatsTemplate: string = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';\n\n  private showDemoStates?: boolean;\n\n  @State() isDragOver: boolean = false;\n  @State() files: File[] = [];\n  @State() uploadTasks: UploadTask[] = [];\n  @State() rejectedSizeFiles: string[] = [];\n  @State() rejectedTypeFiles: string[] = [];\n\n  @Event() ifxFileUploadAdd: EventEmitter<{ addedFiles: File[]; files: File[] }>;\n  @Event() ifxFileUploadRemove: EventEmitter<{ removedFile: File; files: File[] }>;\n  @Event() ifxFileUploadChange: EventEmitter<{ files: File[] }>;\n  @Event() ifxFileUploadError: EventEmitter<{ errorType: string; file: File; message: string }>;\n  @Event() ifxFileUploadInvalid: EventEmitter<{ file: File; reason: string }>;\n  @Event() ifxFileUploadStart: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadComplete: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadAbort: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadDrop: EventEmitter<{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[] }>;\n  @Event() ifxFileUploadClick: EventEmitter<void>;\n\n  private fileInputEl: HTMLInputElement | null = null;\n\n  private extensionToMimeMap: Record<string, string> = {\n    jpg: 'image/jpeg',\n    jpeg: 'image/jpeg',\n    png: 'image/png',\n    pdf: 'application/pdf',\n    mov: 'video/quicktime',\n    mp3: 'audio/mpeg',\n    mp4: 'video/mp4'\n  };\n\n  private getNormalizedFileTypes(): string[] {\n    if (Array.isArray(this.allowedFileTypes)) {\n      return this.allowedFileTypes;\n    }\n    try {\n      return JSON.parse(this.allowedFileTypes);\n    } catch {\n      return this.allowedFileTypes.split(',').map(t => t.trim());\n    }\n  }\n\n  handleFileChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (!input.files) return;\n    this.processFiles(input.files);\n  }\n\n  handleDrop(event: DragEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n    if (event.dataTransfer?.files) {\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      const allowedMimes = this.getNormalizedFileTypes()\n        .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n        .filter(Boolean);\n\n      const acceptedFiles: File[] = [];\n      const rejectedFiles: File[] = [];\n\n      droppedFiles.forEach(file => {\n        const isValidType = allowedMimes.includes(file.type);\n        const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n        if (isValidType && isValidSize) acceptedFiles.push(file);\n        else rejectedFiles.push(file);\n      });\n\n      this.ifxFileUploadDrop.emit({\n        droppedFiles,\n        acceptedFiles,\n        rejectedFiles\n      });\n\n      this.processFiles(event.dataTransfer.files);\n    }\n  }\n\n  handleDragOver(event: DragEvent) {\n    event.preventDefault();\n    this.isDragOver = true;\n  }\n\n  handleDragLeave(event: DragEvent) {\n    event.preventDefault();\n    this.isDragOver = false;\n  }\n\n  processFiles(fileList: FileList) {\n    const selectedFiles = Array.from(fileList);\n    const allowedMimes = this.getNormalizedFileTypes()\n      .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n      .filter(Boolean);\n\n    const validFiles: File[] = [];\n    const rejectedSize: string[] = [];\n    const rejectedType: string[] = [];\n\n    selectedFiles.forEach(file => {\n      const isValidType = allowedMimes.includes(file.type);\n      const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n\n      if (isValidType && isValidSize) {\n        validFiles.push(file);\n      } else {\n        if (!isValidType) {\n          rejectedType.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-type' });\n        }\n        if (!isValidSize) {\n          rejectedSize.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-size' });\n        }\n        this.ifxFileUploadError.emit({ file, errorType: !isValidType ? 'invalid-type' : 'file-too-large', message: 'Invalid file rejected' });\n      }\n    });\n\n    this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];\n    this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];\n\n    validFiles.forEach(file => this.startUpload(file));\n    this.files = [...this.files, ...validFiles];\n\n    if (validFiles.length > 0) {\n      this.ifxFileUploadAdd.emit({ addedFiles: validFiles, files: this.files });\n      this.ifxFileUploadChange.emit({ files: this.files });\n    }\n  }\n\n  startUpload(file: File) {\n    this.ifxFileUploadStart.emit({ file });\n\n    const task: UploadTask = {\n      file,\n      progress: 0,\n      intervalId: null,\n      completed: false\n    };\n\n    if (this.uploadHandler) {\n      // Real Upload\n\n      // <ifx-file-upload\n      //   uploadHandler={(file) => {\n      //     const formData = new FormData();\n      //     formData.append('file', file);\n      //     return fetch('/api/upload', {\n      //       method: 'POST',\n      //       body: formData\n      //     }).then(res => {\n      //       if (!res.ok) throw new Error('Upload failed');\n      //     });\n      //   }}\n      // ></ifx-file-upload>\n\n      this.uploadHandler(file).then(() => {\n        task.progress = 100;\n        task.completed = true;\n        this.uploadTasks = [...this.uploadTasks];\n        this.ifxFileUploadComplete.emit({ file });\n        this.ifxFileUploadChange.emit({ files: this.files });\n      }).catch(() => {\n        console.error('Upload failed');\n        this.ifxFileUploadError.emit({ file, errorType: 'upload-failed', message: 'Upload handler rejected file' });\n      });\n    } else {\n      const totalSize = file.size;\n      const fakeUploadSpeed = 500000;\n      let uploaded = 0;\n\n      task.intervalId = window.setInterval(() => {\n        uploaded += fakeUploadSpeed / 5;\n        const progress = Math.min(100, Math.round((uploaded / totalSize) * 100));\n        task.progress = progress;\n        this.uploadTasks = [...this.uploadTasks];\n\n        if (progress >= 100) {\n          clearInterval(task.intervalId!);\n          task.completed = true;\n          task.intervalId = null;\n          this.uploadTasks = [...this.uploadTasks];\n          this.ifxFileUploadComplete.emit({ file });\n          this.ifxFileUploadChange.emit({ files: this.files });\n        }\n      }, 200);\n    }\n\n    this.uploadTasks = [...this.uploadTasks, task];\n  }\n\n  cancelUpload(file: File) {\n    const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n    if (taskIndex !== -1) {\n      const task = this.uploadTasks[taskIndex];\n      if (task?.intervalId !== null) {\n        clearInterval(task.intervalId);\n      }\n      this.uploadTasks = this.uploadTasks.filter((_, i) => i !== taskIndex);\n    }\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadAbort.emit({ file });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  }\n\n  removeFile(file: File) {\n    this.uploadTasks = this.uploadTasks.filter(task => task.file.name !== file.name);\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadRemove.emit({ removedFile: file, files: this.files });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  }\n\n  clearRejectedFile(fileName: string, type: 'size' | 'type') {\n    if (type === 'size') {\n      this.rejectedSizeFiles = this.rejectedSizeFiles.filter(f => f !== fileName);\n    } else {\n      this.rejectedTypeFiles = this.rejectedTypeFiles.filter(f => f !== fileName);\n    }\n\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  }\n\n  splitFileNameParts(file: File): { base: string; ext: string } {\n    const name = file.name;\n    const dotIndex = name.lastIndexOf('.');\n    if (dotIndex === -1) return { base: name, ext: '' };\n    return {\n      base: name.substring(0, dotIndex),\n      ext: name.substring(dotIndex)\n    };\n  }\n\n  getFileIcon(file: File): string {\n    const extension = file.name.split('.').pop()?.toLowerCase();\n    switch (extension) {\n      case 'pdf': return 'file-pdf-16';\n      case 'jpg':\n      case 'jpeg': return 'file-jpg-16';\n      case 'png': return 'file-png-16';\n      case 'mov': return 'file-mov-16';\n      case 'mp3': return 'file-mp3-16';\n      case 'mp4': return 'file-mp4-16';\n      default: return 'file';\n    }\n  }\n\n  getFormattedSize(file: File): string {\n    const sizeInKB = file.size / 1024;\n    return sizeInKB > 1024\n      ? `${(sizeInKB / 1024).toFixed(1)} MB`\n      : `${sizeInKB.toFixed(0)} KB`;\n  }\n\n  getAcceptAttribute(): string {\n    return this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase()).join(',');\n  }\n\n  private getSupportedFileText(): string {\n    return this.labelSupportedFormatsTemplate\n      .replace('{{types}}', this.getNormalizedFileTypes().map(ext => ext.toUpperCase()).join(', '))\n      .replace('{{size}}', this.maxFileSizeMB.toString());\n  }\n\n  private getFormattedFileTooLargeText(): string {\n    return this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString());\n  }\n\n  componentDidLoad() {\n    if (this.hostElement.hasAttribute('show-demo-states')) {\n      this.showDemoStates = true;\n    }\n\n    if (this.showDemoStates) {\n      this.injectDemoState();\n    }\n  }\n\n  @Method()\n  async injectDemoState() {\n    const uploading = new File(['demo'], 'Image.jpg', { type: 'image/jpeg' });\n    const uploaded = new File(['demo'], 'File.pdf', { type: 'application/pdf' });\n    const tooLarge = new File(['demo'], 'Video.mp4', { type: 'video/mp4' });\n    const unsupported = new File(['demo'], 'Script.exe', { type: 'application/x-msdownload' });\n\n    this.files = [uploaded, uploading];\n    this.uploadTasks = [\n      { file: uploaded, progress: 100, intervalId: null, completed: true },\n      { file: uploading, progress: 35, intervalId: null, completed: false }\n    ];\n    this.rejectedSizeFiles = [tooLarge.name];\n    this.rejectedTypeFiles = [unsupported.name];\n  }\n\n  render() {\n    return (\n      <div class=\"file-upload-wrapper\">\n        {this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea()}\n\n        <ul class=\"file-list\">\n          {this.rejectedSizeFiles.map(fileName => (\n            <li class=\"file-item upload-failed\">\n              <div class=\"file-icon\">\n                <ifx-icon icon=\"file-16\"></ifx-icon>\n              </div>\n              <div class=\"file-info\">\n                <div class=\"file-top-row\">\n                  <span class=\"file-name-wrapper\">\n                    <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                    <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                  </span>\n                  <div class=\"file-actions\">\n                    <ifx-icon-button\n                      shape=\"square\"\n                      variant=\"tertiary\"\n                      icon=\"delete-forever-16\"\n                      size=\"s\"\n                      aria-label=\"Remove file\"\n                      onClick={() => this.clearRejectedFile(fileName, 'size')}>\n                    </ifx-icon-button>\n                  </div>\n                </div>\n                <div class=\"file-middle-row\">\n                  <span class=\"file-status\">\n                    {this.getFormattedFileTooLargeText()}\n                  </span>\n                </div>\n              </div>\n            </li>\n          ))}\n\n          {this.rejectedTypeFiles.map(fileName => (\n            <li class=\"file-item upload-failed\">\n              <div class=\"file-icon\">\n                <ifx-icon icon=\"file-16\"></ifx-icon>\n              </div>\n              <div class=\"file-info\">\n                <div class=\"file-top-row\">\n                  <span class=\"file-name-wrapper\">\n                    <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                    <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                  </span>\n                  <div class=\"file-actions\">\n                    <ifx-icon-button\n                      shape=\"square\"\n                      variant=\"tertiary\"\n                      icon=\"delete-forever-16\"\n                      size=\"s\"\n                      aria-label=\"Remove file\"\n                      onClick={() => this.clearRejectedFile(fileName, 'type')}>\n                    </ifx-icon-button>\n                  </div>\n                </div>\n                <div class=\"file-middle-row\">\n                  <span class=\"file-status\">\n                    {this.labelUnsupportedFileType}\n                  </span>\n                </div>\n              </div>\n            </li>\n          ))}\n\n          {this.files.map((file) => {\n            const task = this.uploadTasks.find(t => t.file.name === file.name);\n            const progress = task?.progress ?? 100;\n            const isUploading = task && !task.completed;\n            const itemClass = isUploading ? 'file-item uploading' : 'file-item upload-success';\n\n            const { base, ext } = this.splitFileNameParts(file);\n\n            return (\n              <li class={itemClass}>\n                <div class=\"file-icon\">\n                  <ifx-icon icon={this.getFileIcon(file)}></ifx-icon>\n                </div>\n                <div class=\"file-info\">\n                  <div class=\"file-top-row\">\n                    <span class=\"file-name-wrapper\">\n                      <span class=\"file-name-base\">{base}</span>\n                      <span class=\"file-name-ext\">{ext}</span>\n                    </span>\n                    <div class=\"file-actions\">\n                      <ifx-icon-button\n                        shape=\"square\"\n                        variant=\"tertiary\"\n                        icon=\"cross-16\"\n                        size=\"s\"\n                        aria-label=\"Cancel upload\"\n                        onClick={() => this.cancelUpload(file)}\n                        style={{ display: isUploading ? 'inline-flex' : 'none' }}>\n                      </ifx-icon-button>\n                      <ifx-icon-button\n                        shape=\"square\"\n                        variant=\"tertiary\"\n                        icon=\"delete-forever-16\"\n                        size=\"s\"\n                        aria-label=\"Remove file\"\n                        onClick={() => this.removeFile(file)}\n                        style={{ display: !isUploading ? 'inline-flex' : 'none' }}>\n                      </ifx-icon-button>\n                    </div>\n                  </div>\n\n                  <div class=\"file-middle-row\">\n                    <span class=\"file-size\">{this.getFormattedSize(file)}</span>\n                    {isUploading && (\n                      <span class=\"file-uploading\">&nbsp;–&nbsp;Uploading …</span>\n                    )}\n                    <span class=\"file-status\">\n                      {!isUploading && (\n                        <span>\n                          <ifx-icon icon=\"check-12\"></ifx-icon>&nbsp;\n                          {this.labelUploaded}\n                        </span>\n                      )}\n                    </span>\n                  </div>\n\n                  {isUploading && (\n                    <div class=\"file-progress-row\">\n                      <ifx-progress-bar size=\"s\" value={progress} show-label=\"true\"></ifx-progress-bar>\n                    </div>\n                  )}\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n    );\n  }\n\n  renderUploadArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    return (\n      <div class={{ 'upload-button': true }}>\n        <label>\n          <ifx-button variant=\"secondary\">\n            <ifx-icon icon=\"upload-16\"></ifx-icon>\n            {this.labelBrowseFiles}\n          </ifx-button>\n          <input\n            ref={handleInputRef}\n            type=\"file\"\n            accept={this.getAcceptAttribute()}\n            multiple\n            onChange={(e) => this.handleFileChange(e)}\n            style={{ display: 'none' }}\n          />\n        </label>\n        <p class=\"file-upload-info\">\n          {this.getSupportedFileText()}\n        </p>\n      </div>\n    );\n  }\n\n  renderDragAndDropArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    const triggerInputClick = () => {\n      if (this.fileInputEl) {\n        this.fileInputEl.click();\n      }\n    };\n\n    return (\n      <div\n        class={{ 'upload-dropzone': true, 'drag-over': this.isDragOver }}\n        onClick={triggerInputClick}\n        onDragOver={(e) => this.handleDragOver(e)}\n        onDragLeave={(e) => this.handleDragLeave(e)}\n        onDrop={(e) => this.handleDrop(e)}\n      >\n        <ifx-icon icon=\"upload-24\" class=\"custom-icon\"></ifx-icon>\n        <p>{this.labelDragAndDrop}</p>\n        <p class=\"file-upload-info\">\n          {this.getSupportedFileText()}\n        </p>\n        <div style={{ height: '0px', overflow: 'hidden' }}>\n          <input\n            ref={handleInputRef}\n            type=\"file\"\n            accept={this.getAcceptAttribute()}\n            multiple\n            onChange={(e) => this.handleFileChange(e)}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ifx-filter-accordion.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$3 } from './p-e7551b24.js';
-import { d as defineCustomElement$2 } from './p-03acdbd0.js';
+import { d as defineCustomElement$3 } from './p-35d83f23.js';
+import { d as defineCustomElement$2 } from './p-9306088d.js';
 
 // utils.ts
 function getInitiallySelectedItems(el) {
@@ -53,8 +53,8 @@ const FilterAccordion = /*@__PURE__*/ proxyCustomElement(class FilterAccordion e
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: '04f5bf30e72842f9933b4e996d0f1f8fd05a7e20', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'db74e70636d12b7eda258cd51b970efabca762b1', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '275bb4906b9bf54d3f7a3d92127c2b5f5929f66f', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '196c8da9491b30ee1b9340f2d608dcc0fbc77e8d', class: "text" }, h("span", { key: 'ca7a0e16bdec5ad7c7712eacc663e93016745274' }, this.filterGroupName), h("ifx-number-indicator", { key: 'ded7fee1ddad870fd8ab71c552443b10c64fe16b' }, this.count)), h("ifx-icon", { key: 'bf3c7d0609df661cf80d2a54d6541f00ad12e4fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'e51d932d03376e78da2a7c7023b7a730c485735e', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '9f918e904eac2a581a2964c151a968745ac947f3', class: "filter-accordion-container" }, h("slot", { key: 'dd76a13a2b0eacbdf472d80418b3c003c9a4fac5', name: "list" }))));
+        return (h("div", { key: '099f63d57e4c1fb4c14d228af3e9fdc20e7d7249', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'de36ca16b253284129ef524e37194fd247742ce4', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'bc5797a753df94bc421c6c91da3fab6698600d21', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'a97fe6a9f8f7569726d5c032eade4cb09a0e9a6a', class: "text" }, h("span", { key: 'eadfe0234c057ab7c1842a95fc8ae7e2b217f841' }, this.filterGroupName), h("ifx-number-indicator", { key: '764092da4893f0d3b1c151d5ef6c82b361ff9974' }, this.count)), h("ifx-icon", { key: '5588c2d8de2ba12f7feca1bd78a4ea60e24fd95d', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'ae0a733177800de32146eccf46454ee399193f74', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '832ca96c1a581d458a6a84973a2067a824d16a3d', class: "filter-accordion-container" }, h("slot", { key: '84f321eb641add7f096e380fe69b61c1c49565e0', name: "list" }))));
     }
     get el() { return this; }
     static get style() { return IfxFilterAccordionStyle0; }