@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/upload.js

@@ -0,0 +1,702 @@
+import { defineComponentElement, } from "../../src/runtime/component-element.js";
+import { readDataAttr, readNumberDataAttr, shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_UPLOAD_PROPS = {
+    multiple: true,
+    disabled: false,
+    autoUpload: false,
+    theme: "light",
+    dropLabel: "Drop files here or",
+    browseLabel: "browse",
+    uploadButtonLabel: "Upload files",
+    removeButtonLabel: "Remove",
+    retryButtonLabel: "Retry",
+};
+const UPLOAD_PROP_DEFINITIONS = [
+    { attribute: "label", prop: "label" },
+    { attribute: "hint", prop: "hint" },
+    { attribute: "accept", prop: "accept" },
+    { attribute: "multiple", prop: "multiple", type: "boolean" },
+    { attribute: "max-files", prop: "maxFiles", type: "number" },
+    { attribute: "disabled", prop: "disabled", type: "boolean" },
+    { attribute: "auto-upload", prop: "autoUpload", type: "boolean" },
+    { attribute: "theme", prop: "theme" },
+    { attribute: "drop-label", prop: "dropLabel" },
+    { attribute: "browse-label", prop: "browseLabel" },
+    { attribute: "upload-button-label", prop: "uploadButtonLabel" },
+    { attribute: "remove-button-label", prop: "removeButtonLabel" },
+    { attribute: "retry-button-label", prop: "retryButtonLabel" },
+    { attribute: "files", prop: "files", type: "json" },
+];
+const STATUS_LABELS = {
+    pending: "Waiting",
+    uploading: "Uploading",
+    success: "Uploaded",
+    error: "Failed",
+};
+let uploadIdCounter = 0;
+const createUploadId = () => {
+    uploadIdCounter += 1;
+    return `ce-upload-${Date.now()}-${uploadIdCounter}`;
+};
+const applyUploadParts = (dom) => {
+    dom.container.setAttribute("data-ce-component", "upload");
+    dom.container.setAttribute("part", "base");
+    dom.container.querySelectorAll(".ce-upload__header").forEach((node) => { node.setAttribute("part", "header"); node.setAttribute("data-ce-slot", "header"); });
+    dom.label.setAttribute("part", "label");
+    dom.hint.setAttribute("part", "hint");
+    dom.dropzone.setAttribute("part", "dropzone");
+    dom.dropText.setAttribute("part", "drop-label");
+    dom.browseLabel.setAttribute("part", "browse");
+    dom.input.setAttribute("part", "input");
+    dom.uploadButton.setAttribute("part", "primary");
+    dom.empty.setAttribute("part", "empty");
+    dom.empty.setAttribute("data-ce-slot", "empty");
+    const emptyFallback = dom.empty.textContent?.trim() ?? "";
+    if (emptyFallback.length > 0) {
+        dom.empty.setAttribute("data-ce-fallback", emptyFallback);
+    }
+    dom.list.setAttribute("part", "list");
+    dom.container.querySelectorAll(".ce-upload__item").forEach((node) => node.setAttribute("part", "item"));
+    dom.container.querySelectorAll(".ce-upload__file").forEach((node) => node.setAttribute("part", "file"));
+    dom.container.querySelectorAll(".ce-upload__file-name").forEach((node) => node.setAttribute("part", "file-name"));
+    dom.container.querySelectorAll(".ce-upload__file-size").forEach((node) => node.setAttribute("part", "file-size"));
+    dom.container.querySelectorAll(".ce-upload__status").forEach((node) => node.setAttribute("part", "status"));
+    dom.container.querySelectorAll(".ce-upload__progress").forEach((node) => node.setAttribute("part", "progress"));
+    dom.container.querySelectorAll(".ce-upload__progress-bar").forEach((node) => node.setAttribute("part", "progress-bar"));
+    dom.container
+        .querySelectorAll(".ce-upload__item-actions")
+        .forEach((node) => node.setAttribute("part", "item-actions"));
+    dom.container
+        .querySelectorAll(".ce-upload__item-action")
+        .forEach((node) => node.setAttribute("part", "item-action"));
+    dom.container.querySelectorAll(".ce-upload__error").forEach((node) => node.setAttribute("part", "error"));
+};
+const uploadComponent = {
+    mount({ target, props = {}, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-upload");
+        const dom = existingWrapper ? hydrateDom(existingWrapper) : createDom(host);
+        applyUploadParts(dom);
+        const state = {
+            props: { ...DEFAULT_UPLOAD_PROPS, ...props },
+            files: normalizeFiles(props.files),
+            dragDepth: 0,
+        };
+        if (existingWrapper) {
+            const domLabel = dom.label.textContent?.trim();
+            const dataLabel = readDataAttr(existingWrapper, "label");
+            if (shouldUseDomValue(host, "label", dataLabel ?? domLabel)) {
+                state.props.label = dataLabel ?? domLabel;
+            }
+            const domHint = dom.hint.textContent?.trim();
+            const dataHint = readDataAttr(existingWrapper, "hint");
+            if (shouldUseDomValue(host, "hint", dataHint ?? domHint)) {
+                state.props.hint = dataHint ?? domHint;
+            }
+            const dataAccept = readDataAttr(existingWrapper, "accept");
+            const domAccept = dom.input.getAttribute("accept") ?? undefined;
+            if (shouldUseDomValue(host, "accept", dataAccept ?? domAccept)) {
+                state.props.accept = dataAccept ?? domAccept;
+            }
+            const dataMultiple = readDataAttr(existingWrapper, "multiple");
+            if (shouldUseDomValue(host, "multiple", dataMultiple)) {
+                state.props.multiple = dataMultiple === "true";
+            }
+            else if (shouldUseDomValue(host, "multiple", dom.input.multiple ? "true" : "false")) {
+                state.props.multiple = dom.input.multiple;
+            }
+            const dataMaxFiles = readNumberDataAttr(existingWrapper, "max-files");
+            if (shouldUseDomValue(host, "max-files", dataMaxFiles)) {
+                state.props.maxFiles = dataMaxFiles;
+            }
+            const dataDisabled = readDataAttr(existingWrapper, "disabled");
+            if (shouldUseDomValue(host, "disabled", dataDisabled)) {
+                state.props.disabled = dataDisabled === "true";
+            }
+            else if (shouldUseDomValue(host, "disabled", existingWrapper.classList.contains("is-disabled") ? "true" : "false")) {
+                state.props.disabled = existingWrapper.classList.contains("is-disabled");
+            }
+            const dataAutoUpload = readDataAttr(existingWrapper, "auto-upload");
+            if (shouldUseDomValue(host, "auto-upload", dataAutoUpload)) {
+                state.props.autoUpload = dataAutoUpload === "true";
+            }
+            const dataTheme = readDataAttr(existingWrapper, "theme");
+            if (shouldUseDomValue(host, "theme", dataTheme)) {
+                state.props.theme = dataTheme ?? DEFAULT_UPLOAD_PROPS.theme;
+            }
+            else if (shouldUseDomValue(host, "theme", existingWrapper.classList.contains("ce-upload--dark") ? "dark" : "light")) {
+                state.props.theme = existingWrapper.classList.contains("ce-upload--dark") ? "dark" : "light";
+            }
+            const dataDropLabel = readDataAttr(existingWrapper, "drop-label");
+            const domDropLabel = dom.dropText.textContent?.trim();
+            if (shouldUseDomValue(host, "drop-label", dataDropLabel ?? domDropLabel)) {
+                state.props.dropLabel = dataDropLabel ?? domDropLabel;
+            }
+            const dataBrowseLabel = readDataAttr(existingWrapper, "browse-label");
+            const domBrowseLabel = dom.browseLabel.textContent?.trim();
+            if (shouldUseDomValue(host, "browse-label", dataBrowseLabel ?? domBrowseLabel)) {
+                state.props.browseLabel = dataBrowseLabel ?? domBrowseLabel;
+            }
+            const dataUploadLabel = readDataAttr(existingWrapper, "upload-button-label");
+            const domUploadLabel = dom.uploadButton.textContent?.trim();
+            if (shouldUseDomValue(host, "upload-button-label", dataUploadLabel ?? domUploadLabel)) {
+                state.props.uploadButtonLabel = dataUploadLabel ?? domUploadLabel;
+            }
+            const dataRemoveLabel = readDataAttr(existingWrapper, "remove-button-label");
+            if (shouldUseDomValue(host, "remove-button-label", dataRemoveLabel)) {
+                state.props.removeButtonLabel = dataRemoveLabel ?? DEFAULT_UPLOAD_PROPS.removeButtonLabel;
+            }
+            const dataRetryLabel = readDataAttr(existingWrapper, "retry-button-label");
+            if (shouldUseDomValue(host, "retry-button-label", dataRetryLabel)) {
+                state.props.retryButtonLabel = dataRetryLabel ?? DEFAULT_UPLOAD_PROPS.retryButtonLabel;
+            }
+            const dataFiles = readDataAttr(existingWrapper, "files");
+            if (shouldUseDomValue(host, "files", dataFiles)) {
+                try {
+                    state.files = normalizeFiles(JSON.parse(dataFiles ?? "[]"));
+                }
+                catch {
+                    state.files = [];
+                }
+            }
+            else {
+                const domFiles = readFilesFromDom(existingWrapper);
+                if (shouldUseDomValue(host, "files", domFiles) && domFiles.length) {
+                    state.files = normalizeFiles(domFiles);
+                }
+            }
+        }
+        const emit = {
+            select(detail) {
+                on?.select?.(detail);
+            },
+            upload(detail) {
+                on?.upload?.(detail);
+            },
+            remove(detail) {
+                on?.remove?.(detail);
+            },
+            retry(detail) {
+                on?.retry?.(detail);
+            },
+        };
+        const syncProps = (partial) => {
+            state.props = { ...state.props, ...partial };
+            applyProps(dom, state);
+            renderFileList(dom, state, retryFile, removeFile);
+        };
+        const setFiles = (next) => {
+            state.files = next;
+            renderFileList(dom, state, retryFile, removeFile);
+        };
+        const requestUpload = (reason = "manual") => {
+            if (!state.files.length) {
+                return;
+            }
+            emit.upload({ files: state.files, reason });
+        };
+        const retryFile = (id) => {
+            const targetFile = state.files.find((file) => file.id === id);
+            if (!targetFile) {
+                return;
+            }
+            const updated = state.files.map((file) => file.id === id
+                ? {
+                    ...file,
+                    status: "uploading",
+                    progress: file.progress === 100 ? 0 : file.progress,
+                }
+                : file);
+            setFiles(updated);
+            emit.retry({ file: targetFile });
+        };
+        const removeFile = (id) => {
+            const removed = state.files.find((file) => file.id === id);
+            if (!removed) {
+                return;
+            }
+            setFiles(state.files.filter((file) => file.id !== id));
+            emit.remove({ file: removed });
+        };
+        const handleFiles = (incoming) => {
+            if (!incoming || ("length" in incoming && incoming.length === 0)) {
+                return;
+            }
+            const acceptedFiles = Array.from(incoming);
+            const mapped = acceptedFiles.map((file) => mapFileToSnapshot(file, state.props.autoUpload));
+            const allowMultiple = state.props.multiple ?? true;
+            if (!allowMultiple) {
+                const first = mapped[0];
+                if (!first) {
+                    return;
+                }
+                setFiles([first]);
+                emit.select({ files: acceptedFiles.slice(0, 1) });
+                if (state.props.autoUpload) {
+                    requestUpload("auto");
+                }
+                return;
+            }
+            const maxFiles = typeof state.props.maxFiles === "number" ? state.props.maxFiles : Infinity;
+            const availableSlots = Math.max(0, Math.floor(maxFiles - state.files.length));
+            const nextEntries = availableSlots ? mapped.slice(0, availableSlots) : [];
+            if (!nextEntries.length) {
+                return;
+            }
+            setFiles([...state.files, ...nextEntries]);
+            emit.select({ files: acceptedFiles.slice(0, nextEntries.length) });
+            if (state.props.autoUpload) {
+                requestUpload("auto");
+            }
+        };
+        const handleBrowseClick = () => {
+            if (state.props.disabled) {
+                return;
+            }
+            dom.input.click();
+        };
+        const handleInputChange = () => {
+            handleFiles(dom.input.files);
+            dom.input.value = "";
+        };
+        const preventDefault = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const handleDragEnter = (event) => {
+            preventDefault(event);
+            if (state.props.disabled) {
+                return;
+            }
+            state.dragDepth += 1;
+            dom.dropzone.classList.add("is-dragging");
+        };
+        const handleDragLeave = (event) => {
+            preventDefault(event);
+            if (state.props.disabled) {
+                return;
+            }
+            state.dragDepth = Math.max(0, state.dragDepth - 1);
+            if (state.dragDepth === 0) {
+                dom.dropzone.classList.remove("is-dragging");
+            }
+        };
+        const handleDrop = (event) => {
+            preventDefault(event);
+            state.dragDepth = 0;
+            dom.dropzone.classList.remove("is-dragging");
+            if (state.props.disabled) {
+                return;
+            }
+            handleFiles(event.dataTransfer?.files ?? null);
+        };
+        dom.browseLabel.addEventListener("click", handleBrowseClick);
+        dom.input.addEventListener("change", handleInputChange);
+        const handleDragOver = (event) => {
+            preventDefault(event);
+        };
+        const handleUploadClick = () => requestUpload("manual");
+        dom.dropzone.addEventListener("dragenter", handleDragEnter);
+        dom.dropzone.addEventListener("dragover", handleDragOver);
+        dom.dropzone.addEventListener("dragleave", handleDragLeave);
+        dom.dropzone.addEventListener("drop", handleDrop);
+        dom.uploadButton.addEventListener("click", handleUploadClick);
+        syncProps();
+        return {
+            destroy() {
+                dom.browseLabel.removeEventListener("click", handleBrowseClick);
+                dom.input.removeEventListener("change", handleInputChange);
+                dom.dropzone.removeEventListener("dragenter", handleDragEnter);
+                dom.dropzone.removeEventListener("dragleave", handleDragLeave);
+                dom.dropzone.removeEventListener("drop", handleDrop);
+                dom.dropzone.removeEventListener("dragover", handleDragOver);
+                dom.uploadButton.removeEventListener("click", handleUploadClick);
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                if (partial?.files) {
+                    state.files = normalizeFiles(partial.files);
+                }
+                syncProps(partial);
+            },
+        };
+    },
+    renderToString(props) {
+        const normalized = { ...DEFAULT_UPLOAD_PROPS, ...props };
+        const files = normalizeFiles(normalized.files);
+        const classes = buildUploadClass(normalized);
+        const label = normalized.label ? `<p class="ce-upload__label" part="label">${escapeHtml(normalized.label)}</p>` : "";
+        const hint = normalized.hint ? `<p class="ce-upload__hint" part="hint">${escapeHtml(normalized.hint)}</p>` : "";
+        const dropLabel = escapeHtml(normalized.dropLabel ?? DEFAULT_UPLOAD_PROPS.dropLabel);
+        const browseLabel = escapeHtml(normalized.browseLabel ?? DEFAULT_UPLOAD_PROPS.browseLabel);
+        const uploadLabel = escapeHtml(normalized.uploadButtonLabel ?? DEFAULT_UPLOAD_PROPS.uploadButtonLabel);
+        const removeLabel = escapeHtml(normalized.removeButtonLabel ?? DEFAULT_UPLOAD_PROPS.removeButtonLabel);
+        const retryLabel = escapeHtml(normalized.retryButtonLabel ?? DEFAULT_UPLOAD_PROPS.retryButtonLabel);
+        const fileItems = files
+            .map((file) => {
+            const actions = normalized.disabled
+                ? ""
+                : `<div class="ce-upload__item-actions" part="item-actions"><button type="button" class="ce-upload__item-action" part="item-action">${removeLabel}</button>${file.status === "error"
+                    ? `<button type="button" class="ce-upload__item-action" part="item-action">${retryLabel}</button>`
+                    : ""}</div>`;
+            const error = file.error ? `<p class="ce-upload__error" part="error">${escapeHtml(file.error)}</p>` : "";
+            return `<li class="ce-upload__item" part="item" data-id="${escapeHtml(file.id ?? "")}" data-name="${escapeHtml(file.name)}" data-size="${file.size}" data-progress="${clampProgress(file.progress)}" data-status="${file.status}"${file.error ? ` data-error="${escapeHtml(file.error)}"` : ""}>
+  <div class="ce-upload__file" part="file">
+    <span class="ce-upload__file-name" part="file-name">${escapeHtml(file.name)}</span>
+    <span class="ce-upload__file-size" part="file-size">${formatBytes(file.size)}</span>
+  </div>
+  <span class="ce-upload__status" part="status">${STATUS_LABELS[file.status]}</span>
+  <div class="ce-upload__progress" part="progress">
+    <span class="ce-upload__progress-bar" part="progress-bar" style="width:${file.status === "success" ? 100 : clampProgress(file.progress)}%"></span>
+  </div>
+  ${actions}
+  ${error}
+</li>`;
+        })
+            .join("\n");
+        const listMarkup = files.length
+            ? `<ul class="ce-upload__list" part="list">${fileItems}</ul>`
+            : `<p class="ce-upload__empty" part="empty" data-ce-slot="empty" data-ce-fallback="No files selected">No files selected</p>`;
+        const dataFiles = escapeHtml(JSON.stringify(normalized.files ?? []));
+        const dataMaxFiles = typeof normalized.maxFiles === "number" ? String(normalized.maxFiles) : "";
+        const dataAttrs = ` data-label="${escapeHtml(normalized.label ?? "")}" data-hint="${escapeHtml(normalized.hint ?? "")}" data-accept="${escapeHtml(normalized.accept ?? "")}" data-multiple="${normalized.multiple ? "true" : "false"}" data-max-files="${dataMaxFiles}" data-disabled="${normalized.disabled ? "true" : "false"}" data-auto-upload="${normalized.autoUpload ? "true" : "false"}" data-theme="${escapeHtml(normalized.theme ?? DEFAULT_UPLOAD_PROPS.theme ?? "light")}" data-drop-label="${dropLabel}" data-browse-label="${browseLabel}" data-upload-button-label="${uploadLabel}" data-remove-button-label="${removeLabel}" data-retry-button-label="${retryLabel}" data-files="${dataFiles}"`;
+        return `<section class="${classes}" data-ce-component="upload" part="base"${dataAttrs}>
+  <div class="ce-upload__header" part="header" data-ce-slot="header">
+    ${label}
+    ${hint}
+  </div>
+  <div class="ce-upload__dropzone" part="dropzone" role="group" aria-disabled="${normalized.disabled ? "true" : "false"}">
+    <span class="ce-upload__drop-label" part="drop-label">${dropLabel}</span>
+    <button class="ce-upload__browse" part="browse" type="button">${browseLabel}</button>
+  </div>
+  <input class="ce-upload__input" part="input" type="file"${normalized.accept ? ` accept="${escapeHtml(normalized.accept)}"` : ""}${normalized.multiple ? " multiple" : ""}${normalized.disabled ? " disabled" : ""} hidden />
+  <button class="ce-upload__primary" part="primary" type="button">${uploadLabel}</button>
+  ${listMarkup}
+</section>`;
+    },
+};
+export function registerUploadElement() {
+    return defineComponentElement({
+        tag: "ce-upload",
+        component: uploadComponent,
+        props: UPLOAD_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_UPLOAD_PROPS,
+        events: ["select", "upload", "remove", "retry"],
+        shadow: false,
+        preserveLightDom: true,
+    });
+}
+function createDom(host) {
+    const container = document.createElement("section");
+    container.className = "ce-upload";
+    const header = document.createElement("div");
+    header.className = "ce-upload__header";
+    const label = document.createElement("p");
+    label.className = "ce-upload__label";
+    const hint = document.createElement("p");
+    hint.className = "ce-upload__hint";
+    const dropzone = document.createElement("div");
+    dropzone.className = "ce-upload__dropzone";
+    dropzone.setAttribute("role", "group");
+    const dropText = document.createElement("span");
+    dropText.className = "ce-upload__drop-label";
+    dropzone.appendChild(dropText);
+    const browseLabel = document.createElement("button");
+    browseLabel.type = "button";
+    browseLabel.className = "ce-upload__browse";
+    dropzone.appendChild(browseLabel);
+    const input = document.createElement("input");
+    input.type = "file";
+    input.className = "ce-upload__input";
+    input.hidden = true;
+    const uploadButton = document.createElement("button");
+    uploadButton.type = "button";
+    uploadButton.className = "ce-upload__primary";
+    const empty = document.createElement("p");
+    empty.className = "ce-upload__empty";
+    empty.textContent = "No files selected";
+    empty.hidden = true;
+    const list = document.createElement("ul");
+    list.className = "ce-upload__list";
+    list.hidden = true;
+    header.append(label, hint);
+    container.append(header, dropzone, input, uploadButton, empty, list);
+    host.append(container);
+    return { container, label, hint, dropzone, dropText, browseLabel, input, list, uploadButton, empty };
+}
+function hydrateDom(container) {
+    const header = container.querySelector(".ce-upload__header") ?? createHeader(container);
+    const label = header.querySelector(".ce-upload__label") ?? createLabel(header);
+    const hint = header.querySelector(".ce-upload__hint") ?? createHint(header);
+    const dropzone = container.querySelector(".ce-upload__dropzone") ?? createDropzone(container);
+    const dropText = dropzone.querySelector(".ce-upload__drop-label") ?? createDropText(dropzone);
+    const browseLabel = dropzone.querySelector(".ce-upload__browse") ?? createBrowseLabel(dropzone);
+    const input = container.querySelector(".ce-upload__input") ?? createInput(container, dropzone);
+    const uploadButton = container.querySelector(".ce-upload__primary") ?? createUploadButton(container);
+    const empty = container.querySelector(".ce-upload__empty") ?? createEmpty(container);
+    const list = container.querySelector(".ce-upload__list") ?? createList(container);
+    return { container, label, hint, dropzone, dropText, browseLabel, input, list, uploadButton, empty };
+}
+function createHeader(container) {
+    const header = document.createElement("div");
+    header.className = "ce-upload__header";
+    container.prepend(header);
+    return header;
+}
+function createLabel(header) {
+    const label = document.createElement("p");
+    label.className = "ce-upload__label";
+    header.appendChild(label);
+    return label;
+}
+function createHint(header) {
+    const hint = document.createElement("p");
+    hint.className = "ce-upload__hint";
+    header.appendChild(hint);
+    return hint;
+}
+function createDropzone(container) {
+    const dropzone = document.createElement("div");
+    dropzone.className = "ce-upload__dropzone";
+    dropzone.setAttribute("role", "group");
+    container.appendChild(dropzone);
+    return dropzone;
+}
+function createDropText(dropzone) {
+    const dropText = document.createElement("span");
+    dropText.className = "ce-upload__drop-label";
+    dropzone.appendChild(dropText);
+    return dropText;
+}
+function createBrowseLabel(dropzone) {
+    const browseLabel = document.createElement("button");
+    browseLabel.type = "button";
+    browseLabel.className = "ce-upload__browse";
+    dropzone.appendChild(browseLabel);
+    return browseLabel;
+}
+function createInput(container, dropzone) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.className = "ce-upload__input";
+    input.hidden = true;
+    if (dropzone.nextSibling) {
+        container.insertBefore(input, dropzone.nextSibling);
+    }
+    else {
+        container.appendChild(input);
+    }
+    return input;
+}
+function createUploadButton(container) {
+    const uploadButton = document.createElement("button");
+    uploadButton.type = "button";
+    uploadButton.className = "ce-upload__primary";
+    container.appendChild(uploadButton);
+    return uploadButton;
+}
+function createEmpty(container) {
+    const empty = document.createElement("p");
+    empty.className = "ce-upload__empty";
+    empty.textContent = "No files selected";
+    empty.hidden = true;
+    container.appendChild(empty);
+    return empty;
+}
+function createList(container) {
+    const list = document.createElement("ul");
+    list.className = "ce-upload__list";
+    list.hidden = true;
+    container.appendChild(list);
+    return list;
+}
+function applyProps(dom, state) {
+    const { props, files } = state;
+    dom.container.className = buildUploadClass(props);
+    dom.container.dataset.files = `${files.length}`;
+    dom.container.dataset.theme = props.theme ?? "light";
+    dom.label.textContent = props.label ?? "Upload files";
+    dom.label.toggleAttribute("hidden", !props.label);
+    dom.hint.textContent = props.hint ?? "";
+    dom.hint.toggleAttribute("hidden", !props.hint);
+    dom.dropText.textContent = props.dropLabel ?? DEFAULT_UPLOAD_PROPS.dropLabel;
+    dom.browseLabel.textContent = props.browseLabel ?? DEFAULT_UPLOAD_PROPS.browseLabel;
+    dom.uploadButton.textContent = props.uploadButtonLabel ?? DEFAULT_UPLOAD_PROPS.uploadButtonLabel;
+    dom.input.multiple = props.multiple ?? true;
+    dom.input.disabled = Boolean(props.disabled);
+    if (props.accept) {
+        dom.input.accept = props.accept;
+    }
+    else {
+        dom.input.removeAttribute("accept");
+    }
+    dom.dropzone.setAttribute("aria-disabled", props.disabled ? "true" : "false");
+    dom.uploadButton.disabled = Boolean(props.disabled) || files.length === 0;
+}
+function renderFileList(dom, state, retryFile, removeFile) {
+    const { files, props } = state;
+    dom.list.innerHTML = "";
+    if (!files.length) {
+        dom.empty.hidden = false;
+        dom.list.hidden = true;
+        return;
+    }
+    dom.empty.hidden = true;
+    dom.list.hidden = false;
+    files.forEach((file) => {
+        const item = document.createElement("li");
+        item.className = "ce-upload__item";
+        item.dataset.status = file.status;
+        item.setAttribute("part", "item");
+        const header = document.createElement("div");
+        header.className = "ce-upload__file";
+        header.setAttribute("part", "file");
+        const name = document.createElement("span");
+        name.className = "ce-upload__file-name";
+        name.textContent = file.name;
+        name.setAttribute("part", "file-name");
+        const size = document.createElement("span");
+        size.className = "ce-upload__file-size";
+        size.textContent = formatBytes(file.size);
+        size.setAttribute("part", "file-size");
+        header.append(name, size);
+        const status = document.createElement("span");
+        status.className = "ce-upload__status";
+        status.textContent = STATUS_LABELS[file.status];
+        status.setAttribute("part", "status");
+        const progressWrapper = document.createElement("div");
+        progressWrapper.className = "ce-upload__progress";
+        progressWrapper.setAttribute("part", "progress");
+        const progressBar = document.createElement("span");
+        progressBar.className = "ce-upload__progress-bar";
+        progressBar.style.width = `${file.status === "success" ? 100 : clampProgress(file.progress)}%`;
+        progressBar.setAttribute("part", "progress-bar");
+        progressWrapper.appendChild(progressBar);
+        const actions = document.createElement("div");
+        actions.className = "ce-upload__item-actions";
+        actions.setAttribute("part", "item-actions");
+        if (!props.disabled) {
+            const removeBtn = document.createElement("button");
+            removeBtn.type = "button";
+            removeBtn.className = "ce-upload__item-action";
+            removeBtn.textContent = props.removeButtonLabel ?? DEFAULT_UPLOAD_PROPS.removeButtonLabel;
+            removeBtn.setAttribute("part", "item-action");
+            removeBtn.addEventListener("click", () => removeFile(file.id));
+            actions.appendChild(removeBtn);
+            if (file.status === "error") {
+                const retryBtn = document.createElement("button");
+                retryBtn.type = "button";
+                retryBtn.className = "ce-upload__item-action";
+                retryBtn.textContent = props.retryButtonLabel ?? DEFAULT_UPLOAD_PROPS.retryButtonLabel;
+                retryBtn.setAttribute("part", "item-action");
+                retryBtn.addEventListener("click", () => retryFile(file.id));
+                actions.appendChild(retryBtn);
+            }
+        }
+        item.append(header, status, progressWrapper, actions);
+        if (file.error) {
+            const error = document.createElement("p");
+            error.className = "ce-upload__error";
+            error.textContent = file.error;
+            error.setAttribute("part", "error");
+            item.append(error);
+        }
+        dom.list.appendChild(item);
+    });
+    dom.uploadButton.disabled = Boolean(props.disabled) || files.length === 0;
+}
+function buildUploadClass(props) {
+    const classes = ["ce-upload"];
+    if (props.theme === "dark") {
+        classes.push("ce-upload--dark");
+    }
+    if (props.disabled) {
+        classes.push("is-disabled");
+    }
+    return classes.join(" ");
+}
+function normalizeFiles(files) {
+    if (!Array.isArray(files)) {
+        return [];
+    }
+    return files.map((file) => ({
+        id: file.id ?? createUploadId(),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: clampProgress(file.progress ?? 0),
+        status: file.status ?? "pending",
+        error: file.error,
+        meta: file.meta,
+    }));
+}
+function mapFileToSnapshot(file, autoUpload) {
+    const baseStatus = autoUpload ? "uploading" : "pending";
+    const baseProgress = autoUpload ? 5 : 0;
+    return {
+        id: createUploadId(),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: baseProgress,
+        status: baseStatus,
+        meta: { lastModified: file.lastModified },
+    };
+}
+function clampProgress(progress) {
+    if (progress <= 1 && progress > 0) {
+        return Math.round(progress * 100);
+    }
+    if (Number.isNaN(progress)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(100, Math.round(progress)));
+}
+function formatBytes(bytes) {
+    if (!bytes) {
+        return "0 B";
+    }
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / 1024 ** exponent;
+    return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[exponent]}`;
+}
+const HTML_ESCAPE_LOOKUP = {
+    "&": "&amp;",
+    "\"": "&quot;",
+    "'": "&#39;",
+    "<": "&lt;",
+    ">": "&gt;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&"'<>]/g, (char) => HTML_ESCAPE_LOOKUP[char] ?? char);
+}
+function readFilesFromDom(container) {
+    const items = Array.from(container.querySelectorAll(".ce-upload__item"));
+    if (!items.length) {
+        return [];
+    }
+    return items.map((item, index) => {
+        const name = item.getAttribute("data-name") ??
+            item.querySelector(".ce-upload__file-name")?.textContent?.trim() ??
+            `File ${index + 1}`;
+        const sizeAttr = item.getAttribute("data-size");
+        const size = sizeAttr ? Number(sizeAttr) : 0;
+        const status = item.getAttribute("data-status") ?? "pending";
+        const progressAttr = item.getAttribute("data-progress");
+        const progress = progressAttr ? Number(progressAttr) : 0;
+        const id = item.getAttribute("data-id") ?? undefined;
+        const error = item.getAttribute("data-error") ?? item.querySelector(".ce-upload__error")?.textContent?.trim() ?? undefined;
+        return {
+            id,
+            name,
+            size,
+            progress,
+            status,
+            error,
+        };
+    });
+}
+//# sourceMappingURL=upload.js.map