@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-file-field/co-file-field.js

@@ -0,0 +1,841 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { fillTemplate, getFileStrings } from "../../utils/fileI18n";
+import { formatBytes, isImage, previewSrc, truncateLeft } from "./co-file-field.utils";
+/**
+ * Host-driven file selector — renders a drop-zone + previews + a file list with
+ * upload progress, but performs NO upload itself. When the user picks/drops
+ * files it emits `coFilesSelected` carrying the raw `File` objects (via the
+ * in-memory CustomEvent detail, never a serialized attribute); the host uploads
+ * them and feeds the resulting state back through the controlled `files` prop.
+ * This mirrors `co-ref-field` (the WC emits intent, the host does the I/O).
+ *
+ * @part wrapper - Root container
+ * @part label - The field label
+ * @part dropzone - The drag-and-drop / browse area
+ * @part upload-button - The pill CTA button inside the dropzone
+ * @part actions - Container of the host-provided `actions` slot
+ * @part uploaded-title - The "Uploaded files (n)" heading
+ * @part previews - The image previews grid
+ * @part preview - A single image preview card
+ * @part list - The uploaded/in-progress file list
+ * @part row - A single file row
+ * @part drag-handle - The reorder handle of a row
+ * @part helper - The helper/error text row
+ *
+ * @slot actions - Extra host actions rendered inside the dropzone (e.g. paste
+ *                 from clipboard, pick from cloud drive).
+ */
+export class CoFileField {
+    constructor() {
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.multiple = false;
+        /** Max number of files (multiple mode). */
+        this.maxFiles = 100;
+        /** External validation status (e.g. from a form controller). */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Allow drag-reordering of the uploaded list (multiple mode). */
+        this.reorderable = true;
+        /** Controlled file list, JSON array of {@link FileItem} (owned by the host). */
+        this.files = '[]';
+        this.dragOver = false;
+        this.localError = '';
+        this.copiedKey = '';
+        /** Row key armed for dragging (handle pressed). */
+        this.armedKey = '';
+        /** Row key currently being dragged. */
+        this.dragKey = '';
+        /** Row key currently hovered as drop target. */
+        this.overKey = '';
+        this.failedPreviews = new Set();
+        this.tempSeq = 0;
+        this.lastFilesStr = '';
+        this.lastParsed = [];
+        this.handleDragOver = (e) => {
+            if (this.disabled || this.readonly || this.dragKey)
+                return;
+            e.preventDefault();
+            this.dragOver = true;
+        };
+        this.handleDragLeave = (e) => {
+            // dragleave also fires when entering a child of the dropzone — ignore
+            // those so the highlight doesn't flicker during the drag.
+            const to = e.relatedTarget;
+            if (to && e.currentTarget instanceof Node && e.currentTarget.contains(to))
+                return;
+            this.dragOver = false;
+        };
+        this.handleDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            this.dragOver = false;
+            if (this.dragKey)
+                return; // internal row reorder, not a file drop
+            if ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files)
+                this.handleFiles(e.dataTransfer.files);
+        };
+        this.handleBrowse = (e) => {
+            var _a;
+            if (this.disabled || this.readonly)
+                return;
+            if (e && this.fromActionsSlot(e))
+                return;
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleInputChange = (e) => {
+            const input = e.target;
+            if (input.files)
+                this.handleFiles(input.files);
+            input.value = ''; // allow re-selecting the same file
+        };
+        // ── Reorder ───────────────────────────────────────────────────
+        this.disarmDrag = () => {
+            if (this.armedKey && !this.dragKey)
+                this.armedKey = '';
+        };
+        this.handleRowDragEnd = () => {
+            this.resetDragState();
+        };
+    }
+    connectedCallback() {
+        window.addEventListener('mouseup', this.disarmDrag);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.disarmDrag);
+        clearTimeout(this.copiedTimer);
+        this.closeLightbox();
+    }
+    get parsedFiles() {
+        const raw = this.files;
+        if (typeof raw !== 'string' || !raw.trim())
+            return [];
+        if (raw === this.lastFilesStr)
+            return this.lastParsed;
+        let parsed = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parsed = p;
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        this.lastFilesStr = raw;
+        this.lastParsed = parsed;
+        return parsed;
+    }
+    get strings() {
+        return getFileStrings(this.locale);
+    }
+    get acceptList() {
+        const raw = this.accept;
+        if (!raw)
+            return [];
+        let parts = [];
+        try {
+            const p = JSON.parse(raw);
+            if (Array.isArray(p))
+                parts = p.map(String);
+        }
+        catch (_a) {
+            parts = raw.split(',');
+        }
+        return parts
+            .map((s) => s.trim().toLowerCase().replace(/^\./, ''))
+            .filter((s) => s && s !== '*');
+    }
+    get isInvalid() {
+        return this.status === 'error' || !!this.localError;
+    }
+    get inputAccept() {
+        const list = this.acceptList;
+        if (!list.length)
+            return undefined;
+        return list.map((e) => (e.includes('/') ? e : `.${e}`)).join(',');
+    }
+    extOf(name) {
+        const i = name.lastIndexOf('.');
+        return i >= 0 ? name.slice(i + 1).toLowerCase() : '';
+    }
+    validate(file) {
+        const list = this.acceptList;
+        if (list.length) {
+            const ext = this.extOf(file.name);
+            const okExt = list.includes(ext);
+            const okMime = list.some((a) => a.includes('/') && file.type === a);
+            if (!okExt && !okMime)
+                return fillTemplate(this.strings.errInvalidFormat, { x: ext });
+        }
+        if (this.maxBytes && file.size > this.maxBytes) {
+            return fillTemplate(this.strings.errTooLarge, { x: formatBytes(file.size) });
+        }
+        return null;
+    }
+    handleFiles(fileList) {
+        if (this.disabled || this.readonly)
+            return;
+        this.localError = '';
+        const incoming = Array.from(fileList);
+        if (!incoming.length)
+            return;
+        const selected = this.multiple ? incoming : incoming.slice(0, 1);
+        // Capacity check (multiple only).
+        if (this.multiple) {
+            const room = this.maxFiles - this.parsedFiles.length;
+            if (room <= 0) {
+                this.localError = fillTemplate(this.strings.errMaxFiles, { n: this.maxFiles });
+                return;
+            }
+            if (selected.length > room)
+                selected.length = room;
+        }
+        const valid = [];
+        const tempIds = [];
+        for (const file of selected) {
+            const err = this.validate(file);
+            if (err) {
+                this.localError = err;
+                continue;
+            }
+            valid.push(file);
+            tempIds.push(`tmp-${Date.now()}-${this.tempSeq++}`);
+        }
+        if (valid.length)
+            this.coFilesSelected.emit({ files: valid, tempIds });
+    }
+    /** True when the event originates from the host's `actions` slot content. */
+    fromActionsSlot(e) {
+        return e
+            .composedPath()
+            .some((n) => { var _a, _b; return ((_b = (_a = n).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, 'slot')) === 'actions'; });
+    }
+    keyFor(item) {
+        var _a;
+        // Hosts normally assign id/tempId; the compound fallback keeps two
+        // same-named files apart (must stay in lock-step with form-vue's keyOf).
+        return item.id || item.tempId || `${item.name}:${(_a = item.size) !== null && _a !== void 0 ? _a : ''}`;
+    }
+    // ── Copy ──────────────────────────────────────────────────────
+    handleCopy(item) {
+        var _a;
+        const url = item.url || '';
+        if (!url)
+            return;
+        const key = this.keyFor(item);
+        this.coCopy.emit({ id: key, url });
+        if ((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText) {
+            navigator.clipboard
+                .writeText(url)
+                .then(() => {
+                this.copiedKey = key;
+                clearTimeout(this.copiedTimer);
+                this.copiedTimer = setTimeout(() => (this.copiedKey = ''), 1500);
+            })
+                .catch(() => {
+                /* clipboard blocked — coCopy already notified the host */
+            });
+        }
+    }
+    // ── Preview (in-app lightbox) ─────────────────────────────────
+    /**
+     * Opens the clicked image in a co-lightbox with the SAME gallery the
+     * previews grid shows. The lightbox is created imperatively on
+     * `document.body`: an open co-drawer keeps `transform: translateX(0)`,
+     * which would trap a `position: fixed` overlay rendered inline here.
+     */
+    handlePreviewOpen(item) {
+        const url = item.url || item.thumbnail;
+        if (!url)
+            return;
+        this.coPreviewOpen.emit({ id: this.keyFor(item), url });
+        const gallery = this.parsedFiles.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
+        const images = gallery.map((it) => ({
+            src: previewSrc(it),
+            thumbnail: it.thumbnail,
+            alt: it.name,
+        }));
+        const startIndex = Math.max(0, gallery.findIndex((it) => this.keyFor(it) === this.keyFor(item)));
+        this.closeLightbox();
+        const lb = document.createElement('co-lightbox');
+        lb.images = JSON.stringify(images);
+        lb.startIndex = startIndex;
+        if (this.locale)
+            lb.locale = this.locale;
+        lb.addEventListener('coClose', () => this.closeLightbox());
+        document.body.appendChild(lb);
+        this.lightboxEl = lb;
+        // Open on the next frame so the opacity transition runs.
+        requestAnimationFrame(() => {
+            lb.open = true;
+        });
+    }
+    closeLightbox() {
+        const lb = this.lightboxEl;
+        this.lightboxEl = undefined;
+        if (!lb)
+            return;
+        lb.open = false; // fade out, then drop the node
+        setTimeout(() => lb.remove(), 220);
+    }
+    handlePreviewError(item) {
+        this.failedPreviews = new Set([...this.failedPreviews, this.keyFor(item)]);
+    }
+    handleRowDragStart(e, key) {
+        if (this.armedKey !== key) {
+            e.preventDefault();
+            return;
+        }
+        this.dragKey = key;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', key);
+        }
+    }
+    handleRowDragOver(e, key) {
+        if (!this.dragKey || this.dragKey === key)
+            return;
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        this.overKey = key;
+    }
+    handleRowDrop(e, key) {
+        e.preventDefault();
+        e.stopPropagation();
+        const keys = this.parsedFiles.map((it) => this.keyFor(it));
+        const from = keys.indexOf(this.dragKey);
+        const to = keys.indexOf(key);
+        this.resetDragState();
+        if (from < 0 || to < 0 || from === to)
+            return;
+        keys.splice(to, 0, ...keys.splice(from, 1));
+        this.coReorder.emit(keys);
+    }
+    resetDragState() {
+        this.armedKey = '';
+        this.dragKey = '';
+        this.overKey = '';
+    }
+    // ── Derived text ──────────────────────────────────────────────
+    capacityHint(s) {
+        const x = this.maxBytes ? formatBytes(this.maxBytes) : '';
+        if (this.multiple && this.maxBytes)
+            return fillTemplate(s.helperBoth, { n: this.maxFiles, x });
+        if (this.multiple)
+            return fillTemplate(s.helperFiles, { n: this.maxFiles });
+        if (this.maxBytes)
+            return fillTemplate(s.helperBytes, { x });
+        return '';
+    }
+    render() {
+        const s = this.strings;
+        const items = this.parsedFiles;
+        const helper = this.localError || this.helperText;
+        const atCapacity = this.multiple && items.length >= this.maxFiles;
+        const showDropzone = !this.readonly && (this.multiple ? !atCapacity : items.length === 0);
+        const statusClass = this.status !== 'default' ? `co-file-field--${this.status}` : '';
+        const previews = items.filter((it) => isImage(it) && !this.failedPreviews.has(this.keyFor(it)));
+        const canReorder = this.reorderable && this.multiple && !this.disabled && !this.readonly && items.length > 1;
+        const capacity = this.capacityHint(s);
+        return (h("div", { key: 'a4bc53a3deccc7ef04de56356583a8fbcbe39649', class: {
+                'co-file-field': true,
+                'co-file-field--disabled': this.disabled,
+                'co-file-field--invalid': this.isInvalid,
+                [statusClass]: !!statusClass,
+            }, part: "wrapper" }, this.label && (h("div", { key: '4d4c418ff76f72ac7b491dc5173078ebcecdfbb7', class: "co-file-field__labels" }, h("label", { key: 'afe9d0d47d50178270a4a4a7f9a90af4f8472958', class: "co-file-field__label", part: "label" }, this.label, h(RequiredMark, { key: 'e4879bd87853fcbb0552d9e6835fb3934916c29f', required: this.required })))), showDropzone && (h("div", { key: 'f60920fe11c3d1020ffb6043f20f3a82e6905cb2', class: {
+                'co-file-field__dropzone': true,
+                'co-file-field__dropzone--drag': this.dragOver,
+            }, part: "dropzone", role: "button", tabIndex: this.disabled ? -1 : 0, onClick: this.handleBrowse, onKeyDown: (e) => {
+                if ((e.key === 'Enter' || e.key === ' ') && !this.fromActionsSlot(e)) {
+                    e.preventDefault();
+                    this.handleBrowse();
+                }
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("button", { key: 'f9152f578e99a926a3b81996917f2a592b8d14cd', class: "co-file-field__upload-btn", part: "upload-button", type: "button", tabIndex: -1 }, h("co-icon", { key: '93a116c81906b5daaac81feb6d671d942d085bd8', name: "file-arrow-up", size: 18 }), h("span", { key: 'fb09b9218d6185d116d75368591b6b7e2be399b6' }, this.uploadButtonText || s.uploadButton)), h("span", { key: 'd4287e8a0070536125f09dfdd73925476a6cebcf', class: "co-file-field__dropzone-text" }, this.dropText || s.dropHint), capacity && h("span", { key: '5626df4c28f2f5c4967abeb839db53a39bc547d8', class: "co-file-field__dropzone-hint" }, capacity), h("div", { key: '40ec0e991be663ffe5f55618ed97de44221e9780', class: "co-file-field__actions", part: "actions" }, h("slot", { key: '2037922c65407155a051533050bab4bbaa908633', name: "actions" })), h("input", { key: '74e2fd73161811ef41eec79786598f3bc86075d8', ref: (el) => (this.inputEl = el), class: "co-file-field__input", type: "file", multiple: this.multiple, accept: this.inputAccept, disabled: this.disabled, onChange: this.handleInputChange, "aria-hidden": "true", tabIndex: -1 }))), items.length > 0 && (h("div", { key: 'cff78c1550847e20bcfe5b24fd6d14a5e80033d9', class: "co-file-field__uploaded" }, this.multiple && (h("div", { key: 'fa99dad43c4982f14bc330598d27d99d44e6516c', class: "co-file-field__uploaded-title", part: "uploaded-title" }, `${this.uploadedTitle || s.uploadedTitle} (${items.length})`)), previews.length > 0 && (h("div", { key: '83cc2ebec6af1b1baa66a74eb620c82a8eff5569', class: "co-file-field__previews", part: "previews" }, previews.map((item) => (h("button", { class: "co-file-field__preview", part: "preview", type: "button", key: `prev-${this.keyFor(item)}`, title: item.name, "aria-label": s.openPreview, onClick: () => this.handlePreviewOpen(item) }, h("img", { src: item.thumbnail || item.url, alt: item.name, loading: "lazy", onError: () => this.handlePreviewError(item) })))))), h("ul", { key: 'acc3232ccadc13f72a84cc4e3dd2281499a583b7', class: "co-file-field__list", part: "list" }, items.map((item) => {
+            const key = this.keyFor(item);
+            const draggable = canReorder && item.status === 'done';
+            return (h("li", { class: {
+                    'co-file-field__row': true,
+                    [`co-file-field__row--${item.status}`]: true,
+                    'co-file-field__row--dragging': this.dragKey === key,
+                    'co-file-field__row--drop-target': this.overKey === key,
+                }, part: "row", key: key, draggable: this.armedKey === key, onDragStart: (e) => this.handleRowDragStart(e, key), onDragOver: (e) => this.handleRowDragOver(e, key), onDrop: (e) => this.handleRowDrop(e, key), onDragEnd: this.handleRowDragEnd }, draggable ? (h("span", { class: "co-file-field__drag-handle", part: "drag-handle", title: s.dragToReorder, onMouseDown: () => (this.armedKey = key) }, h("co-icon", { name: "list", size: 18 }))) : (h("co-icon", { name: item.status === 'error'
+                    ? 'warning-circle'
+                    : item.status === 'uploading'
+                        ? 'spinner-gap'
+                        : 'file', size: 18, class: {
+                    'co-file-field__row-icon': true,
+                    'co-file-field__row-icon--spin': item.status === 'uploading',
+                } })), h("div", { class: "co-file-field__row-body" }, h("span", { class: "co-file-field__row-name", title: item.name }, truncateLeft(item.name)), item.status === 'uploading' && (h("div", { class: "co-file-field__progress" }, h("div", { class: "co-file-field__progress-bar", style: typeof item.progress === 'number'
+                    ? { width: `${item.progress}%` }
+                    : undefined }))), item.status === 'error' && item.error && (h("span", { class: "co-file-field__row-error" }, item.error))), item.size != null && (h("span", { class: "co-file-field__row-size" }, formatBytes(item.size))), item.status === 'done' && !!item.url && (h("button", { class: {
+                    'co-file-field__action': true,
+                    'co-file-field__action--copied': this.copiedKey === key,
+                }, type: "button", tabIndex: -1, title: this.copiedKey === key ? s.copied : s.copyUrl, "aria-label": s.copyUrl, onClick: () => this.handleCopy(item) }, h("co-icon", { name: this.copiedKey === key ? 'check' : 'copy', size: 18 }))), !this.disabled && !this.readonly && (h("button", { class: "co-file-field__action", type: "button", tabIndex: -1, title: s.removeFile, "aria-label": s.removeFile, onClick: () => this.coRemove.emit(key) }, h("co-icon", { name: "trash", size: 18 })))));
+        })))), helper && (h("div", { key: 'ef2efaa2264b229e372679c00a554a88fed804a0', class: {
+                'co-file-field__helper': true,
+                'co-file-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (h("co-icon", { key: '7b9ddbcc88296ddb30cf6fe3d651afba544ef991', name: "warning-circle", size: 14, class: "co-file-field__helper-icon" })), h("span", { key: '1090e1cd4508413ebda4ed649df1852be46f5fb5', class: "co-file-field__helper-text" }, helper)))));
+    }
+    static get is() { return "co-file-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-file-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-file-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "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 | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted formats: comma list of extensions/mime (e.g. \".pdf,.png\" or a JSON array)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max number of files (multiple mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-files",
+                "defaultValue": "100"
+            },
+            "maxBytes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Max bytes per file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-bytes"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External validation status (e.g. from a form controller)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text shown below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for the built-in UI strings (es/en/pt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "uploadButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override for the dropzone CTA button text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "upload-button-text"
+            },
+            "dropText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Main drag-and-drop hint in the dropzone (defaults to the locale string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drop-text"
+            },
+            "uploadedTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override for the uploaded-files heading (count is appended)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uploaded-title"
+            },
+            "reorderable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow drag-reordering of the uploaded list (multiple mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorderable",
+                "defaultValue": "true"
+            },
+            "files": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled file list, JSON array of {@link FileItem} (owned by the host)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "files",
+                "defaultValue": "'[]'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dragOver": {},
+            "localError": {},
+            "copiedKey": {},
+            "armedKey": {},
+            "dragKey": {},
+            "overKey": {},
+            "failedPreviews": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coFilesSelected",
+                "name": "coFilesSelected",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user picks/drops valid files. Detail carries the raw Files."
+                },
+                "complexType": {
+                    "original": "{ files: File[]; tempIds: string[] }",
+                    "resolved": "{ files: File[]; tempIds: string[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }, {
+                "method": "coRemove",
+                "name": "coRemove",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to remove a file (id or tempId)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to clear all files."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coReorder",
+                "name": "coReorder",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after a drag-reorder with the full ordered list of keys (id ?? tempId)."
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "coCopy",
+                "name": "coCopy",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a file URL is copied to the clipboard."
+                },
+                "complexType": {
+                    "original": "{ id: string; url: string }",
+                    "resolved": "{ id: string; url: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coPreviewOpen",
+                "name": "coPreviewOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an image preview is opened."
+                },
+                "complexType": {
+                    "original": "{ id: string; url: string }",
+                    "resolved": "{ id: string; url: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}