bromcom-ui-next 0.1.30 → 0.1.31

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

@@ -0,0 +1,593 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, a as Host } from './index.js';
+import { t as tv } from './p-CEcVC0yX.js';
+import { d as defineCustomElement$2 } from './p-5_TgtzQU.js';
+
+const fileUploadCss = ".block{display:block}:host{display:block}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.flex{display:flex}.hidden{display:none}.size-4{height:1rem;width:1rem}.size-5{height:1.25rem;width:1.25rem}.size-8{height:2rem;width:2rem}.h-1\\.5{height:.375rem}.h-10{height:2.5rem}.h-full{height:100%}.w-\\[50px\\]{width:50px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[3ch\\]{min-width:3ch}.max-w-64{max-width:16rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.border{border-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.border-color-primary{border-color:var(--bcm-ui-color-border-primary)}.bg-color-basic-masterpage{background-color:var(--bcm-ui-color-background-basic-masterpage)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-disabled{background-color:var(--bcm-ui-color-background-disabled-default)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-color-soft-blue{background-color:var(--bcm-ui-color-background-soft-blue-default)}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-4{padding-bottom:1rem;padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-size-10{font-size:var(--bcm-ui-font-size-10,36px);line-height:var(--bcm-ui-line-height-10,44px)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-8{font-size:var(--bcm-ui-font-size-8,24px);line-height:var(--bcm-ui-line-height-8,32px)}.font-medium{font-weight:500}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-icon-default{color:var(--bcm-ui-color-text-icon-default)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.no-underline{text-decoration-line:none}.opacity-60{opacity:.6}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.hover\\:underline:hover{text-decoration-line:underline}.hover\\:no-underline:hover{text-decoration-line:none}";
+
+/**
+ * @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,
+    },
+});
+const BcmFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class BcmFileUpload extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bcmFileChange = createEvent(this, "bcmFileChange", 1);
+        this.bcmFileRemoved = createEvent(this, "bcmFileRemoved", 1);
+        this.bcmUploadCanceled = createEvent(this, "bcmUploadCanceled", 1);
+        this.bcmFocus = createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = createEvent(this, "bcmBlur", 1);
+        this.internals = this.attachInternals();
+    }
+    get host() { return this; }
+    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 formAssociated() { return true; }
+    static get watchers() { return {
+        "maxSize": ["handleMaxSizeChange"]
+    }; }
+    static get style() { return fileUploadCss; }
+}, [321, "bcm-file-upload", {
+        "name": [1],
+        "label": [1],
+        "caption": [1],
+        "multiple": [4],
+        "accept": [1],
+        "maxSize": [1026, "max-size"],
+        "required": [4],
+        "disabled": [4],
+        "size": [1],
+        "uploadUrl": [1, "upload-url"],
+        "maxFileCount": [2, "max-file-count"],
+        "customErrorMessages": [16],
+        "files": [32],
+        "dragActive": [32],
+        "maxSizeError": [32],
+        "typeError": [32],
+        "maxFileCountError": [32]
+    }, undefined, {
+        "maxSize": ["handleMaxSizeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-file-upload", "bcm-alert"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-file-upload":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmFileUpload$1);
+            }
+            break;
+        case "bcm-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmFileUpload = BcmFileUpload$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmFileUpload, defineCustomElement };
+//# sourceMappingURL=bcm-file-upload.js.map
+
+//# sourceMappingURL=bcm-file-upload.js.map