@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1452 @@
+import { Host, h } from "@stencil/core";
+import { getIcon } from "../../utils/config";
+/**
+ * @component x-upload
+ * @description Upload component for selecting and uploading files following Ant Design specification.
+ *
+ * @slot - Default slot for upload trigger (button, drag area, etc.)
+ *
+ * @example
+ * <x-upload action="/api/upload">
+ *   <x-button><x-icon name="upload" /> Click to Upload</x-button>
+ * </x-upload>
+ */
+export class XUpload {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * File types that can be accepted. See input accept Attribute
+     * @example
+     * <x-upload accept=".png,.jpg"></x-upload>
+     */
+    accept;
+    /**
+     * Uploading URL
+     * @example
+     * <x-upload action="/api/upload"></x-upload>
+     */
+    action;
+    /**
+     * Whether upload is disabled
+     * @default false
+     * @example
+     * <x-upload disabled></x-upload>
+     */
+    disabled = false;
+    /**
+     * Built-in stylesheets: text, picture, picture-card, picture-circle
+     * @default 'text'
+     * @example
+     * <x-upload listType="picture-card"></x-upload>
+     */
+    listType = 'text';
+    /**
+     * Whether to support multiple file selection
+     * @default false
+     * @example
+     * <x-upload multiple></x-upload>
+     */
+    multiple = false;
+    /**
+     * The name of uploading file field
+     * @default 'file'
+     * @example
+     * <x-upload name="avatar"></x-upload>
+     */
+    name = 'file';
+    /**
+     * List of files that have been uploaded (controlled)
+     * @example
+     * <x-upload fileList={[{ uid: '1', name: 'a.png', status: 'done' }]}></x-upload>
+     */
+    fileList;
+    /**
+     * Default list of files that have been uploaded
+     * @example
+     * <x-upload defaultFileList={[{ uid: '1', name: 'a.png', status: 'done' }]}></x-upload>
+     */
+    defaultFileList;
+    /**
+     * Maximum number of files that can be uploaded
+     * @example
+     * <x-upload maxCount={3}></x-upload>
+     */
+    maxCount;
+    /**
+     * HTTP method for upload request
+     * @default 'POST'
+     * @example
+     * <x-upload method="PUT"></x-upload>
+     */
+    method = 'POST';
+    /**
+     * Extra data to send with the upload request
+     * @example
+     * <x-upload data={{ folder: 'images' }}></x-upload>
+     */
+    data;
+    /**
+     * Request headers
+     * @example
+     * <x-upload headers={{ Authorization: 'Bearer token' }}></x-upload>
+     */
+    headers;
+    /**
+     * Whether to send cookies with the request
+     * @default false
+     * @example
+     * <x-upload withCredentials></x-upload>
+     */
+    withCredentials = false;
+    /**
+     * Whether to support uploading a directory
+     * @default false
+     * @example
+     * <x-upload directory></x-upload>
+     */
+    directory = false;
+    /**
+     * Whether to open file dialog on click
+     * @default true
+     * @example
+     * <x-upload openFileDialogOnClick={false}></x-upload>
+     */
+    openFileDialogOnClick = true;
+    /**
+     * Whether to show upload list
+     * @default true
+     * @example
+     * <x-upload showUploadList={false}></x-upload>
+     */
+    showUploadList = true;
+    /**
+     * Whether to support drag and drop upload
+     * @default false
+     * @example
+     * <x-upload drag></x-upload>
+     */
+    drag = false;
+    /**
+     * Progress bar options
+     * @example
+     * <x-upload progress={{ strokeWidth: 2 }}></x-upload>
+     */
+    progress;
+    /**
+     * Custom class names for semantic DOM
+     * @example
+     * <x-upload classNames={{ root: 'my-upload' }}></x-upload>
+     */
+    classNames;
+    /**
+     * Custom styles for semantic DOM
+     * @example
+     * <x-upload styles={{ root: { minWidth: '200px' } }}></x-upload>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when uploading state changes
+     * @example
+     * <x-upload onXChange={(ev) => console.log(ev.detail)}></x-upload>
+     */
+    xChange;
+    /**
+     * Callback when file is removed
+     * @example
+     * <x-upload onXRemove={(ev) => console.log(ev.detail)}></x-upload>
+     */
+    xRemove;
+    /**
+     * Callback when file link or preview icon is clicked
+     * @example
+     * <x-upload onXPreview={(ev) => console.log(ev.detail)}></x-upload>
+     */
+    xPreview;
+    /**
+     * Callback when download icon is clicked
+     * @example
+     * <x-upload onXDownload={(ev) => console.log(ev.detail)}></x-upload>
+     */
+    xDownload;
+    /**
+     * Callback when files are dragged and dropped
+     * @example
+     * <x-upload onXDrop={(ev) => console.log(ev.detail)}></x-upload>
+     */
+    xDrop;
+    // ==================== State ====================
+    /**
+     * Internal file list for uncontrolled mode.
+     */
+    internalFileList = [];
+    /**
+     * Drag-over state for drop zone.
+     */
+    dragOver = false;
+    // ==================== Private Properties ====================
+    /**
+     * File input element reference.
+     */
+    fileInputRef;
+    /**
+     * Active XHRs keyed by file uid.
+     */
+    uploadingXhrs = new Map();
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize internal file list from props.
+     *
+     * Flow:
+     * 1. Check if controlled `fileList` is provided.
+     * 2. If not, check if `defaultFileList` is provided.
+     * 3. Initialize `internalFileList` with the found list or an empty array.
+     */
+    componentWillLoad() {
+        this.internalFileList = this.fileList?.length
+            ? [...this.fileList]
+            : this.defaultFileList?.length
+                ? [...this.defaultFileList]
+                : [];
+    }
+    /**
+     * Abort pending uploads on disconnect.
+     *
+     * Flow:
+     * 1. Iterate through `uploadingXhrs`.
+     * 2. Abort each active XMLHttpRequest.
+     * 3. Clear the map.
+     */
+    disconnectedCallback() {
+        // Abort all ongoing uploads
+        this.uploadingXhrs.forEach(xhr => xhr.abort());
+        this.uploadingXhrs.clear();
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync internal file list when controlled list changes.
+     * @param newValue - New file list.
+     */
+    handleFileListChange(newValue) {
+        if (newValue) {
+            this.internalFileList = [...newValue];
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Manually trigger file upload for a specific file.
+     * @param file - File entry to upload.
+     * @returns Promise resolving when upload is initiated.
+     */
+    async upload(file) {
+        if (file.originFileObj && this.action) {
+            this.uploadFile(file);
+        }
+    }
+    /**
+     * Abort upload for a specific file or all files.
+     * @param file - Optional file to abort. If omitted, all uploads are aborted.
+     * @returns Promise resolving when abort is completed.
+     */
+    async abort(file) {
+        if (file) {
+            const xhr = this.uploadingXhrs.get(file.uid);
+            if (xhr) {
+                xhr.abort();
+                this.uploadingXhrs.delete(file.uid);
+            }
+        }
+        else {
+            // Abort all uploads
+            this.uploadingXhrs.forEach(xhr => xhr.abort());
+            this.uploadingXhrs.clear();
+        }
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Generate a unique ID for a file.
+     * @returns A unique string ID.
+     */
+    generateUid() {
+        return `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    /**
+     * Handle click on the upload trigger.
+     */
+    handleClick = () => {
+        if (this.disabled || !this.openFileDialogOnClick)
+            return;
+        this.fileInputRef?.click();
+    };
+    /**
+     * Handle file input change event.
+     * @param e - The change event from input[type="file"].
+     */
+    handleInputChange = (e) => {
+        const target = e.target;
+        const files = target.files;
+        if (!files || files.length === 0)
+            return;
+        this.processFiles(Array.from(files));
+        // Reset input value to allow selecting the same file again
+        target.value = '';
+    };
+    /**
+     * Process selected or dropped files.
+     *
+     * Flow:
+     * 1. Filter files based on `maxCount`.
+     * 2. Map `File` objects to `UploadFile` structure with initial 'uploading' status.
+     * 3. Update `internalFileList` (replace if maxCount is 1, otherwise append).
+     * 4. Emit `xChange` event for each new file.
+     * 5. Initiate upload if `action` is provided, otherwise mark as 'done'.
+     * @param files - Array of File objects to process.
+     */
+    processFiles(files) {
+        // Check maxCount
+        if (this.maxCount !== undefined) {
+            const remainingSlots = this.maxCount - this.internalFileList.length;
+            if (remainingSlots <= 0)
+                return;
+            files = files.slice(0, remainingSlots);
+        }
+        const uploadFiles = files.map(file => ({
+            uid: this.generateUid(),
+            name: file.name,
+            fileName: file.name,
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified,
+            originFileObj: file,
+            status: 'uploading',
+            percent: 0,
+        }));
+        // Handle maxCount === 1 case (replace mode)
+        if (this.maxCount === 1 && uploadFiles.length > 0) {
+            this.internalFileList = [uploadFiles[0]];
+        }
+        else {
+            this.internalFileList = [...this.internalFileList, ...uploadFiles];
+        }
+        // Emit change for each file
+        uploadFiles.forEach(file => {
+            this.xChange.emit({
+                file,
+                fileList: this.internalFileList,
+            });
+            // Start upload if action is provided
+            if (this.action) {
+                this.uploadFile(file);
+            }
+            else {
+                // Mark as done if no action (manual upload mode)
+                this.updateFileStatus(file.uid, 'done', 100);
+            }
+        });
+    }
+    /**
+     * Upload a single file via XMLHttpRequest.
+     *
+     * Flow:
+     * 1. Create `XMLHttpRequest` and `FormData`.
+     * 2. Append file and extra `data`.
+     * 3. Setup progress, success, and error handlers.
+     * 4. Update file status and emit `xChange` on progress/completion/error.
+     * 5. Open and send the request with headers and credentials.
+     * @param file - The file to upload.
+     */
+    uploadFile(file) {
+        if (!file.originFileObj || !this.action)
+            return;
+        const xhr = new XMLHttpRequest();
+        this.uploadingXhrs.set(file.uid, xhr);
+        const formData = new FormData();
+        formData.append(this.name, file.originFileObj);
+        // Append extra data
+        if (this.data) {
+            Object.entries(this.data).forEach(([key, value]) => {
+                formData.append(key, String(value));
+            });
+        }
+        // Progress handler
+        xhr.upload.onprogress = (e) => {
+            if (e.lengthComputable) {
+                const percent = Math.round((e.loaded / e.total) * 100);
+                this.updateFileStatus(file.uid, 'uploading', percent);
+                this.xChange.emit({
+                    file: { ...file, status: 'uploading', percent },
+                    fileList: this.internalFileList,
+                    event: e,
+                });
+            }
+        };
+        // Success handler
+        xhr.onload = () => {
+            this.uploadingXhrs.delete(file.uid);
+            if (xhr.status >= 200 && xhr.status < 300) {
+                let response;
+                try {
+                    response = JSON.parse(xhr.responseText);
+                }
+                catch {
+                    response = xhr.responseText;
+                }
+                this.updateFileStatus(file.uid, 'done', 100, response);
+                const updatedFile = this.internalFileList.find(f => f.uid === file.uid);
+                if (updatedFile) {
+                    this.xChange.emit({
+                        file: updatedFile,
+                        fileList: this.internalFileList,
+                    });
+                }
+            }
+            else {
+                this.updateFileStatus(file.uid, 'error', 0, null, new Error(`Upload failed with status ${xhr.status}`));
+                const updatedFile = this.internalFileList.find(f => f.uid === file.uid);
+                if (updatedFile) {
+                    this.xChange.emit({
+                        file: updatedFile,
+                        fileList: this.internalFileList,
+                    });
+                }
+            }
+        };
+        // Error handler
+        xhr.onerror = () => {
+            this.uploadingXhrs.delete(file.uid);
+            this.updateFileStatus(file.uid, 'error', 0, null, new Error('Upload failed'));
+            const updatedFile = this.internalFileList.find(f => f.uid === file.uid);
+            if (updatedFile) {
+                this.xChange.emit({
+                    file: updatedFile,
+                    fileList: this.internalFileList,
+                });
+            }
+        };
+        // Open and send request
+        xhr.open(this.method.toUpperCase(), this.action, true);
+        xhr.withCredentials = this.withCredentials;
+        // Set headers
+        if (this.headers) {
+            Object.entries(this.headers).forEach(([key, value]) => {
+                xhr.setRequestHeader(key, value);
+            });
+        }
+        xhr.send(formData);
+    }
+    /**
+     * Update the status and progress of a file in the internal list.
+     * @param uid - File unique ID.
+     * @param status - New upload status.
+     * @param percent - Upload percentage.
+     * @param response - Server response.
+     * @param error - Upload error.
+     */
+    updateFileStatus(uid, status, percent, response, error) {
+        this.internalFileList = this.internalFileList.map(file => {
+            if (file.uid === uid) {
+                return {
+                    ...file,
+                    status,
+                    percent,
+                    response: response !== undefined ? response : file.response,
+                    error: error !== undefined ? error : file.error,
+                };
+            }
+            return file;
+        });
+    }
+    /**
+     * Handle file removal from the list.
+     * @param file - File to remove.
+     * @param e - Event.
+     */
+    handleRemove = (file, e) => {
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        // Abort ongoing upload
+        const xhr = this.uploadingXhrs.get(file.uid);
+        if (xhr) {
+            xhr.abort();
+            this.uploadingXhrs.delete(file.uid);
+        }
+        const removedFile = { ...file, status: 'removed' };
+        const newFileList = this.internalFileList.filter(f => f.uid !== file.uid);
+        this.internalFileList = newFileList;
+        this.xRemove.emit({
+            file: removedFile,
+            fileList: newFileList,
+        });
+        this.xChange.emit({
+            file: removedFile,
+            fileList: newFileList,
+        });
+    };
+    /**
+     * Handle file preview click.
+     * @param file - File to preview.
+     * @param e - Event.
+     */
+    handlePreview = (file, e) => {
+        e.stopPropagation();
+        this.xPreview.emit({ file });
+    };
+    /**
+     * Handle file download click.
+     * @param file - File to download.
+     * @param e - Event.
+     */
+    handleDownload = (file, e) => {
+        e.stopPropagation();
+        this.xDownload.emit({ file });
+        // Default download behavior
+        if (file.url) {
+            const link = document.createElement('a');
+            link.href = file.url;
+            link.download = file.name;
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    };
+    // ==================== Drag & Drop ====================
+    /**
+     * Handle drag over event for drop zone.
+     * @param e - Drag event.
+     */
+    handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.disabled)
+            return;
+        this.dragOver = true;
+    };
+    /**
+     * Handle drag leave event for drop zone.
+     * @param e - Drag event.
+     */
+    handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOver = false;
+    };
+    /**
+     * Handle drop event for drop zone.
+     * @param e - Drag event.
+     */
+    handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOver = false;
+        if (this.disabled)
+            return;
+        const files = e.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.xDrop.emit({ files, event: e });
+            this.processFiles(Array.from(files));
+        }
+    };
+    // ==================== Show Upload List Helpers ====================
+    /**
+     * Get normalized upload list options.
+     * @returns ShowUploadListOptions.
+     */
+    getShowUploadListOptions() {
+        if (typeof this.showUploadList === 'boolean') {
+            return {
+                showPreviewIcon: this.showUploadList,
+                showRemoveIcon: this.showUploadList,
+                showDownloadIcon: false,
+            };
+        }
+        return {
+            showPreviewIcon: this.showUploadList.showPreviewIcon ?? true,
+            showRemoveIcon: this.showUploadList.showRemoveIcon ?? true,
+            showDownloadIcon: this.showUploadList.showDownloadIcon ?? false,
+        };
+    }
+    /**
+     * Check if a file is an image based on type or extension.
+     * @param file - File entry.
+     * @returns boolean.
+     */
+    isImageFile(file) {
+        if (file.type) {
+            return file.type.startsWith('image/');
+        }
+        const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.svg'];
+        const fileName = file.name.toLowerCase();
+        return imageExtensions.some(ext => fileName.endsWith(ext));
+    }
+    // ==================== Render ====================
+    /**
+     * Render internal SVG icons.
+     * @param name - Icon name.
+     * @returns JSX.Element or null.
+     */
+    renderIcon(name) {
+        const iconNameMap = {
+            'upload': getIcon('upload'),
+            'paper-clip': getIcon('paperClip'),
+            'picture': getIcon('picture'),
+            'delete': getIcon('delete'),
+            'eye': getIcon('eye'),
+            'download': getIcon('download'),
+            'loading': getIcon('loading'),
+            'plus': getIcon('plus'),
+            'inbox': getIcon('inbox'),
+            'file': getIcon('file'),
+        };
+        const iconName = iconNameMap[name];
+        if (!iconName)
+            return null;
+        return h("x-icon", { name: iconName, spin: name === 'loading' ? true : false, class: name === 'loading' ? 'x-upload-icon-loading' : '' });
+    }
+    /**
+     * Render the standard upload button or picture card.
+     * @returns JSX.Element or null.
+     */
+    renderUploadButton() {
+        const isPictureCard = this.listType === 'picture-card' || this.listType === 'picture-circle';
+        const hideButton = isPictureCard && this.maxCount !== undefined && this.internalFileList.length >= this.maxCount;
+        if (hideButton)
+            return null;
+        return (h("div", { class: {
+                'x-upload-select': true,
+                'x-upload-select-picture-card': isPictureCard,
+            }, onClick: this.handleClick }, h("span", { class: "x-upload-btn", role: "button", tabindex: this.disabled ? -1 : 0 }, h("input", { type: "file", ref: el => (this.fileInputRef = el), accept: this.accept, multiple: this.multiple, disabled: this.disabled,
+            // @ts-ignore - webkitdirectory is not in standard types
+            webkitdirectory: this.directory ? '' : undefined, onChange: this.handleInputChange, style: { display: 'none' } }), h("slot", null, isPictureCard ? (h("div", { class: "x-upload-select-picture-card-content" }, h("span", { class: "x-upload-icon" }, this.renderIcon('plus')), h("div", { class: "x-upload-text" }, "Upload"))) : null))));
+    }
+    /**
+     * Render the drag and drop area.
+     * @returns JSX.Element.
+     */
+    renderDragArea() {
+        return (h("div", { class: {
+                'x-upload-drag': true,
+                'x-upload-drag-hover': this.dragOver,
+                'x-upload-drag-disabled': this.disabled,
+            }, onClick: this.handleClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { type: "file", ref: el => (this.fileInputRef = el), accept: this.accept, multiple: this.multiple, disabled: this.disabled, onChange: this.handleInputChange, style: { display: 'none' } }), h("slot", null, h("div", { class: "x-upload-drag-content" }, h("p", { class: "x-upload-drag-icon" }, this.renderIcon('inbox')), h("p", { class: "x-upload-text" }, "Click or drag file to this area to upload"), h("p", { class: "x-upload-hint" }, "Support for single or bulk upload.")))));
+    }
+    /**
+     * Render the list of uploaded/uploading files.
+     * @returns JSX.Element or null.
+     */
+    renderFileList() {
+        if (!this.showUploadList || this.internalFileList.length === 0)
+            return null;
+        const listOptions = this.getShowUploadListOptions();
+        return (h("div", { class: {
+                'x-upload-list': true,
+                [`x-upload-list-${this.listType}`]: true,
+                [this.classNames?.list ?? '']: !!this.classNames?.list,
+            }, style: this.styles?.list }, this.internalFileList.map(file => this.renderFileItem(file, listOptions))));
+    }
+    /**
+     * Render a single file item in the upload list.
+     *
+     * Flow:
+     * 1. Determine list type (picture, text).
+     * 2. Render thumbnail or icon based on file type.
+     * 3. Render file name and link.
+     * 4. Render progress bar if uploading.
+     * 5. Render action buttons (preview, download, remove) based on options.
+     * @param file - File entry.
+     * @param listOptions - Options for showing list actions.
+     * @returns JSX.Element.
+     */
+    renderFileItem(file, listOptions) {
+        const isPictureCard = this.listType === 'picture-card' || this.listType === 'picture-circle';
+        const isPicture = this.listType === 'picture' || isPictureCard;
+        const isImage = this.isImageFile(file);
+        return (h("div", { class: {
+                'x-upload-list-item': true,
+                [`x-upload-list-item-${file.status || 'done'}`]: true,
+                [this.classNames?.item ?? '']: !!this.classNames?.item,
+            }, style: this.styles?.item, key: file.uid }, h("div", { class: "x-upload-list-item-info" }, h("span", { class: "x-upload-span" }, isPicture ? (h("span", { class: "x-upload-list-item-thumbnail" }, isImage && (file.thumbUrl || file.url || file.preview) ? (h("img", { src: file.thumbUrl || file.url || file.preview, alt: file.name, class: "x-upload-list-item-image", crossOrigin: file.crossOrigin })) : (h("span", { class: "x-upload-icon" }, this.renderIcon('picture'))))) : (h("span", { class: "x-upload-icon" }, this.renderIcon('paper-clip'))), !isPictureCard && (h("a", { class: "x-upload-list-item-name", title: file.name, href: file.url, target: "_blank", rel: "noopener noreferrer", onClick: e => {
+                if (!file.url) {
+                    e.preventDefault();
+                    this.handlePreview(file, e);
+                }
+            } }, file.name)), file.status === 'uploading' && (h("span", { class: "x-upload-list-item-progress" }, h("span", { class: "x-upload-icon x-upload-icon-loading" }, this.renderIcon('loading')), !isPictureCard && file.percent !== undefined && (h("span", { class: "x-upload-list-item-percent" }, Math.round(file.percent), "%")))), h("span", { class: "x-upload-list-item-actions" }, listOptions.showPreviewIcon && file.status === 'done' && (file.url || file.thumbUrl) && (h("button", { type: "button", title: "Preview", class: "x-upload-list-item-action", onClick: e => this.handlePreview(file, e) }, this.renderIcon('eye'))), listOptions.showDownloadIcon && file.status === 'done' && file.url && (h("button", { type: "button", title: "Download", class: "x-upload-list-item-action", onClick: e => this.handleDownload(file, e) }, this.renderIcon('download'))), listOptions.showRemoveIcon && (h("button", { type: "button", title: "Remove", class: "x-upload-list-item-action x-upload-list-item-action-remove", onClick: e => this.handleRemove(file, e) }, this.renderIcon('delete')))))), file.status === 'uploading' && file.percent !== undefined && (h("div", { class: "x-upload-list-item-progress-bar" }, h("div", { class: "x-upload-list-item-progress-bar-inner", style: { width: `${file.percent}%` } })))));
+    }
+    /**
+     * Render the upload component.
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-upload': true,
+            [`x-upload-${this.listType}`]: true,
+            'x-upload-disabled': this.disabled,
+            'x-upload-drag-mode': this.drag,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        return (h(Host, { key: '2343850a21dc38e8649a8f2cc3620dba448cb495', class: hostClasses, style: this.styles?.root }, this.drag ? this.renderDragArea() : this.renderUploadButton(), this.renderFileList()));
+    }
+    static get is() { return "x-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-upload.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload accept=\".png,.jpg\"></x-upload>"
+                        }],
+                    "text": "File types that can be accepted. See input accept Attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload action=\"/api/upload\"></x-upload>"
+                        }],
+                    "text": "Uploading URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload disabled></x-upload>"
+                        }],
+                    "text": "Whether upload is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "listType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadListType",
+                    "resolved": "\"picture\" | \"picture-card\" | \"picture-circle\" | \"text\"",
+                    "references": {
+                        "UploadListType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadListType",
+                            "referenceLocation": "UploadListType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'text'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload listType=\"picture-card\"></x-upload>"
+                        }],
+                    "text": "Built-in stylesheets: text, picture, picture-card, picture-circle"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-type",
+                "defaultValue": "'text'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload multiple></x-upload>"
+                        }],
+                    "text": "Whether to support multiple file selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'file'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload name=\"avatar\"></x-upload>"
+                        }],
+                    "text": "The name of uploading file field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'file'"
+            },
+            "fileList": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "UploadFile[]",
+                    "resolved": "UploadFile<any>[]",
+                    "references": {
+                        "UploadFile": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadFile",
+                            "referenceLocation": "UploadFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload fileList={[{ uid: '1', name: 'a.png', status: 'done' }]}></x-upload>"
+                        }],
+                    "text": "List of files that have been uploaded (controlled)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "defaultFileList": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadFile[]",
+                    "resolved": "UploadFile<any>[]",
+                    "references": {
+                        "UploadFile": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadFile",
+                            "referenceLocation": "UploadFile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload defaultFileList={[{ uid: '1', name: 'a.png', status: 'done' }]}></x-upload>"
+                        }],
+                    "text": "Default list of files that have been uploaded"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "maxCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload maxCount={3}></x-upload>"
+                        }],
+                    "text": "Maximum number of files that can be uploaded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-count"
+            },
+            "method": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadMethod",
+                    "resolved": "\"PATCH\" | \"POST\" | \"PUT\" | \"patch\" | \"post\" | \"put\"",
+                    "references": {
+                        "UploadMethod": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadMethod",
+                            "referenceLocation": "UploadMethod"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'POST'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload method=\"PUT\"></x-upload>"
+                        }],
+                    "text": "HTTP method for upload request"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "method",
+                "defaultValue": "'POST'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload data={{ folder: 'images' }}></x-upload>"
+                        }],
+                    "text": "Extra data to send with the upload request"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "headers": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload headers={{ Authorization: 'Bearer token' }}></x-upload>"
+                        }],
+                    "text": "Request headers"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "withCredentials": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload withCredentials></x-upload>"
+                        }],
+                    "text": "Whether to send cookies with the request"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-credentials",
+                "defaultValue": "false"
+            },
+            "directory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload directory></x-upload>"
+                        }],
+                    "text": "Whether to support uploading a directory"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "directory",
+                "defaultValue": "false"
+            },
+            "openFileDialogOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload openFileDialogOnClick={false}></x-upload>"
+                        }],
+                    "text": "Whether to open file dialog on click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-file-dialog-on-click",
+                "defaultValue": "true"
+            },
+            "showUploadList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | ShowUploadListOptions",
+                    "resolved": "ShowUploadListOptions | boolean",
+                    "references": {
+                        "ShowUploadListOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::ShowUploadListOptions",
+                            "referenceLocation": "ShowUploadListOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload showUploadList={false}></x-upload>"
+                        }],
+                    "text": "Whether to show upload list"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-upload-list",
+                "defaultValue": "true"
+            },
+            "drag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-upload drag></x-upload>"
+                        }],
+                    "text": "Whether to support drag and drop upload"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag",
+                "defaultValue": "false"
+            },
+            "progress": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadProgressOptions",
+                    "resolved": "UploadProgressOptions",
+                    "references": {
+                        "UploadProgressOptions": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadProgressOptions",
+                            "referenceLocation": "UploadProgressOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload progress={{ strokeWidth: 2 }}></x-upload>"
+                        }],
+                    "text": "Progress bar options"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadClassNames",
+                    "resolved": "UploadClassNames",
+                    "references": {
+                        "UploadClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadClassNames",
+                            "referenceLocation": "UploadClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload classNames={{ root: 'my-upload' }}></x-upload>"
+                        }],
+                    "text": "Custom class names for semantic DOM"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadStyles",
+                    "resolved": "UploadStyles",
+                    "references": {
+                        "UploadStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadStyles",
+                            "referenceLocation": "UploadStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload styles={{ root: { minWidth: '200px' } }}></x-upload>"
+                        }],
+                    "text": "Custom styles for semantic DOM"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalFileList": {},
+            "dragOver": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXChange={(ev) => console.log(ev.detail)}></x-upload>"
+                        }],
+                    "text": "Callback when uploading state changes"
+                },
+                "complexType": {
+                    "original": "UploadChangeEventDetail",
+                    "resolved": "UploadChangeEventDetail<any>",
+                    "references": {
+                        "UploadChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadChangeEventDetail",
+                            "referenceLocation": "UploadChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xRemove",
+                "name": "xRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXRemove={(ev) => console.log(ev.detail)}></x-upload>"
+                        }],
+                    "text": "Callback when file is removed"
+                },
+                "complexType": {
+                    "original": "UploadRemoveEventDetail",
+                    "resolved": "UploadRemoveEventDetail<any>",
+                    "references": {
+                        "UploadRemoveEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadRemoveEventDetail",
+                            "referenceLocation": "UploadRemoveEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPreview",
+                "name": "xPreview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXPreview={(ev) => console.log(ev.detail)}></x-upload>"
+                        }],
+                    "text": "Callback when file link or preview icon is clicked"
+                },
+                "complexType": {
+                    "original": "UploadPreviewEventDetail",
+                    "resolved": "UploadPreviewEventDetail<any>",
+                    "references": {
+                        "UploadPreviewEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadPreviewEventDetail",
+                            "referenceLocation": "UploadPreviewEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDownload",
+                "name": "xDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXDownload={(ev) => console.log(ev.detail)}></x-upload>"
+                        }],
+                    "text": "Callback when download icon is clicked"
+                },
+                "complexType": {
+                    "original": "UploadDownloadEventDetail",
+                    "resolved": "UploadDownloadEventDetail<any>",
+                    "references": {
+                        "UploadDownloadEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadDownloadEventDetail",
+                            "referenceLocation": "UploadDownloadEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDrop",
+                "name": "xDrop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-upload onXDrop={(ev) => console.log(ev.detail)}></x-upload>"
+                        }],
+                    "text": "Callback when files are dragged and dropped"
+                },
+                "complexType": {
+                    "original": "UploadDropEventDetail",
+                    "resolved": "UploadDropEventDetail",
+                    "references": {
+                        "UploadDropEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadDropEventDetail",
+                            "referenceLocation": "UploadDropEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "upload": {
+                "complexType": {
+                    "signature": "(file: UploadFile) => Promise<void>",
+                    "parameters": [{
+                            "name": "file",
+                            "type": "UploadFile<any>",
+                            "docs": "- File entry to upload."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "UploadFile": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadFile",
+                            "referenceLocation": "UploadFile"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Manually trigger file upload for a specific file.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "file - File entry to upload."
+                        }, {
+                            "name": "returns",
+                            "text": "Promise resolving when upload is initiated."
+                        }]
+                }
+            },
+            "abort": {
+                "complexType": {
+                    "signature": "(file?: UploadFile) => Promise<void>",
+                    "parameters": [{
+                            "name": "file",
+                            "type": "UploadFile<any>",
+                            "docs": "- Optional file to abort. If omitted, all uploads are aborted."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "UploadFile": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-upload/types.ts::UploadFile",
+                            "referenceLocation": "UploadFile"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abort upload for a specific file or all files.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "file - Optional file to abort. If omitted, all uploads are aborted."
+                        }, {
+                            "name": "returns",
+                            "text": "Promise resolving when abort is completed."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fileList",
+                "methodName": "handleFileListChange"
+            }];
+    }
+}