bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -0,0 +1,905 @@
+import { h, Fragment, Host, } from "@stencil/core";
+import { tv } from "../../utils/tv";
+/**
+ * @component BcmFileUpload
+ * @description A fully featured drag-and-drop file uploader component.
+ * Supports form-associated behavior, validation, custom size limits,
+ * accepted file type filtering, multiple file selection, progress tracking,
+ * upload canceling, file removal, and accessibility events (focus/blur).
+ *
+ * Upload progress is currently simulated locally. The `uploadUrl` prop
+ * is reserved for future real HTTP upload integration and has no effect yet.
+ *
+ * @example Basic usage
+ * <bcm-file-upload name="report" label="Upload Report"></bcm-file-upload>
+ *
+ * @example Multiple files
+ * <bcm-file-upload name="attachments" multiple></bcm-file-upload>
+ *
+ * @example Custom max size and accepted formats
+ * <bcm-file-upload
+ *   name="medicalFiles"
+ *   accept=".pdf,.jpg"
+ *   maxSize={5}
+ * ></bcm-file-upload>
+ *
+ * @prop {string} name
+ * The name of the form field used when the component is inside a `<form>`.
+ * Supports automatic FormData generation including:
+ *  - single upload: name="file"
+ *  - multiple upload: name="file[0], file[1], ..."
+ *
+ * @prop {string} label
+ * Optional label shown above the upload zone.
+ *
+ * @prop {string} caption
+ * Optional helper text rendered below the file list. Example: “Max size 5MB”.
+ *
+ * @prop {boolean} multiple
+ * Allows selecting and uploading multiple files at once.
+ *
+ * @prop {string} accept
+ * Comma-separated list of allowed file extensions.
+ * Example: ".pdf,.xls,.png".
+ *
+ * @prop {number} maxSize
+ * Maximum allowed size per file (in MB). If exceeded, an error alert appears.
+ *
+ * @prop {boolean} required
+ * Enables form validation — at least one file must be uploaded.
+ * Validity integrates with native `<form>` using ElementInternals.
+ *
+ * @prop {boolean} disabled
+ * Makes the uploader non-interactive: no clicking, no drag-and-drop.
+ *
+ * @prop {"medium" | "small"} size
+ * Controls spacing, typography, and visual density of the upload zone.
+ *
+ * @prop {string} uploadUrl
+ * Reserved for future backend upload integration.
+ * Currently has no effect and does not trigger any HTTP requests.
+ *
+ * @prop {number} maxFileCount
+ * Optional limit for how many files can be selected in total.
+ * Only applied when `multiple` is true.
+ * If exceeded, new files are ignored and a max-file-count error is shown.
+ *
+ * @prop {BcmUploadErrorMessages} customErrorMessages
+ * Optional override for all error messages:
+ *  - maxSize:      file too large
+ *  - type:         unsupported file type
+ *  - maxFileCount: too many files selected
+ *  - required:     no file selected while required
+ *
+ *
+ * @event {EventEmitter<File[]>} bcmFileChange
+ * Fired whenever the component's internal file list changes.
+ * Emits an array of the current File objects.
+ *
+ * @event {EventEmitter<BcmUploadItem>} bcmFileRemoved
+ * Fired when the user removes a file from the list.
+ *
+ * @event {EventEmitter<BcmUploadItem>} bcmUploadCanceled
+ * Fired when an upload is canceled before completion.
+ *
+ * @event {EventEmitter<FocusEvent>} bcmFocus
+ * Fired when upload zone receives keyboard or mouse focus.
+ *
+ * @event {EventEmitter<FocusEvent>} bcmBlur
+ * Fired when upload zone loses focus.
+ *
+ *
+ * @csspart upload-zone
+ * The root clickable drop area for file selection or drag-and-drop.
+ *
+ * @csspart file-list
+ * The container wrapping rendered file rows.
+ *
+ * @csspart file-row
+ * A single file entry including its name, actions, and progress bar.
+ *
+ * @csspart remove-btn
+ * The remove action button inside uploaded file rows.
+ *
+ * @csspart cancel-btn
+ * The cancel upload button during uploading progress.
+ *
+ * @csspart download-btn
+ * The download button for already uploaded files.
+ *
+ * @csspart label
+ * The external label text displayed above the component.
+ *
+ * @csspart caption
+ * Helper or informative caption displayed below the uploaded list.
+ */
+const uploadClasses = tv({
+    slots: {
+        container: 'bcm-ui-element flex flex-col gap-2 w-full max-w-64',
+        label: 'text-size-4 font-medium text-color-label',
+        // Upload Zone
+        zone: [
+            'relative rounded border border-dashed transition-all duration-200 ease-in-out',
+            'px-4 py-4 select-none',
+            'border-color-default bg-color-basic-masterpage',
+            'flex items-center justify-center',
+        ],
+        zoneActive: 'border-color-primary bg-color-soft-blue',
+        iconContainer: 'flex items-center justify-center shrink-0',
+        iconSizeClass: 'text-size-10',
+        zoneTextWrapper: 'flex flex-col flex-1 min-w-0',
+        zoneTextMain: 'text-size-4 text-color-default font-medium',
+        zoneLink: 'text-color-primary hover:underline',
+        zoneTextSub: 'text-size-3 text-color-caption',
+        // File List
+        list: 'flex flex-col gap-3',
+        // File Row
+        fileRow: [
+            'flex flex-col items-center gap-2 rounded border transition-colors min-w-0 px-3 py-1.5',
+            'bg-color-default border-color-default',
+        ],
+        fileIcon: 'flex items-center justify-center rounded bg-color-soft-blue shrink-0',
+        fileNameWrapper: 'flex flex-col flex-1 min-w-0',
+        fileTitle: 'text-size-4 font-medium text-color-default',
+        fileName: 'text-size-4 text-color-default truncate',
+        // Progress
+        progressWrapper: 'flex items-center gap-3 w-full',
+        progressBar: 'h-full bg-color-primary rounded transition-all duration-300 ease-out',
+        percent: 'text-size-4 font-medium text-color-caption min-w-[3ch] text-right',
+        // Actions
+        actions: 'flex items-center gap-2',
+        iconBtn: [
+            'size-4 rounded-full flex items-center justify-center transition-colors cursor-pointer appearance-none',
+            'text-color-icon-default hover:bg-color-default-hover border-none',
+        ],
+        caption: 'text-size-3 text-color-caption',
+    },
+    variants: {
+        size: {
+            medium: {
+                zone: 'flex-col text-center gap-2',
+                iconContainer: 'h-10 w-[50px]',
+                zoneTextWrapper: 'items-center gap-1',
+            },
+            small: {
+                zone: 'px-3 py-4 gap-2 flex-row text-left',
+                iconContainer: 'size-8',
+                iconSizeClass: 'text-size-8',
+                zoneTextWrapper: 'items-start gap-1',
+                label: 'text-size-3',
+                caption: 'text-size-2',
+            },
+        },
+        disabled: {
+            true: 'opacity-60 cursor-not-allowed',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: true,
+            class: {
+                zone: 'bg-color-disabled border-color-disabled cursor-not-allowed',
+                zoneTextMain: 'text-color-disabled',
+                zoneTextSub: 'text-color-disabled',
+                zoneLink: 'text-color-disabled cursor-not-allowed no-underline hover:no-underline',
+            },
+        },
+        {
+            disabled: false,
+            class: {
+                zone: 'cursor-pointer',
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'medium',
+        disabled: false,
+    },
+});
+export class BcmFileUpload {
+    host;
+    internals;
+    fileInput;
+    uploadTimer;
+    // Focus target for validation errors and keyboard focus
+    uploadZoneRef;
+    name = 'file';
+    label = '';
+    caption = '';
+    multiple = false;
+    accept = '.xls,.pdf';
+    maxSize = 2; // MB
+    required = false;
+    disabled = false;
+    size = 'medium';
+    /**
+     * Reserved for future backend upload integration.
+     * Currently does not affect component behavior.
+     */
+    uploadUrl;
+    /**
+     * Maximum number of files allowed in total.
+     * Only applied when `multiple` is true.
+     */
+    maxFileCount;
+    /**
+     * Allows consumers to override default error messages.
+     */
+    customErrorMessages;
+    files = [];
+    dragActive = false;
+    maxSizeError = false;
+    typeError = false;
+    maxFileCountError = false;
+    // Emits when file list changes
+    bcmFileChange;
+    // Emits when a file is removed
+    bcmFileRemoved;
+    // Emits when an upload is canceled
+    bcmUploadCanceled;
+    // Emits when the upload zone receives focus
+    bcmFocus;
+    // Emits when the upload zone loses focus
+    bcmBlur;
+    internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+    componentWillLoad() {
+        this.internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+        this.updateFormValueAndValidity();
+    }
+    disconnectedCallback() {
+        // Clear interval when component is removed from the DOM
+        if (this.uploadTimer) {
+            window.clearInterval(this.uploadTimer);
+            this.uploadTimer = undefined;
+        }
+    }
+    handleMaxSizeChange() {
+        this.internalMaxSizeInBytes = this.maxSize * 1024 * 1024;
+    }
+    /**
+     * Normalize and check a file against the `accept` attribute.
+     */
+    isFileAccepted(file) {
+        if (!this.accept)
+            return true;
+        const extension = '.' + (file.name.split('.').pop() || '').toLowerCase();
+        const accepted = this.accept
+            .toLowerCase()
+            .split(',')
+            .map(x => x.trim())
+            .filter(Boolean); // e.g. ['.pdf', '.jpg', '.png']
+        return accepted.includes(extension);
+    }
+    /**
+     * Update form value and validity state for form-associated behavior.
+     */
+    updateFormValueAndValidity() {
+        if (!this.internals)
+            return;
+        if (!this.files.length) {
+            this.internals.setFormValue(null);
+            if (this.required) {
+                const msg = this.customErrorMessages?.required ||
+                    'Please upload at least one file.';
+                this.internals.setValidity({ valueMissing: true }, msg, 
+                // Use upload zone if available, otherwise host as the validation anchor
+                this.uploadZoneRef ?? this.host);
+            }
+            else {
+                this.internals.setValidity({});
+            }
+            return;
+        }
+        const formData = new FormData();
+        this.files.forEach((item, index) => {
+            const key = this.multiple ? `${this.name}[${index}]` : this.name;
+            formData.append(key, item.file);
+        });
+        this.internals.setFormValue(formData);
+        this.internals.setValidity({});
+    }
+    emitChange() {
+        this.bcmFileChange.emit(this.files.map(f => f.file));
+    }
+    /**
+     * Simulate upload progress. Replace with real upload logic if needed.
+     */
+    startFakeUpload() {
+        if (this.uploadTimer) {
+            window.clearInterval(this.uploadTimer);
+        }
+        this.uploadTimer = window.setInterval(() => {
+            let anyUploading = false;
+            this.files = this.files.map(item => {
+                if (item.status !== 'uploading')
+                    return item;
+                anyUploading = true;
+                const current = item.progress ?? 0;
+                const next = Math.min(current + 15, 100);
+                if (next >= 100) {
+                    return { ...item, status: 'uploaded', progress: undefined };
+                }
+                return { ...item, progress: next };
+            });
+            if (!anyUploading && this.uploadTimer) {
+                window.clearInterval(this.uploadTimer);
+                this.uploadTimer = undefined;
+                this.updateFormValueAndValidity();
+                this.emitChange();
+            }
+        }, 300);
+    }
+    /**
+     * Add files from input or drop.
+     */
+    addFiles(fileList) {
+        if (!fileList || this.disabled)
+            return;
+        const newItems = [];
+        let hasSizeError = false;
+        let hasTypeError = false;
+        Array.from(fileList).forEach(file => {
+            if (!this.isFileAccepted(file)) {
+                hasTypeError = true;
+                return;
+            }
+            if (file.size > this.internalMaxSizeInBytes) {
+                hasSizeError = true;
+                return;
+            }
+            newItems.push({
+                id: crypto.randomUUID(),
+                file,
+                status: 'uploading',
+                progress: 0,
+            });
+        });
+        this.maxSizeError = hasSizeError;
+        this.typeError = hasTypeError;
+        this.maxFileCountError = false;
+        // If there are no valid files, just update validity and exit.
+        if (!newItems.length) {
+            this.updateFormValueAndValidity();
+            this.emitChange();
+            return;
+        }
+        let merged;
+        if (this.multiple) {
+            if (typeof this.maxFileCount === 'number') {
+                const remaining = this.maxFileCount - this.files.length;
+                if (remaining <= 0) {
+                    this.maxFileCountError = true;
+                    this.updateFormValueAndValidity();
+                    this.emitChange();
+                    return;
+                }
+                const acceptedNew = newItems.slice(0, Math.max(0, remaining));
+                if (acceptedNew.length < newItems.length) {
+                    this.maxFileCountError = true;
+                }
+                merged = [...this.files, ...acceptedNew];
+            }
+            else {
+                merged = [...this.files, ...newItems];
+            }
+        }
+        else {
+            // single file mode → only take first new item
+            merged = [newItems[0]];
+        }
+        this.files = merged;
+        this.updateFormValueAndValidity();
+        this.emitChange();
+        // Only fake upload for now
+        this.startFakeUpload();
+    }
+    removeFile(item) {
+        this.files = this.files.filter(f => f.id !== item.id);
+        this.bcmFileRemoved.emit(item);
+        this.updateFormValueAndValidity();
+        this.emitChange();
+    }
+    cancelUpload(item) {
+        this.files = this.files.filter(f => f.id !== item.id);
+        this.bcmUploadCanceled.emit(item);
+        this.updateFormValueAndValidity();
+        this.emitChange();
+    }
+    onFileInputChange = (event) => {
+        const input = event.target;
+        this.addFiles(input.files);
+        // Reset input so the same file can be selected again
+        input.value = '';
+    };
+    downloadFile(file) {
+        const url = URL.createObjectURL(file);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = file.name;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    handleDrop(ev) {
+        ev.preventDefault();
+        this.dragActive = false;
+        if (this.disabled)
+            return;
+        const files = ev.dataTransfer?.files || null;
+        if (!files || files.length === 0)
+            return;
+        const first = files.item(0);
+        if (!first || !this.isFileAccepted(first)) {
+            this.typeError = true;
+            return;
+        }
+        this.addFiles(files);
+    }
+    handleDragOver(ev) {
+        ev.preventDefault();
+        if (this.disabled)
+            return;
+        this.dragActive = true;
+    }
+    handleDragLeave(ev) {
+        ev.preventDefault();
+        this.dragActive = false;
+    }
+    openFileDialog = () => {
+        if (this.disabled)
+            return;
+        this.fileInput?.click();
+    };
+    formResetCallback() {
+        this.files = [];
+        this.maxSizeError = false;
+        this.typeError = false;
+        this.maxFileCountError = false;
+        if (this.uploadTimer) {
+            window.clearInterval(this.uploadTimer);
+            this.uploadTimer = undefined;
+        }
+        this.updateFormValueAndValidity();
+        this.emitChange();
+    }
+    /**
+     * When the browser or user calls element.focus(),
+     * move focus to the upload zone.
+     */
+    focus(options) {
+        this.uploadZoneRef?.focus(options);
+    }
+    handleFocus = (event) => {
+        this.bcmFocus.emit(event);
+    };
+    handleBlur = (event) => {
+        this.bcmBlur.emit(event);
+    };
+    renderErrors() {
+        if (!this.maxSizeError && !this.typeError && !this.maxFileCountError) {
+            return null;
+        }
+        const acceptedFormats = this.accept
+            .replace(/\./g, '')
+            .toUpperCase()
+            .replace(/,/g, ', ');
+        const maxSizeMsg = this.customErrorMessages?.maxSize ||
+            'File size exceeds the maximum allowed limit.';
+        const typeMsg = this.customErrorMessages?.type ||
+            `Unsupported file type. Allowed formats: ${acceptedFormats}`;
+        const maxFileCountMsg = this.customErrorMessages?.maxFileCount ||
+            'You have reached the maximum number of files.';
+        return (h("div", { class: "w-full space-y-1" }, this.maxSizeError && (h("bcm-alert", { status: "error", size: "small", dismissible: true, onBcmDismiss: () => (this.maxSizeError = false) }, maxSizeMsg)), this.typeError && (h("bcm-alert", { status: "error", size: "small", dismissible: true, onBcmDismiss: () => (this.typeError = false) }, typeMsg)), this.maxFileCountError && (h("bcm-alert", { status: "error", size: "small", dismissible: true, onBcmDismiss: () => (this.maxFileCountError = false) }, maxFileCountMsg))));
+    }
+    renderUploadZone() {
+        const classes = uploadClasses({ size: this.size, disabled: this.disabled });
+        const { zone, zoneActive, iconContainer, iconSizeClass, zoneTextWrapper, zoneTextMain, zoneTextSub, zoneLink, } = classes;
+        const zoneClasses = [zone(), this.dragActive && zoneActive()]
+            .filter(Boolean)
+            .join(' ');
+        const maxMb = Math.round(this.internalMaxSizeInBytes / (1024 * 1024));
+        const iconColorClass = this.dragActive
+            ? 'text-color-primary'
+            : 'text-color-icon-default';
+        return (h("div", { ref: el => (this.uploadZoneRef = el), tabindex: this.disabled ? undefined : 0, part: "upload-zone", class: zoneClasses, onClick: this.openFileDialog, onFocus: this.handleFocus, onBlur: this.handleBlur, onDragOver: ev => this.handleDragOver(ev), onDragLeave: ev => this.handleDragLeave(ev), onDrop: ev => this.handleDrop(ev) }, h("div", { class: iconContainer() }, h("bcm-icon", { name: "fa-solid fa-cloud-arrow-up", class: `${iconColorClass} ${iconSizeClass()}` })), h("div", { class: zoneTextWrapper() }, h("div", { class: zoneTextMain() }, "Drag & Drop", ' ', h("span", { class: "text-color-helper" }, "or "), h("a", { class: zoneLink(), onClick: e => {
+                e.preventDefault();
+                this.openFileDialog();
+            } }, "Choose File")), h("div", { class: zoneTextSub() }, "Max: ", maxMb, "MB Formats:", ' ', this.accept.replace(/\./g, '').toUpperCase().replace(/,/g, ', '))), h("input", { ref: el => (this.fileInput = el), type: "file", hidden: true, accept: this.accept, multiple: this.multiple, disabled: this.disabled, onChange: this.onFileInputChange })));
+    }
+    renderFileRow(item) {
+        const { percent, actions, iconBtn, fileRow, fileTitle } = uploadClasses({
+            size: this.size,
+            disabled: this.disabled,
+        });
+        const isUploading = item?.status === 'uploading';
+        return (h("div", { part: "file-row", class: fileRow(), title: item?.file?.name }, h("div", { class: "flex items-center justify-between w-full gap-2 min-w-0" }, h("div", { class: "flex items-center gap-1.5 min-w-0 flex-1 flex-shrink" }, h("div", { class: "flex items-center rounded bg-color-default shrink-0 text-size-3 text-color-caption" }, h("bcm-icon", { name: "fa-regular fa-file" })), h("span", { class: fileTitle() + ' truncate' }, item?.file?.name)), h("div", { class: actions() + ' flex-shrink-0' }, item.status === 'uploaded' && (h(Fragment, null, h("button", { type: "button", part: "download-btn", class: iconBtn(), onClick: () => this.downloadFile(item.file), title: "Download" }, h("bcm-icon", { name: "fa-regular fa-download", class: "text-size-4" })), h("button", { type: "button", part: "remove-btn", class: iconBtn(), onClick: () => this.removeFile(item), title: "Remove" }, h("bcm-icon", { name: "fa-regular fa-trash", class: "text-size-4" })))), isUploading && (h("button", { type: "button", part: "cancel-btn", class: 'text-color-default bg-transparent hover:bg-color-default-hover text-size-4 cursor-pointer flex items-center justify-center size-5 rounded-full border-none', onClick: () => this.cancelUpload(item), title: "Cancel" }, h("bcm-icon", { name: "fa-regular fa-xmark", class: "text-size-4" }))))), isUploading && (h("div", { class: "flex items-center gap-3 w-full min-w-0" }, h("div", { class: "h-1.5 flex-1 rounded-full bg-color-surface-default overflow-hidden" }, h("div", { class: "h-full bg-color-primary rounded-full transition-all duration-300 ease-out", style: { width: `${item.progress ?? 0}%` } })), h("span", { class: percent() }, item.progress ?? 0, "%")))));
+    }
+    render() {
+        const { container, label, list, caption } = uploadClasses({
+            size: this.size,
+            disabled: this.disabled,
+        });
+        return (h(Host, { key: '55e97908c7f1e8050231e1996086232e577c6f7f', tabindex: "-1" }, h("div", { key: '1a4ec527f4238923e8c1bba953c1eca16692b5ee', class: container() }, this.label && (h("label", { key: '07af6d58fbf4c3e97e9d2278173419ec024694ed', part: "label", class: label() }, this.label)), this.renderUploadZone(), this.renderErrors(), this.files.length > 0 && (h("div", { key: '17689bdd0cd4f7d060f35b616700fdf4ce8a0a70', part: "file-list", class: list() }, this.files.map(item => this.renderFileRow(item)))), this.caption && (h("span", { key: '89a5f04f9becb9af49040534e1e063c8adf9bfd6', part: "caption", class: caption() }, this.caption)))));
+    }
+    static get is() { return "bcm-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'file'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption",
+                "defaultValue": "''"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "'.xls,.pdf'"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size",
+                "defaultValue": "2"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'medium' | 'small'",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "uploadUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reserved for future backend upload integration.\nCurrently does not affect component behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "upload-url"
+            },
+            "maxFileCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of files allowed in total.\nOnly applied when `multiple` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-count"
+            },
+            "customErrorMessages": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BcmUploadErrorMessages",
+                    "resolved": "BcmUploadErrorMessages",
+                    "references": {
+                        "BcmUploadErrorMessages": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/upload/file-upload.component.tsx",
+                            "id": "src/components/upload/file-upload.component.tsx::BcmUploadErrorMessages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows consumers to override default error messages."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "files": {},
+            "dragActive": {},
+            "maxSizeError": {},
+            "typeError": {},
+            "maxFileCountError": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmFileChange",
+                "name": "bcmFileChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmFileRemoved",
+                "name": "bcmFileRemoved",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BcmUploadItem",
+                    "resolved": "BcmUploadItem",
+                    "references": {
+                        "BcmUploadItem": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/upload/file-upload.component.tsx",
+                            "id": "src/components/upload/file-upload.component.tsx::BcmUploadItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmUploadCanceled",
+                "name": "bcmUploadCanceled",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BcmUploadItem",
+                    "resolved": "BcmUploadItem",
+                    "references": {
+                        "BcmUploadItem": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/components/upload/file-upload.component.tsx",
+                            "id": "src/components/upload/file-upload.component.tsx::BcmUploadItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmFocus",
+                "name": "bcmFocus",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bcmBlur",
+                "name": "bcmBlur",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "maxSize",
+                "methodName": "handleMaxSizeChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=file-upload.component.js.map