@dropi/ui 0.1.20 → 0.1.22

package/dist/esm/dropi-date-picker.entry.js

@@ -1,59 +1,72 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D5SAM1O2.js';
 
-const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:40px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 4px);left:0;width:280px;background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.1);z-index:300;padding:var(--Size-3, 12px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-3, 12px)}.dp-nav__btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:2px}.dp-day-header{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);text-align:center;padding:4px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-family:inherit;border:none;border-radius:var(--Border-1, 4px);cursor:pointer;background:none;color:var(--Gray-Gray-700, #32394d);transition:background 0.15s, color 0.15s}.dp-cell:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d)}.dp-cell--selected,.dp-cell--range-start,.dp-cell--range-end{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);border-radius:var(--Border-1, 4px)}.dp-cell--in-range{background:var(--Primary-Primary-50, #fff5eb);border-radius:0}.dp-cell--range-start{border-radius:var(--Border-1, 4px) 0 0 var(--Border-1, 4px)}.dp-cell--range-end{border-radius:0 var(--Border-1, 4px) var(--Border-1, 4px) 0}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #eceef4);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #68738f)}.dp-footer__today{color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Primary-Primary-50, #fff5eb)}`;
+const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
 
 const MONTHS_ES = [
     'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
     'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
 ];
-const DAYS_ES = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 const DropiDatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiDateChange = createEvent(this, "dropiDateChange", 7);
+        this.onChangeDate = createEvent(this, "onChangeDate", 7);
+        this.onClosePanel = createEvent(this, "onClosePanel", 7);
         this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
     }
-    /** Selected date (ISO string, single mode) */
-    value = '';
+    /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
+    selectedDate = '';
     /** Range start date (ISO string, range mode) */
     startDate = '';
     /** Range end date (ISO string, range mode) */
     endDate = '';
-    /** Enable range selection */
-    range = false;
+    /** Enable range selection - matches Angular selectionMode */
+    selectionMode = 'single';
     /** Min selectable date (ISO string) */
     minDate = '';
     /** Max selectable date (ISO string) */
     maxDate = '';
     /** Label */
-    label = '';
+    label = null;
     /** Placeholder */
-    placeholder = 'Seleccionar fecha';
+    placeholder = 'DD/MM/YYYY';
     /** Disabled */
     disabled = false;
+    /** Is invalid state - matches Angular */
+    isInvalid = false;
+    /** Loading state - matches Angular */
+    loading = false;
     open = false;
     viewYear = new Date().getFullYear();
     viewMonth = new Date().getMonth();
     hoverDate = '';
