@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,61 +1,74 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.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) {
         index.registerInstance(this, hostRef);
-        this.dropiDateChange = index.createEvent(this, "dropiDateChange", 7);
+        this.onChangeDate = index.createEvent(this, "onChangeDate", 7);
+        this.onClosePanel = index.createEvent(this, "onClosePanel", 7);
         this.dropiRangeChange = index.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 index.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();
         }
@@ -93,7 +106,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;
@@ -105,10 +118,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
@@ -132,8 +145,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 = [];
@@ -160,12 +173,17 @@ const DropiDatePicker = class {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (index.h("div", { key: 'ee619ad7d2528fa29f74cd9e149a9a4f8250c1b5', class: "dp-wrap" }, this.label && index.h("label", { key: 'faffc20912e7e27cf27f6b8895050df117f2fcd9', class: "dp-label" }, this.label), index.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" }, index.h("dropi-icon", { key: '3033520703a6c58fb30d8231196a206e1f2a153c', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("span", { key: 'c426b0a12c17108d4f32d2d01732bfc13ec15b26', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '218703644316e36b4a2bece89975db723eaa0bfa', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: '4ca8fa76344e960a42e4aec332e6ecdabab3bc6c', class: "dp-popup" }, index.h("div", { key: '04b2b43eb0b209127a31adb2d0721b70449e84ab', class: "dp-nav" }, index.h("button", { key: '4f7e1208d4a6b2e03f30730fb38306f4aaf365af', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '307a5dcbd86c26f13a22e0d69a8f61b7a646378b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '1c094b7fb9385cc7673a2dd3038eebdc11a247c7', class: "dp-nav__title" }, MONTHS_ES[this.viewMonth], " ", this.viewYear), index.h("button", { key: '70c629dc1f1229fffcceec2f01ed8acc72bf1794', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: 'ab1847f3771ccc80c9257a82f31ed7cd2cb0dd0a', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: '92ff7685583877bed3a63ea74c92fd4581b9a777', class: "dp-grid" }, DAYS_ES.map(d => (index.h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
-            const isSelected = !this.range
-                ? iso === this.value
+        return (index.h("div", { key: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && index.h("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), index.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" }, index.h("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), index.h("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (index.h("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, index.h("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, index.h("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, index.h("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), index.h("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, index.h("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), index.h("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), index.h("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, index.h("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), index.h("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (index.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;
@@ -179,19 +197,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));
-        })), index.h("div", { key: '2e1a6e5e3f016b68b9486e6acadb94738671fe7f', class: "dp-footer" }, index.h("button", { key: 'cef6300ccd52c617426522d3977ac72829cb40cc', class: "dp-footer__clear", type: "button", onClick: () => {
-                this.value = '';
+        })), index.h("div", { key: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, index.h("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), index.h("button", { key: 'a5627d87cdc24d70368618fb8c67eff30b0800c7', class: "dp-footer__today", type: "button", onClick: () => {
-                if (!this.range) {
-                    this.value = today;
+            } }, "Limpiar"), index.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/cjs/dropi-drawer.cjs.entry.js

@@ -1,47 +1,76 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.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) {
         index.registerInstance(this, hostRef);
         this.dropiClose = index.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 (index.h("div", { key: '49b9f893c2c05018301b67234142d4ad2e38a511', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, index.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 (index.h("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, index.h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), index.h("div", { key: 'd2cf49005f3b8a970361fdd725d9903b212abd37', class: `drawer-panel drawer-panel--${this.position}`, style: isHorizontal ? { width: this.width } : { height: this.height }, role: "dialog", "aria-modal": "true" }, index.h("div", { key: '4f04806b747df0e079e01a27ba307f1625679a08', class: "drawer-header" }, index.h("span", { key: '211b77262547ac3b45e97966e6cc6b18dbf92b39', class: "drawer-header__title" }, this.drawerTitle), index.h("button", { key: '1a18631b15de75687cab1e21869c8948461716d7', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, index.h("dropi-icon", { key: '94c49ce2bc26e65be60d0bb7fb0d05c3e4d260e6', name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))), index.h("div", { key: '900cafee62e4dd5b4e6dd89aec680bd19bb44bd8', class: "drawer-body" }, index.h("slot", { key: 'ef7d81f315b0aaea94bd68048d133a8026685a66' })), index.h("div", { key: 'd4e6058b84c1fe015b66c540bb1951666bafb35e', class: "drawer-footer" }, index.h("slot", { key: 'e66380715a41bc41310ff4b3241e868c5e2609b1', name: "footer" })))));
+            } }), index.h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, index.h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, index.h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), index.h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, index.h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), index.h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, index.h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), index.h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, index.h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{
                 "openChanged": 0
+            }],
+        "drawerIsOpen": [{
+                "openChanged": 0
             }]
     }; }
 };

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

@@ -1,26 +1,32 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.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) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.modelChange = index.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 || []);
     }
@@ -28,7 +34,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)) {
@@ -37,14 +43,15 @@ const DropiDropdown = class {
         else {
             this.selected = [...this.selected, opt];
         }
-        this.dropiChange.emit(this.selected);
+        this.modelChange.emit(this.selected);
     }
     render() {
-        return (index.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 (index.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 (index.h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, index.h("dropi-checkbox", { checked: active }), imgUrl && (index.h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), index.h("span", { class: "dropdown__label" }, label)));
+            const active = !!opt.checked || this.isSelected(opt);
+            return (index.h("div", { class: "content-dropdown", key: i }, index.h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (index.h("dropi-checkbox", { checked: active })), this.parameters.iconCurrier && (index.h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (index.h("dropi-avatars", { image: opt.image, type: "transport" })), index.h("span", { class: "Body-M-Regular" }, label))));
         })));
     }
     static get watchers() { return {

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

@@ -1,37 +1,34 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.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) {
         index.registerInstance(this, hostRef);
-        this.dropiAction = index.createEvent(this, "dropiAction", 7);
-        this.dropiSecondaryAction = index.createEvent(this, "dropiSecondaryAction", 7);
+        this.buttonClickEvent = index.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 (index.h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, index.h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.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 && index.h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && index.h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), index.h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (index.h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (index.h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (index.h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
+        return (index.h("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, index.h("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.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 && index.h("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && index.h("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), index.h("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (index.h("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, index.h("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

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

@@ -1,25 +1,25 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.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) {
         index.registerInstance(this, hostRef);
-        this.dropiToggleFavorite = index.createEvent(this, "dropiToggleFavorite", 7);
+        this.toggleFavorite = index.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 (index.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) }, index.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 (index.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) }, index.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();