bromcom-ui-next 0.1.30 → 0.1.31

package/dist/cjs/bcm-file-upload.cjs.entry.js

@@ -0,0 +1,552 @@
+'use strict';
+
+var index = require('./index-1Qal-onT.js');
+var tv = require('./tv-ngpIbGlG.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.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmFileChange = index.createEvent(this, "bcmFileChange", 1);
+        this.bcmFileRemoved = index.createEvent(this, "bcmFileRemoved", 1);
+        this.bcmUploadCanceled = index.createEvent(this, "bcmUploadCanceled", 1);
+        this.bcmFocus = index.createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = index.createEvent(this, "bcmBlur", 1);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get host() { return index.getElement(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 (index.h("div", { class: "w-full space-y-1" }, this.maxSizeError && (index.h("bcm-alert", { status: "error", size: "small", dismissible: true, onBcmDismiss: () => (this.maxSizeError = false) }, maxSizeMsg)), this.typeError && (index.h("bcm-alert", { status: "error", size: "small", dismissible: true, onBcmDismiss: () => (this.typeError = false) }, typeMsg)), this.maxFileCountError && (index.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 (index.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) }, index.h("div", { class: iconContainer() }, index.h("bcm-icon", { name: "fa-solid fa-cloud-arrow-up", class: `${iconColorClass} ${iconSizeClass()}` })), index.h("div", { class: zoneTextWrapper() }, index.h("div", { class: zoneTextMain() }, "Drag & Drop", ' ', index.h("span", { class: "text-color-helper" }, "or "), index.h("a", { class: zoneLink(), onClick: e => {
+                e.preventDefault();
+                this.openFileDialog();
+            } }, "Choose File")), index.h("div", { class: zoneTextSub() }, "Max: ", maxMb, "MB Formats:", ' ', this.accept.replace(/\./g, '').toUpperCase().replace(/,/g, ', '))), index.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 (index.h("div", { part: "file-row", class: fileRow(), title: item?.file?.name }, index.h("div", { class: "flex items-center justify-between w-full gap-2 min-w-0" }, index.h("div", { class: "flex items-center gap-1.5 min-w-0 flex-1 flex-shrink" }, index.h("div", { class: "flex items-center rounded bg-color-default shrink-0 text-size-3 text-color-caption" }, index.h("bcm-icon", { name: "fa-regular fa-file" })), index.h("span", { class: fileTitle() + ' truncate' }, item?.file?.name)), index.h("div", { class: actions() + ' flex-shrink-0' }, item.status === 'uploaded' && (index.h(index.Fragment, null, index.h("button", { type: "button", part: "download-btn", class: iconBtn(), onClick: () => this.downloadFile(item.file), title: "Download" }, index.h("bcm-icon", { name: "fa-regular fa-download", class: "text-size-4" })), index.h("button", { type: "button", part: "remove-btn", class: iconBtn(), onClick: () => this.removeFile(item), title: "Remove" }, index.h("bcm-icon", { name: "fa-regular fa-trash", class: "text-size-4" })))), isUploading && (index.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" }, index.h("bcm-icon", { name: "fa-regular fa-xmark", class: "text-size-4" }))))), isUploading && (index.h("div", { class: "flex items-center gap-3 w-full min-w-0" }, index.h("div", { class: "h-1.5 flex-1 rounded-full bg-color-surface-default overflow-hidden" }, index.h("div", { class: "h-full bg-color-primary rounded-full transition-all duration-300 ease-out", style: { width: `${item.progress ?? 0}%` } })), index.h("span", { class: percent() }, item.progress ?? 0, "%")))));
+    }
+    render() {
+        const { container, label, list, caption } = uploadClasses({
+            size: this.size,
+            disabled: this.disabled,
+        });
+        return (index.h(index.Host, { key: '55e97908c7f1e8050231e1996086232e577c6f7f', tabindex: "-1" }, index.h("div", { key: '1a4ec527f4238923e8c1bba953c1eca16692b5ee', class: container() }, this.label && (index.h("label", { key: '07af6d58fbf4c3e97e9d2278173419ec024694ed', part: "label", class: label() }, this.label)), this.renderUploadZone(), this.renderErrors(), this.files.length > 0 && (index.h("div", { key: '17689bdd0cd4f7d060f35b616700fdf4ce8a0a70', part: "file-list", class: list() }, this.files.map(item => this.renderFileRow(item)))), this.caption && (index.h("span", { key: '89a5f04f9becb9af49040534e1e063c8adf9bfd6', part: "caption", class: caption() }, this.caption)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "maxSize": ["handleMaxSizeChange"]
+    }; }
+};
+BcmFileUpload.style = fileUploadCss;
+
+exports.bcm_file_upload = BcmFileUpload;
+//# sourceMappingURL=bcm-file-upload.entry.cjs.js.map

package/dist/cjs/bcm-file-upload.entry.cjs.js.map

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