tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/file-upload.js

@@ -1,19 +1,3 @@
-/**
- * TyFileUpload Web Component
- *
- * Drop zone + file picker primitive. Replaces `<input type="file">` with
- * a styleable, drag-and-drop-capable equivalent that works everywhere.
- *
- * - Click to browse or drag-and-drop
- * - Multiple file support
- * - Accept filter passed to the underlying file input
- * - Emits `change` with `{ files, names }` on every selection
- * - Form-associated: participates in FormData and form.reset()
- *
- * @example
- * <ty-file-upload name="avatar" accept="image/*" label="Profile photo"></ty-file-upload>
- * <ty-file-upload name="docs" multiple accept=".pdf,.docx" label="Attachments"></ty-file-upload>
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { fileUploadStyles } from "../styles/file-upload.js";
@@ -21,421 +5,415 @@ const UPLOAD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
 const FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
 const X_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
 function formatBytes(bytes) {
-    if (bytes < 1024)
-        return `${bytes} B`;
-    if (bytes < 1024 * 1024)
-        return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024)
-        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+if (bytes < 1024)
+return `${bytes} B`;
+if (bytes < 1024 * 1024)
+return `${(bytes / 1024).toFixed(1)} KB`;
+if (bytes < 1024 * 1024 * 1024)
+return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
 }
 export class TyFileUpload extends TyComponent {
-    constructor() {
-        super();
-        this._files = [];
-        this._isDragging = false;
-        this._listenersSetup = false;
-        this._dropZoneClickHandler = null;
-        this._dropZoneKeydownHandler = null;
-        this._dropZoneFocusHandler = null;
-        this._dropZoneBlurHandler = null;
-        this._dragoverHandler = null;
-        this._dragleaveHandler = null;
-        this._dropHandler = null;
-        this._inputChangeHandler = null;
-        ensureStyles(this.shadowRoot, { css: fileUploadStyles, id: "ty-file-upload" });
-    }
-    onConnect() { }
-    onDisconnect() {
-        this.removeEventListeners();
-    }
-    onPropertiesChanged(_changes) { }
-    onFormReset() {
-        this._files = [];
-        this.updateFormValue();
-        if (this._connected)
-            this.render();
-        const fileInput = this.shadowRoot?.querySelector(".file-input");
-        if (fileInput)
-            fileInput.value = "";
-    }
-    getFormValue() {
-        if (this._files.length === 0)
-            return null;
-        const fd = new FormData();
-        const fieldName = this.name || "files";
-        for (const file of this._files) {
-            fd.append(fieldName, file);
-        }
-        return fd;
-    }
-    // ============================================================================
-    // PUBLIC API
-    // ============================================================================
-    get files() {
-        return [...this._files];
-    }
-    get multiple() {
-        return this.getProperty("multiple");
-    }
-    set multiple(v) {
-        this.setProperty("multiple", v);
-    }
-    get accept() {
-        return this.getProperty("accept");
-    }
-    set accept(v) {
-        this.setProperty("accept", v);
-    }
-    get name() {
-        return this.getProperty("name");
-    }
-    set name(v) {
-        this.setProperty("name", v);
-    }
-    get disabled() {
-        return this.getProperty("disabled");
-    }
-    set disabled(v) {
-        this.setProperty("disabled", v);
-    }
-    get required() {
-        return this.getProperty("required");
-    }
-    set required(v) {
-        this.setProperty("required", v);
-    }
-    get label() {
-        return this.getProperty("label");
-    }
-    set label(v) {
-        this.setProperty("label", v);
-    }
-    get placeholder() {
-        return this.getProperty("placeholder");
-    }
-    set placeholder(v) {
-        this.setProperty("placeholder", v);
-    }
-    get error() {
-        return this.getProperty("error");
-    }
-    set error(v) {
-        this.setProperty("error", v);
-    }
-    get form() {
-        return this._internals.form;
-    }
-    // ============================================================================
-    // INTERNAL FILE MANAGEMENT
-    // ============================================================================
-    setFiles(newFiles) {
-        this._files = this.multiple ? newFiles : newFiles.slice(0, 1);
-        this.updateFormValue();
-        this.render();
-        const detail = {
-            value: this._files,
-            files: this._files,
-            names: this._files.map((f) => f.name),
-        };
-        setTimeout(() => {
-            this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
-        }, 0);
-    }
-    removeFile(index) {
-        const updated = [...this._files];
-        updated.splice(index, 1);
-        this.setFiles(updated);
-        const fileInput = this.shadowRoot?.querySelector(".file-input");
-        if (fileInput)
-            fileInput.value = "";
-    }
-    // ============================================================================
-    // EVENT LISTENERS
-    // ============================================================================
-    setupEventListeners() {
-        if (this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        const dropZone = shadow.querySelector(".drop-zone");
-        const fileInput = shadow.querySelector(".file-input");
-        this._dropZoneClickHandler = (e) => {
-            if (this.disabled)
-                return;
-            if (e.target.closest(".file-remove"))
-                return;
-            fileInput.click();
-        };
-        this._dropZoneKeydownHandler = (e) => {
-            if (this.disabled)
-                return;
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                fileInput.click();
-            }
-        };
-        this._dropZoneFocusHandler = () => {
-            dropZone.classList.add("focused");
-        };
-        this._dropZoneBlurHandler = () => {
-            dropZone.classList.remove("focused");
-        };
-        this._dragoverHandler = (e) => {
-            if (this.disabled)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            if (!this._isDragging) {
-                this._isDragging = true;
-                dropZone.classList.add("drag-active");
-            }
-        };
-        this._dragleaveHandler = (e) => {
-            if (!dropZone.contains(e.relatedTarget)) {
-                this._isDragging = false;
-                dropZone.classList.remove("drag-active");
-            }
-        };
-        this._dropHandler = (e) => {
-            if (this.disabled)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            this._isDragging = false;
-            dropZone.classList.remove("drag-active");
-            const files = Array.from(e.dataTransfer?.files ?? []);
-            if (files.length > 0)
-                this.setFiles(files);
-        };
-        this._inputChangeHandler = (e) => {
-            const input = e.target;
-            if (input.files && input.files.length > 0) {
-                this.setFiles(Array.from(input.files));
-            }
-        };
-        dropZone.addEventListener("click", this._dropZoneClickHandler);
-        dropZone.addEventListener("keydown", this._dropZoneKeydownHandler);
-        dropZone.addEventListener("focus", this._dropZoneFocusHandler);
-        dropZone.addEventListener("blur", this._dropZoneBlurHandler);
-        dropZone.addEventListener("dragover", this._dragoverHandler);
-        dropZone.addEventListener("dragleave", this._dragleaveHandler);
-        dropZone.addEventListener("drop", this._dropHandler);
-        fileInput.addEventListener("change", this._inputChangeHandler);
-        this._listenersSetup = true;
-    }
-    removeEventListeners() {
-        if (!this._listenersSetup)
-            return;
-        const shadow = this.shadowRoot;
-        if (!shadow)
-            return;
-        const dropZone = shadow.querySelector(".drop-zone");
-        const fileInput = shadow.querySelector(".file-input");
-        if (!dropZone || !fileInput)
-            return;
-        if (this._dropZoneClickHandler)
-            dropZone.removeEventListener("click", this._dropZoneClickHandler);
-        if (this._dropZoneKeydownHandler)
-            dropZone.removeEventListener("keydown", this._dropZoneKeydownHandler);
-        if (this._dropZoneFocusHandler)
-            dropZone.removeEventListener("focus", this._dropZoneFocusHandler);
-        if (this._dropZoneBlurHandler)
-            dropZone.removeEventListener("blur", this._dropZoneBlurHandler);
-        if (this._dragoverHandler)
-            dropZone.removeEventListener("dragover", this._dragoverHandler);
-        if (this._dragleaveHandler)
-            dropZone.removeEventListener("dragleave", this._dragleaveHandler);
-        if (this._dropHandler)
-            dropZone.removeEventListener("drop", this._dropHandler);
-        if (this._inputChangeHandler)
-            fileInput.removeEventListener("change", this._inputChangeHandler);
-        this._listenersSetup = false;
-    }
-    // ============================================================================
-    // RENDERING
-    // ============================================================================
-    buildDropZoneClasses() {
-        const classes = ["drop-zone"];
-        if (this._isDragging)
-            classes.push("drag-active");
-        if (this._files.length > 0)
-            classes.push("has-files");
-        if (this.disabled)
-            classes.push("disabled");
-        if (this.error)
-            classes.push("error");
-        return classes.join(" ");
-    }
-    renderFileList(fileList) {
-        fileList.innerHTML = "";
-        for (let i = 0; i < this._files.length; i++) {
-            const file = this._files[i];
-            const item = document.createElement("div");
-            item.className = "file-item";
-            const icon = document.createElement("span");
-            icon.className = "file-icon";
-            icon.innerHTML = FILE_ICON;
-            const name = document.createElement("span");
-            name.className = "file-name";
-            name.textContent = file.name;
-            name.title = file.name;
-            const size = document.createElement("span");
-            size.className = "file-size";
-            size.textContent = formatBytes(file.size);
-            const removeBtn = document.createElement("button");
-            removeBtn.className = "file-remove";
-            removeBtn.type = "button";
-            removeBtn.innerHTML = X_ICON;
-            removeBtn.setAttribute("aria-label", `Remove ${file.name}`);
-            const capturedIndex = i;
-            removeBtn.addEventListener("click", (e) => {
-                e.stopPropagation();
-                this.removeFile(capturedIndex);
-            });
-            item.appendChild(icon);
-            item.appendChild(name);
-            item.appendChild(size);
-            item.appendChild(removeBtn);
-            fileList.appendChild(item);
-        }
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        let container = shadow.querySelector(".file-upload-container");
-        if (!container) {
-            container = document.createElement("div");
-            container.className = "file-upload-container";
-            const labelEl = document.createElement("div");
-            labelEl.className = "upload-label";
-            container.appendChild(labelEl);
-            const dropZone = document.createElement("div");
-            dropZone.className = "drop-zone";
-            dropZone.setAttribute("role", "button");
-            const fileInput = document.createElement("input");
-            fileInput.type = "file";
-            fileInput.className = "file-input";
-            fileInput.style.display = "none";
-            dropZone.appendChild(fileInput);
-            const uploadIcon = document.createElement("div");
-            uploadIcon.className = "upload-icon";
-            uploadIcon.innerHTML = UPLOAD_ICON;
-            dropZone.appendChild(uploadIcon);
-            const hintEl = document.createElement("div");
-            hintEl.className = "upload-hint";
-            dropZone.appendChild(hintEl);
-            const subHintEl = document.createElement("div");
-            subHintEl.className = "upload-sub-hint";
-            dropZone.appendChild(subHintEl);
-            container.appendChild(dropZone);
-            const fileList = document.createElement("div");
-            fileList.className = "file-list";
-            container.appendChild(fileList);
-            const errorEl = document.createElement("div");
-            errorEl.className = "error-message";
-            container.appendChild(errorEl);
-            shadow.appendChild(container);
-            this.setupEventListeners();
-        }
-        // Label
-        const labelEl = container.querySelector(".upload-label");
-        if (this.label) {
-            labelEl.style.display = "";
-            labelEl.innerHTML = "";
-            labelEl.appendChild(document.createTextNode(this.label));
-            if (this.required) {
-                const req = document.createElement("span");
-                req.className = "required-icon";
-                req.textContent = "*";
-                req.setAttribute("aria-hidden", "true");
-                labelEl.appendChild(req);
-            }
-        }
-        else {
-            labelEl.style.display = "none";
-        }
-        // Drop zone
-        const dropZone = container.querySelector(".drop-zone");
-        dropZone.className = this.buildDropZoneClasses();
-        dropZone.tabIndex = this.disabled ? -1 : 0;
-        dropZone.setAttribute("aria-disabled", String(this.disabled));
-        dropZone.setAttribute("aria-label", this.placeholder || "Upload files");
-        // File input
-        const fileInput = container.querySelector(".file-input");
-        fileInput.multiple = this.multiple;
-        fileInput.accept = this.accept;
-        fileInput.disabled = this.disabled;
-        // Upload icon — hide once files are selected to give room to the compact zone
-        const uploadIcon = container.querySelector(".upload-icon");
-        uploadIcon.style.display = this._files.length > 0 ? "none" : "";
-        // Hint text
-        const hintEl = container.querySelector(".upload-hint");
-        if (this._files.length > 0) {
-            hintEl.innerHTML = `<strong>${this._files.length} file${this._files.length !== 1 ? "s" : ""} selected</strong>`;
-        }
-        else {
-            hintEl.innerHTML = `Drop files here or <span class="browse-link">click to browse</span>`;
-        }
-        // Sub-hint
-        const subHintEl = container.querySelector(".upload-sub-hint");
-        if (this.accept && this._files.length === 0) {
-            subHintEl.textContent = `Accepted: ${this.accept}`;
-            subHintEl.style.display = "";
-        }
-        else {
-            subHintEl.style.display = "none";
-        }
-        // File list
-        const fileList = container.querySelector(".file-list");
-        this.renderFileList(fileList);
-        // Error message
-        const errorEl = container.querySelector(".error-message");
-        errorEl.textContent = this.error;
-        errorEl.style.display = this.error ? "" : "none";
-    }
+constructor() {
+super();
+this._files = [];
+this._isDragging = false;
+this._listenersSetup = false;
+this._dropZoneClickHandler = null;
+this._dropZoneKeydownHandler = null;
+this._dropZoneFocusHandler = null;
+this._dropZoneBlurHandler = null;
+this._dragoverHandler = null;
+this._dragleaveHandler = null;
+this._dropHandler = null;
+this._inputChangeHandler = null;
+ensureStyles(this.shadowRoot, { css: fileUploadStyles, id: "ty-file-upload" });
+}
+onConnect() { }
+onDisconnect() {
+this.removeEventListeners();
+}
+onPropertiesChanged(_changes) { }
+onFormReset() {
+this._files = [];
+this.updateFormValue();
+if (this._connected)
+this.render();
+const fileInput = this.shadowRoot?.querySelector(".file-input");
+if (fileInput)
+fileInput.value = "";
+}
+getFormValue() {
+if (this._files.length === 0 || !this.name)
+return null;
+const fd = new FormData();
+for (const file of this._files) {
+fd.append(this.name, file);
+}
+return fd;
+}
+matchesAccept(file) {
+const accept = this.accept?.trim();
+if (!accept)
+return true;
+return accept.split(",").some((raw) => {
+const entry = raw.trim().toLowerCase();
+if (!entry)
+return false;
+if (entry.startsWith("."))
+return file.name.toLowerCase().endsWith(entry);
+const type = file.type.toLowerCase();
+if (entry.endsWith("/*"))
+return type.startsWith(entry.slice(0, -1));
+return type === entry;
+});
+}
+get files() {
+return [...this._files];
+}
+get multiple() {
+return this.getProperty("multiple");
+}
+set multiple(v) {
+this.setProperty("multiple", v);
+}
+get accept() {
+return this.getProperty("accept");
+}
+set accept(v) {
+this.setProperty("accept", v);
+}
+get name() {
+return this.getProperty("name");
+}
+set name(v) {
+this.setProperty("name", v);
+}
+get disabled() {
+return this.getProperty("disabled");
+}
+set disabled(v) {
+this.setProperty("disabled", v);
+}
+get required() {
+return this.getProperty("required");
+}
+set required(v) {
+this.setProperty("required", v);
+}
+get label() {
+return this.getProperty("label");
+}
+set label(v) {
+this.setProperty("label", v);
+}
+get placeholder() {
+return this.getProperty("placeholder");
+}
+set placeholder(v) {
+this.setProperty("placeholder", v);
+}
+get error() {
+return this.getProperty("error");
+}
+set error(v) {
+this.setProperty("error", v);
+}
+get form() {
+return this._internals.form;
+}
+setFiles(newFiles) {
+this._files = this.multiple ? newFiles : newFiles.slice(0, 1);
+this.updateFormValue();
+this.render();
+const detail = {
+value: this._files,
+files: this._files,
+names: this._files.map((f) => f.name),
+};
+setTimeout(() => {
+this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
+}, 0);
+}
+removeFile(index) {
+const updated = [...this._files];
+updated.splice(index, 1);
+this.setFiles(updated);
+const fileInput = this.shadowRoot?.querySelector(".file-input");
+if (fileInput)
+fileInput.value = "";
+}
+setupEventListeners() {
+if (this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+const dropZone = shadow.querySelector(".drop-zone");
+const fileInput = shadow.querySelector(".file-input");
+this._dropZoneClickHandler = (e) => {
+if (this.disabled)
+return;
+if (e.target.closest(".file-remove"))
+return;
+fileInput.click();
+};
+this._dropZoneKeydownHandler = (e) => {
+if (this.disabled)
+return;
+if (e.key === "Enter" || e.key === " ") {
+e.preventDefault();
+fileInput.click();
+}
+};
+this._dropZoneFocusHandler = () => {
+dropZone.classList.add("focused");
+};
+this._dropZoneBlurHandler = () => {
+dropZone.classList.remove("focused");
+};
+this._dragoverHandler = (e) => {
+if (this.disabled)
+return;
+e.preventDefault();
+e.stopPropagation();
+if (!this._isDragging) {
+this._isDragging = true;
+dropZone.classList.add("drag-active");
+}
+};
+this._dragleaveHandler = (e) => {
+if (!dropZone.contains(e.relatedTarget)) {
+this._isDragging = false;
+dropZone.classList.remove("drag-active");
+}
+};
+this._dropHandler = (e) => {
+if (this.disabled)
+return;
+e.preventDefault();
+e.stopPropagation();
+this._isDragging = false;
+dropZone.classList.remove("drag-active");
+const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => this.matchesAccept(f));
+if (files.length > 0)
+this.setFiles(files);
+};
+this._inputChangeHandler = (e) => {
+const input = e.target;
+if (input.files && input.files.length > 0) {
+this.setFiles(Array.from(input.files));
+}
+};
+dropZone.addEventListener("click", this._dropZoneClickHandler);
+dropZone.addEventListener("keydown", this._dropZoneKeydownHandler);
+dropZone.addEventListener("focus", this._dropZoneFocusHandler);
+dropZone.addEventListener("blur", this._dropZoneBlurHandler);
+dropZone.addEventListener("dragover", this._dragoverHandler);
+dropZone.addEventListener("dragleave", this._dragleaveHandler);
+dropZone.addEventListener("drop", this._dropHandler);
+fileInput.addEventListener("change", this._inputChangeHandler);
+this._listenersSetup = true;
+}
+removeEventListeners() {
+if (!this._listenersSetup)
+return;
+const shadow = this.shadowRoot;
+if (!shadow)
+return;
+const dropZone = shadow.querySelector(".drop-zone");
+const fileInput = shadow.querySelector(".file-input");
+if (!dropZone || !fileInput)
+return;
+if (this._dropZoneClickHandler)
+dropZone.removeEventListener("click", this._dropZoneClickHandler);
+if (this._dropZoneKeydownHandler)
+dropZone.removeEventListener("keydown", this._dropZoneKeydownHandler);
+if (this._dropZoneFocusHandler)
+dropZone.removeEventListener("focus", this._dropZoneFocusHandler);
+if (this._dropZoneBlurHandler)
+dropZone.removeEventListener("blur", this._dropZoneBlurHandler);
+if (this._dragoverHandler)
+dropZone.removeEventListener("dragover", this._dragoverHandler);
+if (this._dragleaveHandler)
+dropZone.removeEventListener("dragleave", this._dragleaveHandler);
+if (this._dropHandler)
+dropZone.removeEventListener("drop", this._dropHandler);
+if (this._inputChangeHandler)
+fileInput.removeEventListener("change", this._inputChangeHandler);
+this._listenersSetup = false;
+}
+buildDropZoneClasses() {
+const classes = ["drop-zone"];
+if (this._isDragging)
+classes.push("drag-active");
+if (this._files.length > 0)
+classes.push("has-files");
+if (this.disabled)
+classes.push("disabled");
+if (this.error)
+classes.push("error");
+return classes.join(" ");
+}
+renderFileList(fileList) {
+fileList.innerHTML = "";
+for (let i = 0; i < this._files.length; i++) {
+const file = this._files[i];
+const item = document.createElement("div");
+item.className = "file-item";
+const icon = document.createElement("span");
+icon.className = "file-icon";
+icon.innerHTML = FILE_ICON;
+const name = document.createElement("span");
+name.className = "file-name";
+name.textContent = file.name;
+name.title = file.name;
+const size = document.createElement("span");
+size.className = "file-size";
+size.textContent = formatBytes(file.size);
+const removeBtn = document.createElement("button");
+removeBtn.className = "file-remove";
+removeBtn.type = "button";
+removeBtn.innerHTML = X_ICON;
+removeBtn.setAttribute("aria-label", `Remove ${file.name}`);
+const capturedIndex = i;
+removeBtn.addEventListener("click", (e) => {
+e.stopPropagation();
+this.removeFile(capturedIndex);
+});
+item.appendChild(icon);
+item.appendChild(name);
+item.appendChild(size);
+item.appendChild(removeBtn);
+fileList.appendChild(item);
+}
+}
+render() {
+const shadow = this.shadowRoot;
+let container = shadow.querySelector(".file-upload-container");
+if (!container) {
+container = document.createElement("div");
+container.className = "file-upload-container";
+const labelEl = document.createElement("div");
+labelEl.className = "upload-label";
+container.appendChild(labelEl);
+const dropZone = document.createElement("div");
+dropZone.className = "drop-zone";
+dropZone.setAttribute("role", "button");
+const fileInput = document.createElement("input");
+fileInput.type = "file";
+fileInput.className = "file-input";
+fileInput.style.display = "none";
+dropZone.appendChild(fileInput);
+const uploadIcon = document.createElement("div");
+uploadIcon.className = "upload-icon";
+uploadIcon.innerHTML = UPLOAD_ICON;
+dropZone.appendChild(uploadIcon);
+const hintEl = document.createElement("div");
+hintEl.className = "upload-hint";
+dropZone.appendChild(hintEl);
+const subHintEl = document.createElement("div");
+subHintEl.className = "upload-sub-hint";
+dropZone.appendChild(subHintEl);
+container.appendChild(dropZone);
+const fileList = document.createElement("div");
+fileList.className = "file-list";
+container.appendChild(fileList);
+const errorEl = document.createElement("div");
+errorEl.className = "error-message";
+container.appendChild(errorEl);
+shadow.appendChild(container);
+this.setupEventListeners();
+}
+const labelEl = container.querySelector(".upload-label");
+if (this.label) {
+labelEl.style.display = "";
+labelEl.innerHTML = "";
+labelEl.appendChild(document.createTextNode(this.label));
+if (this.required) {
+const req = document.createElement("span");
+req.className = "required-icon";
+req.textContent = "*";
+req.setAttribute("aria-hidden", "true");
+labelEl.appendChild(req);
+}
+}
+else {
+labelEl.style.display = "none";
+}
+const dropZone = container.querySelector(".drop-zone");
+dropZone.className = this.buildDropZoneClasses();
+dropZone.tabIndex = this.disabled ? -1 : 0;
+dropZone.setAttribute("aria-disabled", String(this.disabled));
+dropZone.setAttribute("aria-label", this.placeholder || "Upload files");
+const fileInput = container.querySelector(".file-input");
+fileInput.multiple = this.multiple;
+fileInput.accept = this.accept;
+fileInput.disabled = this.disabled;
+const uploadIcon = container.querySelector(".upload-icon");
+uploadIcon.style.display = this._files.length > 0 ? "none" : "";
+const hintEl = container.querySelector(".upload-hint");
+if (this._files.length > 0) {
+hintEl.innerHTML = `<strong>${this._files.length} file${this._files.length !== 1 ? "s" : ""} selected</strong>`;
+}
+else {
+hintEl.innerHTML = `Drop files here or <span class="browse-link">click to browse</span>`;
+}
+const subHintEl = container.querySelector(".upload-sub-hint");
+if (this.accept && this._files.length === 0) {
+subHintEl.textContent = `Accepted: ${this.accept}`;
+subHintEl.style.display = "";
+}
+else {
+subHintEl.style.display = "none";
+}
+const fileList = container.querySelector(".file-list");
+this.renderFileList(fileList);
+const errorEl = container.querySelector(".error-message");
+errorEl.textContent = this.error;
+errorEl.style.display = this.error ? "" : "none";
+}
 }
 TyFileUpload.formAssociated = true;
 TyFileUpload.properties = {
-    multiple: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    accept: {
-        type: "string",
-        visual: true,
-        default: "",
-    },
-    name: {
-        type: "string",
-        default: "",
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    required: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    label: {
-        type: "string",
-        visual: true,
-        default: "",
-    },
-    placeholder: {
-        type: "string",
-        visual: true,
-        default: "Drop files here or click to browse",
-    },
-    error: {
-        type: "string",
-        visual: true,
-        default: "",
-    },
+multiple: {
+type: "boolean",
+visual: true,
+default: false,
+},
+accept: {
+type: "string",
+visual: true,
+default: "",
+},
+name: {
+type: "string",
+default: "",
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+required: {
+type: "boolean",
+visual: true,
+default: false,
+},
+label: {
+type: "string",
+visual: true,
+default: "",
+},
+placeholder: {
+type: "string",
+visual: true,
+default: "Drop files here or click to browse",
+},
+error: {
+type: "string",
+visual: true,
+default: "",
+},
 };
 if (!customElements.get("ty-file-upload")) {
-    customElements.define("ty-file-upload", TyFileUpload);
+customElements.define("ty-file-upload", TyFileUpload);
 }
-//# sourceMappingURL=file-upload.js.map