@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-file-upload/dropi-file-upload.js

@@ -0,0 +1,516 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-file-upload
+ * Componente de carga de archivos con zona de drop, lista de archivos,
+ * vista card y grid. API idéntica al componente Angular del core.
+ */
+export class DropiFileUpload {
+    /** Título mostrado arriba del componente */
+    title = '';
+    /** Subtítulo informativo */
+    label = '';
+    /** Texto dentro de la zona de drop */
+    textDropZone = 'Arrastra o sube una imagen aquí';
+    /** Texto del botón de selección */
+    textButton = 'Seleccionar Imagen';
+    /** Tipo de preview: card (lista) o grid (miniaturas) */
+    previewType = 'card';
+    /** Permitir múltiples archivos */
+    multiple = false;
+    /** Límite de archivos */
+    maxFiles = 1;
+    /** Tamaño máximo por archivo en MB */
+    maxFileSizeMB = 10;
+    /** Tipos aceptados (ej: "image/*,application/pdf") */
+    accept = '';
+    /** Solo vista — sin eliminar */
+    onlyView = false;
+    /** Mostrar drop-zone cuando ya hay archivos (modo grid) */
+    viewDragAndDrop = false;
+    /** Tamaño del drop zone */
+    dragAndDropSize = 'default';
+    selectedFiles = [];
+    error = false;
+    errorMessage = '';
+    dragging = false;
+    /** Emite los File[] cada vez que cambia la selección (el host maneja la subida) */
+    uploadedUrlsChange;
+    inputRef;
+    dragCounter = 0;
+    // ─── helpers ──────────────────────────────────────────────────────────────
+    generateId(file) {
+        if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+            return `${file.name}-${crypto.randomUUID()}`;
+        }
+        return `${file.name}-${Date.now()}-${Math.floor(Math.random() * 1_000_000)}`;
+    }
+    getFileType(file) {
+        return file.type.startsWith('image/') ? 'image' : 'document';
+    }
+    getTypeView(file) {
+        return file.type.startsWith('image/') && this.previewType === 'grid' ? 'grid' : 'card';
+    }
+    getFileTypeClass(item) {
+        if (!item.file)
+            return 'generic';
+        const t = item.file.type;
+        if (t.includes('pdf'))
+            return 'pdf';
+        if (t.startsWith('image/'))
+            return 'image';
+        return 'generic';
+    }
+    isDropZoneHidden() {
+        return this.previewType === 'grid' && (!this.viewDragAndDrop || this.selectedFiles.length > 0);
+    }
+    generatePreviewUrl(file) {
+        return new Promise((resolve) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = () => resolve('');
+        });
+    }
+    syncFileItem(id, changes) {
+        const idx = this.selectedFiles.findIndex(f => f.id === id);
+        if (idx === -1)
+            return;
+        const updated = { ...this.selectedFiles[idx], ...changes };
+        this.selectedFiles = [
+            ...this.selectedFiles.slice(0, idx),
+            updated,
+            ...this.selectedFiles.slice(idx + 1),
+        ];
+    }
+    emitFiles() {
+        const files = this.selectedFiles
+            .filter(f => f.state === 'complete' && f.file)
+            .map(f => f.file);
+        this.uploadedUrlsChange.emit(files);
+    }
+    // ─── file handling ────────────────────────────────────────────────────────
+    async handleFiles(files) {
+        this.error = false;
+        if (files.length + this.selectedFiles.length > this.maxFiles) {
+            this.error = true;
+            this.errorMessage = `Máximo ${this.maxFiles} archivo(s) permitido(s)`;
+            return;
+        }
+        for (const file of files) {
+            if (file.size > this.maxFileSizeMB * 1024 * 1024) {
+                this.error = true;
+                this.errorMessage = `"${file.name}" supera el tamaño máximo de ${this.maxFileSizeMB}MB`;
+                continue;
+            }
+            const item = {
+                id: this.generateId(file),
+                file,
+                progress: 0,
+                state: 'uploading',
+                fileType: this.getFileType(file),
+                typeView: this.getTypeView(file),
+            };
+            this.selectedFiles = [...this.selectedFiles, item];
+            // Simulate progress then complete (host handles actual upload)
+            this.simulateProgress(item.id);
+            if (item.fileType === 'image') {
+                const url = await this.generatePreviewUrl(file);
+                this.syncFileItem(item.id, { previewUrl: url });
+            }
+        }
+    }
+    simulateProgress(id) {
+        let prog = 0;
+        const interval = setInterval(() => {
+            prog += Math.floor(Math.random() * 20) + 10;
+            if (prog >= 100) {
+                prog = 100;
+                clearInterval(interval);
+                this.syncFileItem(id, { progress: 100, state: 'complete' });
+                this.emitFiles();
+            }
+            else {
+                this.syncFileItem(id, { progress: prog });
+            }
+        }, 150);
+    }
+    handleFileAction(item, type) {
+        if (item.state === 'error') {
+            this.selectedFiles = this.selectedFiles.filter(f => f.id !== item.id);
+            this.emitFiles();
+            return;
+        }
+        switch (type) {
+            case 'delete':
+                this.syncFileItem(item.id, { state: 'confirm-delete' });
+                break;
+            case 'confirm-delete':
+                this.syncFileItem(item.id, { state: 'deleting' });
+                setTimeout(() => {
+                    this.selectedFiles = this.selectedFiles.filter(f => f.id !== item.id);
+                    this.emitFiles();
+                }, 400);
+                break;
+            case 'cancel-delete':
+                this.syncFileItem(item.id, { state: 'complete' });
+                break;
+        }
+    }
+    // ─── DOM events ───────────────────────────────────────────────────────────
+    onDragOver(e) {
+        e.preventDefault();
+        this.dragging = true;
+    }
+    onDragEnter(e) {
+        e.preventDefault();
+        this.dragCounter++;
+        this.dragging = true;
+    }
+    onDragLeave() {
+        this.dragCounter--;
+        if (this.dragCounter <= 0) {
+            this.dragCounter = 0;
+            this.dragging = false;
+        }
+    }
+    onDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        this.dragCounter = 0;
+        const files = Array.from(e.dataTransfer?.files ?? []);
+        if (files.length)
+            this.handleFiles(files);
+    }
+    onInputChange(e) {
+        const input = e.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (files.length)
+            this.handleFiles(files);
+    }
+    openFilePicker() {
+        this.inputRef?.click();
+    }
+    addImage() {
+        this.inputRef?.click();
+    }
+    // ─── render helpers ───────────────────────────────────────────────────────
+    renderCheckSvg() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("g", { "clip-path": "url(#ck)" }, h("path", { d: "M11.1594 2.2155L4.24992 9.1245C4.20347 9.17114 4.14826 9.20815 4.08747 9.2334C4.02668 9.25865 3.9615 9.27165 3.89567 9.27165C3.82985 9.27165 3.76467 9.25865 3.70388 9.2334C3.64308 9.20815 3.58788 9.17114 3.54142 9.1245L0.869423 6.45C0.822969 6.40337 0.767762 6.36636 0.70697 6.34111C0.646179 6.31586 0.581 6.30286 0.515173 6.30286C0.449346 6.30286 0.384167 6.31586 0.323376 6.34111C0.262585 6.36636 0.207378 6.40337 0.160923 6.45C0.114285 6.49646 0.0772787 6.55167 0.0520278 6.61246C0.026777 6.67325 0.0137787 6.73843 0.0137787 6.80425C0.0137787 6.87008 0.026777 6.93526 0.0520278 6.99605C0.0772787 7.05684 0.114285 7.11205 0.160923 7.1585L2.83392 9.831C3.1159 10.1125 3.49802 10.2705 3.89642 10.2705C4.29482 10.2705 4.67695 10.1125 4.95892 9.831L11.8679 2.9235C11.9145 2.87706 11.9514 2.82188 11.9766 2.76114C12.0018 2.70039 12.0148 2.63527 12.0148 2.5695C12.0148 2.50374 12.0018 2.43862 11.9766 2.37787C11.9514 2.31713 11.9145 2.26195 11.8679 2.2155C11.8215 2.16887 11.7663 2.13186 11.7055 2.10661C11.6447 2.08136 11.5795 2.06836 11.5137 2.06836C11.4478 2.06836 11.3827 2.08136 11.3219 2.10661C11.2611 2.13186 11.2059 2.16887 11.1594 2.2155Z", fill: "#0ABB87" })), h("defs", null, h("clipPath", { id: "ck" }, h("rect", { width: "12", height: "12", fill: "white" })))));
+    }
+    renderTrashSvg() {
+        return (h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16.25 4.44453H14.0972C13.936 3.66078 13.5096 2.95657 12.8897 2.45058C12.2699 1.94459 11.4946 1.66776 10.6944 1.66675H9.30554C8.5054 1.66776 7.73007 1.94459 7.11023 2.45058C6.49039 2.95657 6.06394 3.66078 5.90276 4.44453H3.74999C3.56581 4.44453 3.38917 4.51769 3.25894 4.64792C3.12871 4.77816 3.05554 4.95479 3.05554 5.13897C3.05554 5.32315 3.12871 5.49978 3.25894 5.63002C3.38917 5.76025 3.56581 5.83341 3.74999 5.83341H4.44443V14.8612C4.44553 15.7817 4.81171 16.6643 5.46264 17.3152C6.11357 17.9661 6.9961 18.3323 7.91665 18.3334H12.0833C13.0039 18.3323 13.8864 17.9661 14.5373 17.3152C15.1883 16.6643 15.5544 15.7817 15.5555 14.8612V5.83341H16.25C16.4342 5.83341 16.6108 5.76025 16.741 5.63002C16.8713 5.49978 16.9444 5.32315 16.9444 5.13897C16.9444 4.95479 16.8713 4.77816 16.741 4.64792C16.6108 4.51769 16.4342 4.44453 16.25 4.44453ZM9.30554 3.05564H10.6944C11.1252 3.05616 11.5452 3.18993 11.8969 3.43858C12.2487 3.68724 12.5149 4.03862 12.659 4.44453H7.34096C7.48511 4.03862 7.75131 3.68724 8.10303 3.43858C8.45476 3.18993 8.8748 3.05616 9.30554 3.05564ZM14.1667 14.8612C14.1667 15.4137 13.9472 15.9436 13.5565 16.3343C13.1658 16.725 12.6359 16.9445 12.0833 16.9445H7.91665C7.36412 16.9445 6.83421 16.725 6.44351 16.3343C6.05281 15.9436 5.83332 15.4137 5.83332 14.8612V5.83341H14.1667V14.8612Z", fill: "#DE6061" }), h("path", { d: "M8.61115 14.1663C8.79533 14.1663 8.97197 14.0931 9.1022 13.9629C9.23243 13.8327 9.3056 13.656 9.3056 13.4719V9.30521C9.3056 9.12103 9.23243 8.94439 9.1022 8.81416C8.97197 8.68393 8.79533 8.61076 8.61115 8.61076C8.42698 8.61076 8.25034 8.68393 8.12011 8.81416C7.98988 8.94439 7.91671 9.12103 7.91671 9.30521V13.4719C7.91671 13.656 7.98988 13.8327 8.12011 13.9629C8.25034 14.0931 8.42698 14.1663 8.61115 14.1663Z", fill: "#DE6061" }), h("path", { d: "M11.3888 14.1663C11.573 14.1663 11.7497 14.0931 11.8799 13.9629C12.0101 13.8327 12.0833 13.656 12.0833 13.4719V9.30521C12.0833 9.12103 12.0101 8.94439 11.8799 8.81416C11.7497 8.68393 11.573 8.61076 11.3888 8.61076C11.2047 8.61076 11.028 8.68393 10.8978 8.81416C10.7676 8.94439 10.6944 9.12103 10.6944 9.30521V13.4719C10.6944 13.656 10.7676 13.8327 10.8978 13.9629C11.028 14.0931 11.2047 14.1663 11.3888 14.1663Z", fill: "#DE6061" })));
+    }
+    renderTrashGridSvg() {
+        return (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z", fill: "white" }), h("path", { d: "M8 0.5H24C28.1421 0.5 31.5 3.85786 31.5 8V24C31.5 28.1421 28.1421 31.5 24 31.5H8C3.85786 31.5 0.5 28.1421 0.5 24V8C0.5 3.85786 3.85786 0.5 8 0.5Z", stroke: "#F7F8FA" }), h("path", { d: "M22.25 10.4445H20.0972C19.936 9.66072 19.5096 8.95651 18.8897 8.45052C18.2699 7.94453 17.4945 7.6677 16.6944 7.66669H15.3055C14.5054 7.6677 13.73 7.94453 13.1102 8.45052C12.4904 8.95651 12.0639 9.66072 11.9027 10.4445H9.74996C9.56578 10.4445 9.38914 10.5176 9.25891 10.6479C9.12868 10.7781 9.05551 10.9547 9.05551 11.1389C9.05551 11.3231 9.12868 11.4997 9.25891 11.63C9.38914 11.7602 9.56578 11.8334 9.74996 11.8334H10.4444V20.8611C10.4455 21.7817 10.8117 22.6642 11.4626 23.3151C12.1135 23.9661 12.9961 24.3323 13.9166 24.3334H18.0833C19.0038 24.3323 19.8864 23.9661 20.5373 23.3151C21.1882 22.6642 21.5544 21.7817 21.5555 20.8611V11.8334H22.25C22.4341 11.8334 22.6108 11.7602 22.741 11.63C22.8712 11.4997 22.9444 11.3231 22.9444 11.1389C22.9444 10.9547 22.8712 10.7781 22.741 10.6479C22.6108 10.5176 22.4341 10.4445 22.25 10.4445ZM15.3055 9.05558H16.6944C17.1251 9.0561 17.5452 9.18986 17.8969 9.43852C18.2486 9.68718 18.5148 10.0386 18.659 10.4445H13.3409C13.4851 10.0386 13.7513 9.68718 14.103 9.43852C14.4547 9.18986 14.8748 9.0561 15.3055 9.05558ZM20.1666 20.8611C20.1666 21.4137 19.9471 21.9436 19.5564 22.3343C19.1657 22.725 18.6358 22.9445 18.0833 22.9445H13.9166C13.3641 22.9445 12.8342 22.725 12.4435 22.3343C12.0528 21.9436 11.8333 21.4137 11.8333 20.8611V11.8334H20.1666V20.8611Z", fill: "#DE6061" }), h("path", { d: "M14.6111 20.1662C14.7953 20.1662 14.9719 20.0931 15.1022 19.9628C15.2324 19.8326 15.3056 19.656 15.3056 19.4718V15.3051C15.3056 15.121 15.2324 14.9443 15.1022 14.8141C14.9719 14.6839 14.7953 14.6107 14.6111 14.6107C14.4269 14.6107 14.2503 14.6839 14.1201 14.8141C13.9898 14.9443 13.9167 15.121 13.9167 15.3051V19.4718C13.9167 19.656 13.9898 19.8326 14.1201 19.9628C14.2503 20.0931 14.4269 20.1662 14.6111 20.1662Z", fill: "#DE6061" }), h("path", { d: "M17.3888 20.1662C17.573 20.1662 17.7496 20.0931 17.8799 19.9628C18.0101 19.8326 18.0833 19.656 18.0833 19.4718V15.3051C18.0833 15.121 18.0101 14.9443 17.8799 14.8141C17.7496 14.6839 17.573 14.6107 17.3888 14.6107C17.2046 14.6107 17.028 14.6839 16.8978 14.8141C16.7675 14.9443 16.6944 15.121 16.6944 15.3051V19.4718C16.6944 19.656 16.7675 19.8326 16.8978 19.9628C17.028 20.0931 17.2046 20.1662 17.3888 20.1662Z", fill: "#DE6061" })));
+    }
+    renderPdfSvg() {
+        return (h("svg", { class: "icon-pdf", width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z", fill: "#FEF0F0" }), h("g", { "clip-path": "url(#pdf)" }, h("path", { d: "M24.1252 11.1167L21.2168 8.20833C20.1168 7.10833 18.6502 6.5 17.0918 6.5H13.3335C11.0335 6.5 9.16684 8.36667 9.16684 10.6667V22.3333C9.16684 24.6333 11.0335 26.5 13.3335 26.5H21.6668C23.9668 26.5 25.8335 24.6333 25.8335 22.3333V15.2417C25.8335 13.6833 25.2252 12.2167 24.1252 11.1167Z", fill: "#DE6061" })), h("defs", null, h("clipPath", { id: "pdf" }, h("rect", { width: "20", height: "20", fill: "white", transform: "translate(7.5 6.5)" })))));
+    }
+    renderDocSvg() {
+        return (h("svg", { class: "icon-default", width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V26C34 30.4183 30.4183 34 26 34H8C3.58172 34 0 30.4183 0 26V8Z", fill: "#EEF6FE" }), h("g", { "clip-path": "url(#doc)" }, h("path", { d: "M21.1668 18.6667C21.1668 18.8877 21.079 19.0997 20.9227 19.2559C20.7664 19.4122 20.5545 19.5 20.3335 19.5H13.6668C13.4458 19.5 13.2338 19.4122 13.0775 19.2559C12.9213 19.0997 12.8335 18.8877 12.8335 18.6667C12.8335 18.4457 12.9213 18.2337 13.0775 18.0774C13.2338 17.9211 13.4458 17.8334 13.6668 17.8334H20.3335C20.5545 17.8334 20.7664 17.9211 20.9227 18.0774C21.079 18.2337 21.1668 18.4457 21.1668 18.6667ZM17.8335 21.1667H13.6668C13.4458 21.1667 13.2338 21.2545 13.0775 21.4108C12.9213 21.567 12.8335 21.779 12.8335 22C12.8335 22.221 12.9213 22.433 13.0775 22.5893C13.2338 22.7456 13.4458 22.8334 13.6668 22.8334H17.8335C18.0545 22.8334 18.2664 22.7456 18.4227 22.5893C18.579 22.433 18.6668 22.221 18.6668 22C18.6668 21.779 18.579 21.567 18.4227 21.4108C18.2664 21.2545 18.0545 21.1667 17.8335 21.1667Z", fill: "#4996DB" })), h("defs", null, h("clipPath", { id: "doc" }, h("rect", { width: "20", height: "20", fill: "white", transform: "translate(7 7)" })))));
+    }
+    renderCardItem(item) {
+        const isImage = item.fileType === 'image' && item.previewUrl && !item.previewUrl.includes('.pdf');
+        const isPdf = item.file?.type?.includes('pdf');
+        return (h("div", { key: item.id, class: `file-card ${item.state} ${this.getFileTypeClass(item)}` }, isImage ? (h("div", { class: "preview-wrapper" }, h("img", { class: `preview ${item.state}`, src: item.previewUrl, alt: item.file?.name }), item.state === 'complete' && (h("div", { class: "overlay-icon" }, this.renderCheckSvg())))) : (h("div", { class: "file-icon" }, isPdf ? this.renderPdfSvg() : this.renderDocSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (h("div", { class: "info-container" }, h("div", { class: `file-name${item.state === 'error' ? ' error-text' : ''}` }, item.file?.name ?? item.previewUrl?.split('/').pop()), item.state === 'uploading' && (h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'error' && (h("div", { class: "error-label" }, "Error al subir el archivo")))), item.state === 'deleting' && (h("div", { class: "deleting-container" }, h("span", { class: "deleting-label" }, "Eliminando..."))), item.state !== 'confirm-delete' && item.state !== 'error' && item.state !== 'deleting' && (h("div", { class: "preview-image", onClick: () => { } }, h("dropi-icon", { name: "Eye", width: "20px", height: "20px", color: "Gray-Gray-600" }))), item.state !== 'confirm-delete' && item.state !== 'deleting' && !this.onlyView && (h("div", { class: "delete", onClick: () => this.handleFileAction(item, 'delete') }, this.renderTrashSvg())), item.state === 'confirm-delete' && (h("div", { class: "delete-confirm" }, h("span", { class: "message" }, item.previewUrl ? '¿Eliminar imagen?' : '¿Eliminar archivo?'), h("div", { class: "actions" }, h("dropi-button", { size: "small", text: "S\u00ED", onClick: () => this.handleFileAction(item, 'confirm-delete') }), h("dropi-button", { text: "No", size: "small", severity: "secondary", onClick: () => this.handleFileAction(item, 'cancel-delete') }))))));
+    }
+    renderGridItem(item) {
+        return (h("div", { key: item.id, class: `img-view ${item.state} ${this.getFileTypeClass(item)}` }, h("div", { class: "preview-wrapper" }, h("div", { class: "preview-container" }, h("img", { class: `preview ${item.state}`, src: item.previewUrl || '', alt: "preview" })), item.state === 'complete' && (h("div", { class: "overlay-icon" }, this.renderCheckSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (h("div", { class: "delete", onClick: () => this.handleFileAction(item, 'confirm-delete') }, this.renderTrashGridSvg()))), item.state === 'uploading' && (h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'deleting' && (h("div", { class: "deleting-info" }, h("span", { class: "deleting-info-label" }, "Eliminando...")))));
+    }
+    // ─── render ───────────────────────────────────────────────────────────────
+    render() {
+        const gridFiles = this.selectedFiles.filter(f => f.typeView === 'grid');
+        const cardFiles = this.selectedFiles.filter(f => f.typeView === 'card');
+        const showDropZone = this.selectedFiles.length < this.maxFiles && !this.isDropZoneHidden();
+        const isSmall = this.dragAndDropSize === 'small';
+        return (h("div", { key: '2dfd80fee893a317c26bbe8671500a5b1d15d3db', class: "upload-container" }, (this.title || this.label) && (h("div", { key: '5147abfc1b414dc999827cc0551abbaea5ae9add', class: "upload-header" }, this.title && h("div", { key: '3430b1e057fed5cb5efae23c3dca9fbcb9a0b99c', class: "text title" }, this.title), this.label && h("div", { key: 'ee771d257191f7009b90e6ee695b0a6d1bcd258c', class: "text label" }, this.label))), this.error && (h("dropi-alert", { key: '3462db9b80cf8654b9d87d4c67cbf70cd23a93c5', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (h("div", { key: '108de9cf28010626cfef7ca95c5ce94eff60f58f', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, h("div", { key: 'b50eaf3b36aa3841b4d630dfd352fb630eb7ad7d', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (h("svg", { key: '3518cedda9e7a3da9070f85e19631caf3a9366b4', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'db6d8555c1cf5355a0097153daca459e323ca7f0', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), h("g", { key: '3096ed9f9cc05868e273ebdcd6b39d06661542d3', "clip-path": "url(#up)" }, h("path", { key: '784209ce8eb7bac630880b7a88b98fa8768d2d99', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), h("path", { key: '8efd64b9a2c6638f56a2bbb9cdde79c7db982f09', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), h("defs", { key: 'b67e444800944eae04435255a107d3ab509936c1' }, h("clipPath", { key: '05f503275f267808e7f21d3fafe4c08c466dbe15', id: "up" }, h("rect", { key: '0f0451a4f11f3b49668c1a3fa39cd0a29af01fd1', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), h("div", { key: '67011562c56c0d07f57c972a3ec379d50ac48a8f', class: isSmall ? 'info size-small-upload' : 'info' }, h("div", { key: 'f10847ee073a515a8048f661e67d65dd0aff063c', class: "title" }, this.textDropZone), isSmall && (h("dropi-button", { key: 'ffd1b1f634b7d789443751adc28ae0ac470f6426', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (h("div", { key: 'db056a49e14ef084e610cfb893d89d28a2d6223e', class: "info-desc" }, this.accept && h("div", { key: '703d87d4b9d753dc9c4fc956ec5ee6b4ca75a74b', class: "description" }, "Formatos admitidos: ", this.accept), h("div", { key: 'e26564db9269d1b3f731e9c3752a9167d09eae74', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (h("dropi-button", { key: '2da2b5538f1e4ee2600c76bee718cc69c34c9515', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), h("input", { key: '2101abff84a450f18f4d0c667224a991fc828129', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (h("div", { key: 'b362e2d1ca65dd629ba4197e60299dc2efa88e42', class: "files-container" }, gridFiles.length > 0 && (h("div", { key: 'a569173a92e99250d2bed7f8756b6d023e225ea8', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (h("div", { key: '22f1c199a6418821b70d258e23a5ac584a2ca4d5', class: "add-img", onClick: () => this.addImage() }, h("div", { key: '7726070557ea65f28c3e1cb130df23b27f150393', class: "icon" }, h("svg", { key: '8b614d44498ec26b93ce3d85f7a8535d8d31d305', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '028ec6428eed1a464d061940ade23f2eaff8bf1a', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), h("div", { key: '3967629d0f6831a4b15897ad6ed144317e21681e', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (h("div", { key: '58f020b2691f64b5931cd0ebbdfcfee160c5d474', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
+    }
+    static get is() { return "dropi-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo mostrado arriba del componente"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subt\u00EDtulo informativo"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "textDropZone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto dentro de la zona de drop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-drop-zone",
+                "defaultValue": "'Arrastra o sube una imagen aqu\u00ED'"
+            },
+            "textButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del bot\u00F3n de selecci\u00F3n"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-button",
+                "defaultValue": "'Seleccionar Imagen'"
+            },
+            "previewType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'card' | 'grid'",
+                    "resolved": "\"card\" | \"grid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo de preview: card (lista) o grid (miniaturas)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-type",
+                "defaultValue": "'card'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permitir m\u00FAltiples archivos"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxFiles": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "L\u00EDmite de archivos"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-files",
+                "defaultValue": "1"
+            },
+            "maxFileSizeMB": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o m\u00E1ximo por archivo en MB"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-file-size-m-b",
+                "defaultValue": "10"
+            },
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipos aceptados (ej: \"image/*,application/pdf\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept",
+                "defaultValue": "''"
+            },
+            "onlyView": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Solo vista \u2014 sin eliminar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "only-view",
+                "defaultValue": "false"
+            },
+            "viewDragAndDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostrar drop-zone cuando ya hay archivos (modo grid)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-drag-and-drop",
+                "defaultValue": "false"
+            },
+            "dragAndDropSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del drop zone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-and-drop-size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedFiles": {},
+            "error": {},
+            "errorMessage": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uploadedUrlsChange",
+                "name": "uploadedUrlsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite los File[] cada vez que cambia la selecci\u00F3n (el host maneja la subida)"
+                },
+                "complexType": {
+                    "original": "File[]",
+                    "resolved": "File[]",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.css

@@ -0,0 +1,115 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.container-progress-bar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: var(--Size-4);
+  gap: var(--Size-3);
+  border-radius: var(--Size-2);
+  border: 1px solid var(--Gray-Gray-100);
+  background-color: var(--Neutral-White);
+  min-width: 0;
+  overflow: hidden;
+  align-items: center;
+}
+
+.container-icon-info {
+  background: var(--Info-Info-50);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--Size-2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.icon-pdf {
+  background: var(--Error-Error-50);
+  border-radius: var(--Border-2);
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.image-to-view {
+  width: 34px;
+  height: 34px;
+  border-radius: var(--Border-2);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.container-bar-title {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+
+  p {
+    margin: 0;
+    font-size: var(--font-size-s);
+    color: var(--Gray-Gray-700);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+
+progress {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 4.5px;
+  max-width: 100%;
+  display: block;
+}
+
+progress::-webkit-progress-bar {
+  background-color: var(--Gray-Gray-100);
+  border-radius: 4.5px;
+}
+
+progress::-webkit-progress-value {
+  background-color: var(--Primary-Primary-500);
+  border-radius: 4.5px;
+  transition: width 0.3s ease;
+}
+
+/* Firefox */
+progress::-moz-progress-bar {
+  background-color: var(--Primary-Primary-500);
+  border-radius: 4.5px;
+}
+
+.view-icon,
+.container-icon-trash {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 4px;
+  border-radius: var(--Border-1);
+  transition: background 0.2s;
+}
+
+.view-icon:hover,
+.container-icon-trash:hover {
+  background-color: var(--Gray-Gray-50);
+}