-    /** Emitted when single date selected. e.detail = ISO date */
-    dropiDateChange;
-    /** Emitted when range selected. e.detail = { start, end } */
+    get el() { return getElement(this); }
+    handleDocClick(e) {
+        if (this.open && !e.composedPath().includes(this.el)) {
+            this.open = false;
+        }
+    }
+    /** Emitted when date selected — matches Angular 'onChangeDate' */
+    onChangeDate;
+    /** Emitted when panel closes — matches Angular 'onClosePanel' */
+    onClosePanel;
+    /** Emitted when range selected */
     dropiRangeChange;
     get displayValue() {
-        if (this.range) {
+        if (this.selectionMode === 'range') {
             if (this.startDate && this.endDate)
                 return `${this.startDate} – ${this.endDate}`;
             if (this.startDate)
                 return this.startDate;
             return '';
         }
-        return this.value;
+        return this.selectedDate;
     }
     open_() {
         if (this.disabled)
             return;
-        if (this.value) {
-            const d = new Date(this.value);
+        if (this.selectedDate) {
+            const d = new Date(this.selectedDate);
             this.viewYear = d.getFullYear();
             this.viewMonth = d.getMonth();
         }
@@ -91,7 +104,7 @@ const DropiDatePicker = class {
         return false;
     }
     isInRange(iso) {
-        if (!this.range)
+        if (this.selectionMode !== 'range')
             return false;
         const start = this.startDate;
         const end = this.endDate || this.hoverDate;
@@ -103,10 +116,10 @@ const DropiDatePicker = class {
     selectDate(iso) {
         if (this.isDisabled(iso))
             return;
-        if (!this.range) {
-            this.value = iso;
+        if (this.selectionMode !== 'range') {
+            this.selectedDate = iso;
             this.open = false;
-            this.dropiDateChange.emit(iso);
+            this.onChangeDate.emit(iso);
             return;
         }
         // Range mode
@@ -130,8 +143,8 @@ const DropiDatePicker = class {
         const year = this.viewYear;
         const month = this.viewMonth;
         const firstDay = new Date(year, month, 1).getDay();
-        // Adjust to Monday-first
-        const startOffset = (firstDay + 6) % 7;
+        // Adjust to Sunday-first
+        const startOffset = firstDay;
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
         const cells = [];
@@ -158,12 +171,17 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: 'ee619ad7d2528fa29f74cd9e149a9a4f8250c1b5', class: "dp-wrap" }, this.label && h("label", { key: 'faffc20912e7e27cf27f6b8895050df117f2fcd9', class: "dp-label" }, this.label), h("button", { key: '6249c8e76c7b19bd54bedb3f2e98342b45eb9444', class: { 'dp-trigger': true, 'dp-trigger--disabled': this.disabled }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled, type: "button" }, h("dropi-icon", { key: '3033520703a6c58fb30d8231196a206e1f2a153c', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'c426b0a12c17108d4f32d2d01732bfc13ec15b26', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '218703644316e36b4a2bece89975db723eaa0bfa', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4ca8fa76344e960a42e4aec332e6ecdabab3bc6c', class: "dp-popup" }, h("div", { key: '04b2b43eb0b209127a31adb2d0721b70449e84ab', class: "dp-nav" }, h("button", { key: '4f7e1208d4a6b2e03f30730fb38306f4aaf365af', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '307a5dcbd86c26f13a22e0d69a8f61b7a646378b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '1c094b7fb9385cc7673a2dd3038eebdc11a247c7', class: "dp-nav__title" }, MONTHS_ES[this.viewMonth], " ", this.viewYear), h("button", { key: '70c629dc1f1229fffcceec2f01ed8acc72bf1794', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'ab1847f3771ccc80c9257a82f31ed7cd2cb0dd0a', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '92ff7685583877bed3a63ea74c92fd4581b9a777', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
-            const isSelected = !this.range
-                ? iso === this.value
+        return (h("div", { key: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && h("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), h("button", { key: '2fa9b1f3d2c9bfc4876724492a265ff0b29f8d23', class: {
+                'dp-trigger': true,
+                'dp-trigger--disabled': this.disabled,
+                'dp-trigger--invalid': this.isInvalid,
+                'dp-trigger--loading': this.loading
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, h("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, h("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, h("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), h("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), h("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            const isSelected = this.selectionMode !== 'range'
+                ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
-            const isRangeStart = this.range && iso === this.startDate;
-            const isRangeEnd = this.range && iso === this.endDate;
+            const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;
+            const isRangeEnd = this.selectionMode === 'range' && iso === this.endDate;
             const inRange = this.isInRange(iso);
             const disabled = this.isDisabled(iso);
             const isToday = iso === today;
@@ -177,19 +195,19 @@ const DropiDatePicker = class {
                     'dp-cell--in-range': inRange,
                     'dp-cell--disabled': disabled,
                 }, type: "button", disabled: disabled, onClick: () => this.selectDate(iso), onMouseEnter: () => {
-                    if (this.range && this.startDate && !this.endDate)
+                    if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), h("div", { key: '2e1a6e5e3f016b68b9486e6acadb94738671fe7f', class: "dp-footer" }, h("button", { key: 'cef6300ccd52c617426522d3977ac72829cb40cc', class: "dp-footer__clear", type: "button", onClick: () => {
-                this.value = '';
+        })), h("div", { key: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, h("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a5627d87cdc24d70368618fb8c67eff30b0800c7', class: "dp-footer__today", type: "button", onClick: () => {
-                if (!this.range) {
-                    this.value = today;
+            } }, "Limpiar"), h("button", { key: 'a08afb2358819fc8c15c7949dc7e4cbdf14b52fb', class: "dp-footer__today", type: "button", onClick: () => {
+                if (this.selectionMode !== 'range') {
+                    this.selectedDate = today;
                     this.open = false;
-                    this.dropiDateChange.emit(today);
+                    this.onChangeDate.emit(today);
                 }
                 else {
                     this.startDate = today;

package/dist/esm/dropi-drawer.entry.js

@@ -1,45 +1,74 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
-const dropiDrawerCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #fff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0,0,0,0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header__title{font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}.drawer-header__close{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;border-radius:var(--Border-1, 4px);transition:background 0.15s}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px)}.drawer-footer{flex-shrink:0;padding:var(--Size-3, 12px) var(--Size-4, 16px);border-top:1px solid var(--Gray-Gray-100, #eceef4)}.drawer-footer:empty{display:none}`;
+const dropiDrawerCss = () => `:host{display:contents;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:1000;pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #ffffff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden;max-width:100%;min-width:auto}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-panel--size-m{width:550px}.drawer-panel--size-l{width:1137px}.drawer-panel--size-xl{width:1280px}.drawer-panel--size-xxl{width:1330px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header--headless{display:none}.drawer-header__title{color:var(--Gray-700, #32394d);font-family:Inter, sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:110%;margin:0}.drawer-header__close{width:var(--Size-6, 32px);height:var(--Size-6, 32px);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Gray-400, #858ea6);border-radius:var(--Border-1, 4px);transition:background 0.15s;flex-shrink:0}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px);display:flex;flex-direction:column}.drawer-footer{display:none}`;
 
 const DropiDrawer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiClose = createEvent(this, "dropiClose", 7);
     }
+    drawerTitle = '';
+    /** Controls visibility (alias of open for Angular parity) */
+    drawerIsOpen = false;
     /** Controls visibility */
     open = false;
     /** Side from which the drawer slides in */
     position = 'right';
-    /** Drawer title */
-    drawerTitle = '';
-    /** Width (for left/right drawers) */
+    /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */
+    size = '';
+    /** Custom width for left/right drawers (used when size is not set) */
     width = '400px';
-    /** Height (for top/bottom drawers) */
+    /** Custom height for top/bottom drawers */
     height = '50vh';
+    /** Hide the header (headless mode) */
+    headless = false;
     /** Close on backdrop click */
     closeOnBackdrop = true;
     /** Emitted when drawer closes */
     dropiClose;
     openChanged(val) {
+        this.open = val;
+        this.drawerIsOpen = val;
         if (typeof document !== 'undefined') {
-            document.body.style.overflow = val ? 'hidden' : '';
+            if (val)
+                document.body.classList.add('dropi-modal-open');
+            else
+                document.body.classList.remove('dropi-modal-open');
         }
     }
+    componentWillLoad() {
+        if (this.drawerIsOpen)
+            this.open = true;
+        if (this.open)
+            this.drawerIsOpen = true;
+    }
     close() {
         this.open = false;
         this.dropiClose.emit();
     }
     render() {
         const isHorizontal = this.position === 'left' || this.position === 'right';
-        return (h("div", { key: '49b9f893c2c05018301b67234142d4ad2e38a511', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '4a2263c0ffe74bdb53e1ff4992d3b04f39a55856', class: "drawer-backdrop", onClick: () => {
+        // Clase de tamaño según prop size
+        const sizeClass = this.size ? `drawer-panel--size-${this.size}` : '';
+        // Estilo inline solo cuando no hay size preset
+        const panelStyle = {};
+        if (!this.size) {
+            if (isHorizontal)
+                panelStyle['width'] = this.width;
+            else
+                panelStyle['height'] = this.height;
+        }
+        return (h("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), h("div", { key: 'd2cf49005f3b8a970361fdd725d9903b212abd37', class: `drawer-panel drawer-panel--${this.position}`, style: isHorizontal ? { width: this.width } : { height: this.height }, role: "dialog", "aria-modal": "true" }, h("div", { key: '4f04806b747df0e079e01a27ba307f1625679a08', class: "drawer-header" }, h("span", { key: '211b77262547ac3b45e97966e6cc6b18dbf92b39', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '1a18631b15de75687cab1e21869c8948461716d7', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '94c49ce2bc26e65be60d0bb7fb0d05c3e4d260e6', name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))), h("div", { key: '900cafee62e4dd5b4e6dd89aec680bd19bb44bd8', class: "drawer-body" }, h("slot", { key: 'ef7d81f315b0aaea94bd68048d133a8026685a66' })), h("div", { key: 'd4e6058b84c1fe015b66c540bb1951666bafb35e', class: "drawer-footer" }, h("slot", { key: 'e66380715a41bc41310ff4b3241e868c5e2609b1', name: "footer" })))));
+            } }), h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{
                 "openChanged": 0
+            }],
+        "drawerIsOpen": [{
+                "openChanged": 0
             }]
     }; }
 };

package/dist/esm/dropi-dropdown.entry.js

@@ -1,24 +1,30 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
-const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 
 const DropiDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.modelChange = createEvent(this, "modelChange", 7);
     }
     /** Options array or JSON string */
     options = [];
-    /** Property name to display as the option label */
+    /** Property name for the label */
     valueModel = 'name';
-    /** Property name to use as the option image/avatar URL */
-    imageModel = '';
-    /** Max height of the list container (CSS value) */
-    height = '300px';
+    /** Height of the dropdown (CSS value) */
+    height = '';
+    /** Whether the dropdown is inside a select component */
+    isInSelect = false;
+    /** Configuration parameters for the dropdown items */
+    parameters = {
+        type: 'checkbox',
+        icon: '',
+        iconCurrier: false,
+    };
     selected = [];
     parsedOptions = [];
-    /** Emitted when selection changes. e.detail = selected items array */
-    dropiChange;
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -26,7 +32,7 @@ const DropiDropdown = class {
         this.optionsChanged(this.options);
     }
     isSelected(opt) {
-        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+        return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));
     }
     toggleOption(opt) {
         if (this.isSelected(opt)) {
@@ -35,14 +41,15 @@ const DropiDropdown = class {
         else {
             this.selected = [...this.selected, opt];
         }
-        this.dropiChange.emit(this.selected);
+        this.modelChange.emit(this.selected);
     }
     render() {
-        return (h("div", { key: '7c8505a82b836b58ea73603249ed2143b0692fc2', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+        const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
+        const customHeight = this.height || '388px';
+        return (h("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
-            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
-            const active = this.isSelected(opt);
-            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+            const active = !!opt.checked || this.isSelected(opt);
+            return (h("div", { class: "content-dropdown", key: i }, h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (h("dropi-checkbox", { checked: active })), this.parameters.iconCurrier && (h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (h("dropi-avatars", { image: opt.image, type: "transport" })), h("span", { class: "Body-M-Regular" }, label))));
         })));
     }
     static get watchers() { return {

package/dist/esm/dropi-empty-state.entry.js

@@ -1,35 +1,32 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 
 const DropiEmptyState = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiAction = createEvent(this, "dropiAction", 7);
-        this.dropiSecondaryAction = createEvent(this, "dropiSecondaryAction", 7);
+        this.buttonClickEvent = createEvent(this, "buttonClickEvent", 7);
     }
-    /** Title text */
-    header = '';
+    /** Title text (matches Angular 'title') */
+    title = '';
     /** Description text */
     description = '';
     /** URL of the illustration image */
     imageUrl = '';
     /** Alt text for the image */
     imageAlt = 'Sin resultados';
-    /** Primary action button label (empty = hidden) */
-    actionLabel = '';
-    /** State of the illustration (default, loading, sorry, love, success, error) */
-    iconState = 'default';
-    /** Secondary action button label (empty = hidden) */
-    secondaryLabel = '';
-    /** Severity for the action buttons */
-    actionSeverity = 'tertiary';
-    /** Emitted when primary action button is clicked */
-    dropiAction;
-    /** Emitted when secondary action button is clicked */
-    dropiSecondaryAction;
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText = '';
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon = 'default';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity = 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent;
     render() {
-        return (h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.iconState}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.header && h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, h("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && h("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), h("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (h("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, h("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

package/dist/esm/dropi-favorite-button.entry.js

@@ -1,23 +1,23 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
 const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
 
 const DropiFavoriteButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiToggleFavorite = createEvent(this, "dropiToggleFavorite", 7);
+        this.toggleFavorite = createEvent(this, "toggleFavorite", 7);
     }
     /** Whether the item is currently marked as favorite */
     isFavorite = false;
     /** Emitted when toggled. e.detail = new favorite state */
-    dropiToggleFavorite;
+    toggleFavorite;
     hovered = false;
     toggle() {
         this.isFavorite = !this.isFavorite;
-        this.dropiToggleFavorite.emit(this.isFavorite);
+        this.toggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (h("button", { key: '1911efe67d8e0ab2f7531e01a844880054fdf693', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: 'be817f295f9e3e36ca86027f487781f07ae1561d', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+        return (h("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: 'fcf3cc2b3b107eb43c6a83a9d6dc6cbff7ee202f', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
     }
 };
 DropiFavoriteButton.style = dropiFavoriteButtonCss();

package/dist/esm/dropi-file-upload-progress-bar.entry.js

@@ -1,49 +1,74 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-D5SAM1O2.js';
 
-const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.upload-item--success{border-color:var(--Success-Success-200, #a7edbb)}.upload-item--error{border-color:var(--Error-Error-200, #f9b4b4)}.upload-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--Gray-Gray-50, #f7f8fa);border-radius:var(--Border-1, 4px)}.upload-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.upload-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-2, 8px)}.upload-item__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.upload-item__size{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.upload-item__bar-wrap{display:flex;align-items:center;gap:var(--Size-2, 8px)}.upload-item__bar{flex:1;height:6px;background:var(--Gray-Gray-100, #eceef4);border-radius:100px;overflow:hidden}.upload-item__bar-fill{height:100%;background:var(--Primary-Primary-500, #f49a3d);border-radius:100px;transition:width 0.3s ease}.upload-item--success .upload-item__bar-fill{background:var(--Success-Success-500, #34c55a)}.upload-item--error .upload-item__bar-fill{background:var(--Error-Error-500, #f46a6b)}.upload-item--paused .upload-item__bar-fill{background:var(--Warning-Warning-500, #f49a3d)}.upload-item__pct{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);width:32px;text-align:right;flex-shrink:0}.upload-item__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.upload-item__cancel{background:none;border:none;padding:2px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;border-radius:var(--Border-1, 4px);transition:background 0.15s}.upload-item__cancel:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiFileUploadProgressBarCss = () => `: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}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)}`;
 
 const DropiFileUploadProgressBar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiCancel = createEvent(this, "dropiCancel", 7);
+        this.deleteFile = createEvent(this, "deleteFile", 7);
+        this.uploadComplete = createEvent(this, "uploadComplete", 7);
+        this.viewFile = createEvent(this, "viewFile", 7);
     }
-    /** File name */
-    fileName = '';
-    /** File size label (e.g. "1.2 MB") */
-    fileSize = '';
+    /** File name to display */
+    textFile = 'Nombre del archivo.xlsx';
     /** Upload progress 0–100 */
     progress = 0;
-    /** Current status */
-    status = 'uploading';
-    /** Error message shown when status is "error" */
-    errorMessage = 'Error al cargar el archivo';
-    /** Show cancel/remove button */
-    showCancel = true;
-    /** Emitted when cancel/remove clicked */
-    dropiCancel;
-    get clampedProgress() {
-        return Math.min(100, Math.max(0, this.progress));
-    }
-    get iconName() {
-        switch (this.status) {
-            case 'success': return 'Check-circle';
-            case 'error': return 'Close-circle';
-            case 'paused': return 'Pause-circle';
-            default: return 'Document';
+    /** Type of file (overridden by extension detection) */
+    type = 'file';
+    /** URL for image preview if type is image */
+    urlImage = 'assets/img/LOGO-250-PX.png';
+    /** Show the eye icon for preview */
+    isPreview = true;
+    /** Disable delete action */
+    disabled = false;
+    fileExtension = '';
+    /** Emitted when the trash icon is clicked */
+    deleteFile;
+    /** Emitted when progress reaches 100 */
+    uploadComplete;
+    /** Emitted when the eye icon is clicked */
+    viewFile;
+    handleProgress(val) {
+        if (val === 100) {
+            this.uploadComplete.emit();
         }
     }
-    get iconColor() {
-        switch (this.status) {
-            case 'success': return 'Success-Success-500';
-            case 'error': return 'Error-Error-500';
-            case 'paused': return 'Warning-Warning-500';
-            default: return 'Primary-Primary-500';
+    handleTextFile(val) {
+        this.updateFileInfo(val);
+    }
+    componentWillLoad() {
+        this.updateFileInfo(this.textFile);
+        if (this.progress === 100) {
+            this.uploadComplete.emit();
         }
     }
+    updateFileInfo(fileName) {
+        const info = this.getFileExtensionInfo(fileName);
+        this.fileExtension = info.extension;
+        this.type = info.isImage ? 'image' : 'file';
+    }
+    getFileExtensionInfo(fileName) {
+        if (!fileName)
+            return { extension: '', isImage: false };
+        const lastDotIndex = fileName.lastIndexOf('.');
+        const extension = lastDotIndex > 0 ? fileName.substring(lastDotIndex + 1).toLowerCase() : '';
+        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'tiff', 'ico', 'jfif'];
+        return {
+            extension,
+            isImage: imageExtensions.includes(extension),
+        };
+    }
     render() {
-        const pct = this.clampedProgress;
-        return (h("div", { key: '1a7e98a56a7f60be4f9934f6e124ed9b78d815a2', class: `upload-item upload-item--${this.status}` }, h("div", { key: 'a3bd11ec50244ba045361e015202bf895e74ef54', class: "upload-item__icon" }, h("dropi-icon", { key: '0cbd181eb3cebab1feff8bc21748a62c66a4a38f', name: this.iconName, width: "24px", height: "24px", color: this.iconColor })), h("div", { key: 'fde507232d8105da36820a2dcd5e555ef28da37e', class: "upload-item__content" }, h("div", { key: '6d800c22fe3c659bfe39bf8b75f62668cfda6195', class: "upload-item__header" }, h("span", { key: 'cec4dc4b7c0658bf2f086742cc53caea655ef493', class: "upload-item__name" }, this.fileName), this.fileSize && h("span", { key: '9c523619ef47586b4236de2f21f9e483c6c100fc', class: "upload-item__size" }, this.fileSize)), this.status === 'error' ? (h("p", { class: "upload-item__error" }, this.errorMessage)) : (h("div", { class: "upload-item__bar-wrap" }, h("div", { class: "upload-item__bar" }, h("div", { class: "upload-item__bar-fill", style: { width: `${pct}%` } })), h("span", { class: "upload-item__pct" }, pct, "%")))), this.showCancel && (h("button", { key: '375c0fb876e6d2073ae55a96a2fe9654f399870e', class: "upload-item__cancel", onClick: () => this.dropiCancel.emit(), "aria-label": "Cancelar" }, h("dropi-icon", { key: '84dc8576cabe8846b7759411ad57fe7bab218ec2', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))));
+        return (h("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, h("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (h("dropi-icon", { key: '53bed511476369459951eac8c000129adebd6370', name: "File-text", width: "24px", height: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (h("div", { key: '4e5878dc43478af1da306ae04c829c357843a180', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (h("img", { key: 'd8c47b00b2e7a9983ca17ddf1bfb31da78bbb658', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (h("div", { key: 'befec2d335a0bc2d5a2af1b475cd19d16951ea9a', class: "icon-pdf" }, h("svg", { key: '5518e6204180b17d534358d913a625cd1ca31ed7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("g", { key: 'cd3e6e3066b22e29e07671add7dfeb4c742f4a82', "clip-path": "url(#clip0_6227_22223)" }, h("path", { key: '936061bcda6e1b2324f519f03e434928335b2609', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), h("defs", { key: 'afb99f7cd6b7481ed99aa82264c539e167cd8b90' }, h("clipPath", { key: 'bf72e59ac0aea8eb3f6c812a98a3e50618499dfd', id: "clip0_6227_22223" }, h("rect", { key: '57b7af08370d8901296ed329a5e390578b58c73e', width: "20", height: "20", fill: "white" })))))), h("div", { key: '9df97315c7594dc0b77069f12e83ed8ce358794e', class: "container-bar-title" }, h("p", { key: '5531067af3ff9e1efdffbd1aa88e7f3c21ab9c12' }, this.textFile), h("progress", { key: '0492aa89233810538784c0dda705b9dc3cdb488d', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (h("div", { key: '9fe1548c4191eb4c4250c02ef3608c01d0944059', class: "view-icon", onClick: () => this.viewFile.emit() }, h("svg", { key: '07b454b85b89af4a337a8b440c2adae74a048d0e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, h("path", { key: '1bbc9cfb792adabc41c44ce43c6f6f7b0935fcdb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), h("path", { key: 'a25b946c2a1f4c1625cb3de790f54632c0efab86', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (h("div", { key: '587a02eec937b7054d4b1cd840cf82bae8c43ccf', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, h("svg", { key: '7422db6af5abb405cc7e817f038bc5cabded6415', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, h("path", { key: 'd5d725b550ba4440727dbcb05c6fd43096620088', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), h("path", { key: '48d1dc3ba7c8f093c5ab7ee9ad5ed4307a1458e9', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), h("path", { key: '588341c2b9c640a15e6ba454bd1ba28ae52630b9', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
     }
+    static get watchers() { return {
+        "progress": [{
+                "handleProgress": 0
+            }],
+        "textFile": [{
+                "handleTextFile": 0
+            }]
+    }; }
 };
 DropiFileUploadProgressBar.style = dropiFileUploadProgressBarCss();