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

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

@@ -0,0 +1,749 @@
+import { h } from "@stencil/core";
+export class IfxFileUpload {
+    constructor() {
+        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) }))));
+    }
+    static get is() { return "ifx-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["file-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dragAndDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "drag-and-drop",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxFileSizeMB": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-file-size-m-b",
+                "reflect": false,
+                "defaultValue": "7"
+            },
+            "allowedFileTypes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allowed-file-types",
+                "reflect": false,
+                "defaultValue": "['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4']"
+            },
+            "uploadHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(file: File) => Promise<void>",
+                    "resolved": "(file: File) => Promise<void>",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "labelBrowseFiles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-browse-files",
+                "reflect": false,
+                "defaultValue": "'Browse files'"
+            },
+            "labelDragAndDrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-drag-and-drop",
+                "reflect": false,
+                "defaultValue": "'Drag & Drop or browse files to upload'"
+            },
+            "labelFileTooLarge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-file-too-large",
+                "reflect": false,
+                "defaultValue": "'Upload failed. Max file size: {{size}}MB.'"
+            },
+            "labelUnsupportedFileType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-unsupported-file-type",
+                "reflect": false,
+                "defaultValue": "'Unsupported file type.'"
+            },
+            "labelUploaded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-uploaded",
+                "reflect": false,
+                "defaultValue": "'Successfully uploaded'"
+            },
+            "labelSupportedFormatsTemplate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-supported-formats-template",
+                "reflect": false,
+                "defaultValue": "'Supported file formats: {{types}}. Max file size: {{size}}MB.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragOver": {},
+            "files": {},
+            "uploadTasks": {},
+            "rejectedSizeFiles": {},
+            "rejectedTypeFiles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxFileUploadAdd",
+                "name": "ifxFileUploadAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ addedFiles: File[]; files: File[] }",
+                    "resolved": "{ addedFiles: File[]; files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadRemove",
+                "name": "ifxFileUploadRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ removedFile: File; files: File[] }",
+                    "resolved": "{ removedFile: File; files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadChange",
+                "name": "ifxFileUploadChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadError",
+                "name": "ifxFileUploadError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ errorType: string; file: File; message: string }",
+                    "resolved": "{ errorType: string; file: File; message: string; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadInvalid",
+                "name": "ifxFileUploadInvalid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ file: File; reason: string }",
+                    "resolved": "{ file: File; reason: string; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadStart",
+                "name": "ifxFileUploadStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadComplete",
+                "name": "ifxFileUploadComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadAbort",
+                "name": "ifxFileUploadAbort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ file: File }",
+                    "resolved": "{ file: File; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadDrop",
+                "name": "ifxFileUploadDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[] }",
+                    "resolved": "{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxFileUploadClick",
+                "name": "ifxFileUploadClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "injectDemoState": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=file-upload.js.map