@dropi/ui 0.1.37 → 0.1.42

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

@@ -0,0 +1,224 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.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-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 = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
+const DropiDatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiChangeDate = createEvent(this, "dropiChangeDate", 7);
+        this.dropiClosePanel = createEvent(this, "dropiClosePanel", 7);
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+    }
+    /** 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 - matches Angular selectionMode */
+    selectionMode = 'single';
+    /** Min selectable date (ISO string) */
+    minDate = '';
+    /** Max selectable date (ISO string) */
+    maxDate = '';
+    /** Label */
+    label = null;
+    /** Placeholder */
+    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 = '';
+    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' */
+    dropiChangeDate;
+    /** Emitted when panel closes — matches Angular 'onClosePanel' */
+    dropiClosePanel;
+    /** Emitted when range selected */
+    dropiRangeChange;
+    get displayValue() {
+        if (this.selectionMode === 'range') {
+            if (this.startDate && this.endDate)
+                return `${this.startDate} – ${this.endDate}`;
+            if (this.startDate)
+                return this.startDate;
+            return '';
+        }
+        return this.selectedDate;
+    }
+    open_() {
+        if (this.disabled)
+            return;
+        if (this.selectedDate) {
+            const d = new Date(this.selectedDate);
+            this.viewYear = d.getFullYear();
+            this.viewMonth = d.getMonth();
+        }
+        else if (this.startDate) {
+            const d = new Date(this.startDate);
+            this.viewYear = d.getFullYear();
+            this.viewMonth = d.getMonth();
+        }
+        this.open = true;
+    }
+    prevMonth() {
+        if (this.viewMonth === 0) {
+            this.viewMonth = 11;
+            this.viewYear--;
+        }
+        else
+            this.viewMonth--;
+    }
+    nextMonth() {
+        if (this.viewMonth === 11) {
+            this.viewMonth = 0;
+            this.viewYear++;
+        }
+        else
+            this.viewMonth++;
+    }
+    toISO(year, month, day) {
+        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    }
+    isDisabled(iso) {
+        if (this.minDate && iso < this.minDate)
+            return true;
+        if (this.maxDate && iso > this.maxDate)
+            return true;
+        return false;
+    }
+    isInRange(iso) {
+        if (this.selectionMode !== 'range')
+            return false;
+        const start = this.startDate;
+        const end = this.endDate || this.hoverDate;
+        if (!start || !end)
+            return false;
+        const [s, e] = start <= end ? [start, end] : [end, start];
+        return iso > s && iso < e;
+    }
+    selectDate(iso) {
+        if (this.isDisabled(iso))
+            return;
+        if (this.selectionMode !== 'range') {
+            this.selectedDate = iso;
+            this.open = false;
+            this.dropiChangeDate.emit(iso);
+            return;
+        }
+        // Range mode
+        if (!this.startDate || (this.startDate && this.endDate)) {
+            this.startDate = iso;
+            this.endDate = '';
+        }
+        else {
+            if (iso < this.startDate) {
+                this.endDate = this.startDate;
+                this.startDate = iso;
+            }
+            else {
+                this.endDate = iso;
+            }
+            this.open = false;
+            this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });
+        }
+    }
+    buildDays() {
+        const year = this.viewYear;
+        const month = this.viewMonth;
+        const firstDay = new Date(year, month, 1).getDay();
+        // 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 = [];
+        // Previous month filler
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const d = daysInPrevMonth - i;
+            const m = month === 0 ? 11 : month - 1;
+            const y = month === 0 ? year - 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        // Current month
+        for (let d = 1; d <= daysInMonth; d++) {
+            cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
+        }
+        // Next month filler
+        const remaining = 42 - cells.length;
+        for (let d = 1; d <= remaining; d++) {
+            const m = month === 11 ? 0 : month + 1;
+            const y = month === 11 ? year + 1 : year;
+            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
+        }
+        return cells;
+    }
+    render() {
+        const days = this.buildDays();
+        const today = new Date().toISOString().slice(0, 10);
+        return (h("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && h("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), h("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', 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: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, h("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, h("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, h("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), h("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), h("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), h("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', 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.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;
+            return (h("button", { class: {
+                    'dp-cell': true,
+                    'dp-cell--other-month': !currentMonth,
+                    'dp-cell--today': isToday,
+                    'dp-cell--selected': isSelected,
+                    'dp-cell--range-start': isRangeStart,
+                    'dp-cell--range-end': isRangeEnd,
+                    'dp-cell--in-range': inRange,
+                    'dp-cell--disabled': disabled,
+                }, type: "button", disabled: disabled, onClick: () => this.selectDate(iso), onMouseEnter: () => {
+                    if (this.selectionMode === 'range' && this.startDate && !this.endDate)
+                        this.hoverDate = iso;
+                }, onMouseLeave: () => this.hoverDate = '' }, day));
+        })), h("div", { key: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, h("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.selectedDate = '';
+                this.startDate = '';
+                this.endDate = '';
+                this.open = false;
+            } }, "Limpiar"), h("button", { key: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
+                if (this.selectionMode !== 'range') {
+                    this.selectedDate = today;
+                    this.open = false;
+                    this.dropiChangeDate.emit(today);
+                }
+                else {
+                    this.startDate = today;
+                    this.endDate = '';
+                }
+            } }, "Hoy"))))));
+    }
+};
+DropiDatePicker.style = dropiDatePickerCss();
+
+export { DropiDatePicker as dropi_date_picker };
+//# sourceMappingURL=dropi-date-picker.entry.esm.js.map
+
+//# sourceMappingURL=dropi-date-picker.entry.js.map

package/dist/dropi-ui/dropi-date-picker.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-date-picker/dropi-date-picker.css?tag=dropi-date-picker&encapsulation=shadow","src/components/dropi-date-picker/dropi-date-picker.tsx"],"sourcesContent":[":host { display: block; width: 100%; position: relative; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.dp-label {\n  display: block;\n  font-size: var(--font-size-xxs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 4px;\n}\n\n/* Trigger */\n.dp-trigger {\n  width: 100%;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: 0 var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  cursor: pointer;\n  font-family: inherit;\n  transition: border-color 0.2s;\n}\n.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }\n.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }\n\n.dp-trigger__value {\n  flex: 1;\n  text-align: left;\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }\n\n/* Popup */\n.dp-popup {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  width: 320px;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-3, 12px);\n  box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  z-index: 300;\n  padding: var(--Size-4, 16px);\n}\n\n/* Navigation */\n.dp-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--Size-4, 16px);\n}\n\n.dp-nav__btn {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  transition: background 0.15s;\n}\n.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n.dp-nav__title {\n  font-size: var(--font-size-s, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n  display: flex;\n  gap: 8px;\n}\n\n/* Grid */\n.dp-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  row-gap: 8px;\n  column-gap: 4px;\n}\n\n.dp-day-header {\n  font-size: var(--font-size-s, 14px);\n  color: var(--Gray-Gray-700, #32394d);\n  text-align: center;\n  padding: 8px 0;\n  font-weight: var(--font-weight-bold, 700);\n}\n\n/* Day cells */\n.dp-cell {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-xs, 12px);\n  font-family: inherit;\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  color: var(--Gray-Gray-600, #475066);\n  width: 100%;\n  position: relative;\n  z-index: 1;\n  padding: 0;\n}\n\n/* Pseudo-element for the circle (selected / hover / today) */\n.dp-cell::after {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  border-radius: 50%;\n  transition: all 0.2s;\n  z-index: -1;\n  background: transparent;\n}\n\n/* Pseudo-element for the continuous light-orange range background */\n.dp-cell::before {\n  content: \"\";\n  position: absolute;\n  top: 0; bottom: 0;\n  z-index: -2;\n  border-radius: 0;\n  background: transparent;\n}\n\n.dp-cell:hover:not(:disabled)::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }\n\n.dp-cell--today {\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--today::after {\n  background: var(--Gray-Gray-100, #e6eaf2);\n}\n\n.dp-cell--selected {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--selected::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n/* Range modes */\n.dp-cell--range-start, .dp-cell--range-end {\n  color: var(--Neutral-White, #ffffff);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--range-start::after, .dp-cell--range-end::after {\n  background: var(--Orange-orange-500, #f49a3d) !important;\n}\n\n.dp-cell--in-range {\n  color: var(--Orange-orange-500, #f49a3d);\n  font-weight: var(--font-weight-bold, 700);\n}\n.dp-cell--in-range::before {\n  left: -2px; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start::before {\n  left: 50%; right: -2px;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-end::before {\n  left: -2px; right: 50%;\n  background: var(--Orange-orange-50, #fef5ec);\n}\n.dp-cell--range-start.dp-cell--range-end::before {\n  background: transparent;\n}\n\n.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }\n\n/* Footer */\n.dp-footer {\n  display: flex;\n  justify-content: space-between;\n  margin-top: var(--Size-3, 12px);\n  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  padding-top: var(--Size-2, 8px);\n}\n\n.dp-footer__clear,\n.dp-footer__today {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  font-size: var(--font-size-xxs, 10px);\n  font-family: inherit;\n  cursor: pointer;\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n}\n.dp-footer__clear { color: var(--Gray-Gray-500, #69738c); }\n.dp-footer__today { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }\n.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.dp-footer__today:hover { background: var(--Orange-orange-50, #fef5ec); }\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Listen } from '@stencil/core';\n\nconst MONTHS_ES = [\n  'Enero','Febrero','Marzo','Abril','Mayo','Junio',\n  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'\n];\nconst DAYS_ES = ['Do','Lu','Ma','Mi','Ju','Vi','Sa'];\n\n/**\n * @component dropi-date-picker\n * Calendar date picker with optional date range mode.\n * Emits ISO date strings (YYYY-MM-DD).\n */\n@Component({\n  tag: 'dropi-date-picker',\n  styleUrl: 'dropi-date-picker.css',\n  shadow: true,\n})\nexport class DropiDatePicker {\n  /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */\n  @Prop({ mutable: true }) selectedDate: string = '';\n  /** Range start date (ISO string, range mode) */\n  @Prop({ mutable: true }) startDate: string = '';\n  /** Range end date (ISO string, range mode) */\n  @Prop({ mutable: true }) endDate: string = '';\n  /** Enable range selection - matches Angular selectionMode */\n  @Prop() selectionMode: 'single' | 'range' = 'single';\n  /** Min selectable date (ISO string) */\n  @Prop() minDate: string = '';\n  /** Max selectable date (ISO string) */\n  @Prop() maxDate: string = '';\n  /** Label */\n  @Prop() label: string | null = null;\n  /** Placeholder */\n  @Prop() placeholder: string = 'DD/MM/YYYY';\n  /** Disabled */\n  @Prop() disabled: boolean = false;\n  /** Is invalid state - matches Angular */\n  @Prop() isInvalid: boolean = false;\n  /** Loading state - matches Angular */\n  @Prop() loading: boolean = false;\n\n  @State() private open: boolean = false;\n  @State() private viewYear: number = new Date().getFullYear();\n  @State() private viewMonth: number = new Date().getMonth();\n  @State() private hoverDate: string = '';\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.open && !e.composedPath().includes(this.el)) {\n      this.open = false;\n    }\n  }\n\n  /** Emitted when date selected — matches Angular 'onChangeDate' */\n  @Event() dropiChangeDate: EventEmitter<string>;\n  /** Emitted when panel closes — matches Angular 'onClosePanel' */\n  @Event() dropiClosePanel: EventEmitter<void>;\n  /** Emitted when range selected */\n  @Event() dropiRangeChange: EventEmitter<{ start: string; end: string }>;\n\n  private get displayValue(): string {\n    if (this.selectionMode === 'range') {\n      if (this.startDate && this.endDate) return `${this.startDate} – ${this.endDate}`;\n      if (this.startDate) return this.startDate;\n      return '';\n    }\n    return this.selectedDate;\n  }\n\n  private open_() {\n    if (this.disabled) return;\n    if (this.selectedDate) {\n      const d = new Date(this.selectedDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    } else if (this.startDate) {\n      const d = new Date(this.startDate);\n      this.viewYear = d.getFullYear();\n      this.viewMonth = d.getMonth();\n    }\n    this.open = true;\n  }\n\n  private prevMonth() {\n    if (this.viewMonth === 0) { this.viewMonth = 11; this.viewYear--; }\n    else this.viewMonth--;\n  }\n\n  private nextMonth() {\n    if (this.viewMonth === 11) { this.viewMonth = 0; this.viewYear++; }\n    else this.viewMonth++;\n  }\n\n  private toISO(year: number, month: number, day: number): string {\n    return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n  }\n\n  private isDisabled(iso: string): boolean {\n    if (this.minDate && iso < this.minDate) return true;\n    if (this.maxDate && iso > this.maxDate) return true;\n    return false;\n  }\n\n  private isInRange(iso: string): boolean {\n    if (this.selectionMode !== 'range') return false;\n    const start = this.startDate;\n    const end = this.endDate || this.hoverDate;\n    if (!start || !end) return false;\n    const [s, e] = start <= end ? [start, end] : [end, start];\n    return iso > s && iso < e;\n  }\n\n  private selectDate(iso: string) {\n    if (this.isDisabled(iso)) return;\n\n    if (this.selectionMode !== 'range') {\n      this.selectedDate = iso;\n      this.open = false;\n      this.dropiChangeDate.emit(iso);\n      return;\n    }\n\n    // Range mode\n    if (!this.startDate || (this.startDate && this.endDate)) {\n      this.startDate = iso;\n      this.endDate = '';\n    } else {\n      if (iso < this.startDate) {\n        this.endDate = this.startDate;\n        this.startDate = iso;\n      } else {\n        this.endDate = iso;\n      }\n      this.open = false;\n      this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });\n    }\n  }\n\n  private buildDays(): Array<{ iso: string; day: number; currentMonth: boolean }> {\n    const year = this.viewYear;\n    const month = this.viewMonth;\n\n    const firstDay = new Date(year, month, 1).getDay();\n    // Adjust to Sunday-first\n    const startOffset = firstDay;\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    const daysInPrevMonth = new Date(year, month, 0).getDate();\n\n    const cells: Array<{ iso: string; day: number; currentMonth: boolean }> = [];\n\n    // Previous month filler\n    for (let i = startOffset - 1; i >= 0; i--) {\n      const d = daysInPrevMonth - i;\n      const m = month === 0 ? 11 : month - 1;\n      const y = month === 0 ? year - 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    // Current month\n    for (let d = 1; d <= daysInMonth; d++) {\n      cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });\n    }\n\n    // Next month filler\n    const remaining = 42 - cells.length;\n    for (let d = 1; d <= remaining; d++) {\n      const m = month === 11 ? 0 : month + 1;\n      const y = month === 11 ? year + 1 : year;\n      cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });\n    }\n\n    return cells;\n  }\n\n  render() {\n    const days = this.buildDays();\n    const today = new Date().toISOString().slice(0, 10);\n\n    return (\n      <div class=\"dp-wrap\">\n        {this.label && <label class=\"dp-label\">{this.label}</label>}\n\n        {/* Trigger */}\n        <button\n          class={{\n            'dp-trigger': true,\n            'dp-trigger--disabled': this.disabled,\n            'dp-trigger--invalid': this.isInvalid,\n            'dp-trigger--loading': this.loading\n          }}\n          onClick={() => this.open ? this.open = false : this.open_()}\n          disabled={this.disabled || this.loading}\n          type=\"button\"\n        >\n          <dropi-icon name=\"Calendar\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n          <span class={{ 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue }}>\n            {this.displayValue || this.placeholder}\n          </span>\n          <dropi-icon name=\"Arrow-Down-2\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Gray-Gray-400\" />\n        </button>\n\n        {/* Calendar popup */}\n        {this.open && (\n          <div class=\"dp-popup\">\n            {/* Navigation */}\n            <div class=\"dp-nav\">\n              <button class=\"dp-nav__btn\" onClick={() => this.prevMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Left-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n              <span class=\"dp-nav__title\">\n                <span>{MONTHS_ES[this.viewMonth]}</span>\n                <span>{this.viewYear}</span>\n              </span>\n              <button class=\"dp-nav__btn\" onClick={() => this.nextMonth()} type=\"button\">\n                <dropi-icon name=\"Arrow-Right-2\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-600\" />\n              </button>\n            </div>\n\n            {/* Day headers */}\n            <div class=\"dp-grid\">\n              {DAYS_ES.map(d => (\n                <div class=\"dp-day-header\">{d}</div>\n              ))}\n\n              {/* Day cells */}\n              {days.map(({ iso, day, currentMonth }) => {\n                const isSelected = this.selectionMode !== 'range'\n                  ? iso === this.selectedDate\n                  : iso === this.startDate || iso === this.endDate;\n                const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;\n                const isRangeEnd   = this.selectionMode === 'range' && iso === this.endDate;\n                const inRange      = this.isInRange(iso);\n                const disabled     = this.isDisabled(iso);\n                const isToday      = iso === today;\n\n                return (\n                  <button\n                    class={{\n                      'dp-cell': true,\n                      'dp-cell--other-month': !currentMonth,\n                      'dp-cell--today': isToday,\n                      'dp-cell--selected': isSelected,\n                      'dp-cell--range-start': isRangeStart,\n                      'dp-cell--range-end': isRangeEnd,\n                      'dp-cell--in-range': inRange,\n                      'dp-cell--disabled': disabled,\n                    }}\n                    type=\"button\"\n                    disabled={disabled}\n                    onClick={() => this.selectDate(iso)}\n                    onMouseEnter={() => { if (this.selectionMode === 'range' && this.startDate && !this.endDate) this.hoverDate = iso; }}\n                    onMouseLeave={() => this.hoverDate = ''}\n                  >\n                    {day}\n                  </button>\n                );\n              })}\n            </div>\n\n            {/* Footer */}\n            <div class=\"dp-footer\">\n              <button class=\"dp-footer__clear\" type=\"button\" onClick={() => {\n                this.selectedDate = ''; this.startDate = ''; this.endDate = '';\n                this.open = false;\n              }}>\n                Limpiar\n              </button>\n              <button class=\"dp-footer__today\" type=\"button\" onClick={() => {\n                if (this.selectionMode !== 'range') { this.selectedDate = today; this.open = false; this.dropiChangeDate.emit(today); }\n                else { this.startDate = today; this.endDate = ''; }\n              }}>\n                Hoy\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,80 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+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';
+    /** 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';
+    /** 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') {
+            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';
+        // 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: 'e5138752d1821a27ec3b0396cdc3d09bc15f7c73', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: 'ca7f2dff57eee0cc1d5a71486c8ce765b27c7307', class: "drawer-backdrop", onClick: () => {
+                if (this.closeOnBackdrop)
+                    this.close();
+            } }), h("div", { key: '985b7c295391fa2326ee5880bed829910c56d082', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: 'be62a0009ab8c829cd20643552a66d17b8e877cf', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'e6f6a03c224c83fe8de9a2895a07bf93b9dbdea4', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '66c251c8d8da1e0a0036f9bdeaeb6f09514dbfd4', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '150a59e552636ec623d31926fc419ec36443cc22', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), h("div", { key: '6982100fcf4e5ce4193bbff79baea9c557ad0722', class: "drawer-body" }, h("slot", { key: '6ae61a0451322969ddb4684b77eb5851b942dd9a' })), h("div", { key: '5d4df79ea4044d86edd51331a6c1cdd3a43bfc5d', class: "drawer-footer" }, h("slot", { key: '49de1183444123c36076e20e882952b9d802a567', name: "footer" })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }],
+        "drawerIsOpen": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+DropiDrawer.style = dropiDrawerCss();
+
+export { DropiDrawer as dropi_drawer };
+//# sourceMappingURL=dropi-drawer.entry.esm.js.map
+
+//# sourceMappingURL=dropi-drawer.entry.js.map

package/dist/dropi-ui/dropi-drawer.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-drawer.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-drawer/dropi-drawer.css?tag=dropi-drawer&encapsulation=shadow","src/components/dropi-drawer/dropi-drawer.tsx"],"sourcesContent":[":host { display: contents; font-family: 'Inter', sans-serif; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.drawer-host {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  pointer-events: none;\n  visibility: hidden;\n}\n.drawer-host--open {\n  pointer-events: all;\n  visibility: visible;\n}\n\n/* Backdrop */\n.drawer-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.25s;\n}\n.drawer-host--open .drawer-backdrop { opacity: 1; }\n\n/* Panel base */\n.drawer-panel {\n  position: absolute;\n  background: var(--Neutral-White, #ffffff);\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.25s ease;\n  overflow: hidden;\n  max-width: 100%;\n  min-width: auto;\n}\n\n/* Positions */\n.drawer-panel--right {\n  top: 0; right: 0; bottom: 0;\n  transform: translateX(100%);\n  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);\n}\n.drawer-host--open .drawer-panel--right { transform: translateX(0); }\n\n.drawer-panel--left {\n  top: 0; left: 0; bottom: 0;\n  transform: translateX(-100%);\n  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);\n}\n.drawer-host--open .drawer-panel--left { transform: translateX(0); }\n\n.drawer-panel--bottom {\n  bottom: 0; left: 0; right: 0;\n  transform: translateY(100%);\n  border-radius: var(--Border-2, 8px) var(--Border-2, 8px) 0 0;\n  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);\n}\n.drawer-host--open .drawer-panel--bottom { transform: translateY(0); }\n\n.drawer-panel--top {\n  top: 0; left: 0; right: 0;\n  transform: translateY(-100%);\n  border-radius: 0 0 var(--Border-2, 8px) var(--Border-2, 8px);\n  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);\n}\n.drawer-host--open .drawer-panel--top { transform: translateY(0); }\n\n/* Sizes — coinciden con size-m/l/xl/xxl del host */\n.drawer-panel--size-m { width: 550px; }\n.drawer-panel--size-l { width: 1137px; }\n.drawer-panel--size-xl { width: 1280px; }\n.drawer-panel--size-xxl { width: 1330px; }\n\n/* Header */\n.drawer-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);\n  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);\n  flex-shrink: 0;\n}\n\n.drawer-header--headless {\n  display: none;\n}\n\n.drawer-header__title {\n  color: var(--Gray-700, #32394d);\n  font-family: Inter, sans-serif;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 110%;\n  margin: 0;\n}\n\n.drawer-header__close {\n  width: var(--Size-6, 32px);\n  height: var(--Size-6, 32px);\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--Gray-400, #858ea6);\n  border-radius: var(--Border-1, 4px);\n  transition: background 0.15s;\n  flex-shrink: 0;\n}\n.drawer-header__close:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n\n/* Body */\n.drawer-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--Size-4, 16px);\n  display: flex;\n  flex-direction: column;\n}\n\n/* Footer — oculto por defecto como en el host */\n.drawer-footer {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-drawer\n * Slide-in panel from any side of the screen with backdrop.\n * Matches dropi-core_front implementation with size and headless support.\n */\n@Component({\n  tag: 'dropi-drawer',\n  styleUrl: 'dropi-drawer.css',\n  shadow: true,\n})\nexport class DropiDrawer {\n  @Prop() drawerTitle: string = '';\n  /** Controls visibility (alias of open for Angular parity) */\n  @Prop({ mutable: true }) drawerIsOpen: any = false;\n  /** Controls visibility */\n  @Prop({ mutable: true }) open: any = false;\n  /** Side from which the drawer slides in */\n  @Prop() position: 'left' | 'right' | 'top' | 'bottom' = 'right';\n  /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */\n  @Prop() size: 'm' | 'l' | 'xl' | 'xxl' | '' = '';\n  /** Custom width for left/right drawers (used when size is not set) */\n  @Prop() width: string = '400px';\n  /** Custom height for top/bottom drawers */\n  @Prop() height: string = '50vh';\n  /** Hide the header (headless mode) */\n  @Prop() headless: boolean = false;\n  /** Close on backdrop click */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  /** Emitted when drawer closes */\n  @Event() dropiClose: EventEmitter<void>;\n\n  @Watch('open')\n  @Watch('drawerIsOpen')\n  openChanged(val: boolean) {\n    this.open = val;\n    this.drawerIsOpen = val;\n    if (typeof document !== 'undefined') {\n      if (val) document.body.classList.add('dropi-modal-open');\n      else document.body.classList.remove('dropi-modal-open');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.drawerIsOpen) this.open = true;\n    if (this.open) this.drawerIsOpen = true;\n  }\n\n  private close() {\n    this.open = false;\n    this.dropiClose.emit();\n  }\n\n  render() {\n    const isHorizontal = this.position === 'left' || this.position === 'right';\n\n    // Clase de tamaño según prop size\n    const sizeClass = this.size ? `drawer-panel--size-${this.size}` : '';\n\n    // Estilo inline solo cuando no hay size preset\n    const panelStyle: { [key: string]: string } = {};\n    if (!this.size) {\n      if (isHorizontal) panelStyle['width'] = this.width;\n      else panelStyle['height'] = this.height;\n    }\n\n    return (\n      <div class={{ 'drawer-host': true, 'drawer-host--open': this.open }}>\n        {/* Backdrop */}\n        <div\n          class=\"drawer-backdrop\"\n          onClick={() => { if (this.closeOnBackdrop) this.close(); }}\n        />\n\n        {/* Panel */}\n        <div\n          class={`drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`}\n          style={panelStyle}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          {/* Header */}\n          <div class={{ 'drawer-header': true, 'drawer-header--headless': this.headless }}>\n            <h3 class=\"drawer-header__title\">{this.drawerTitle}</h3>\n            <button class=\"drawer-header__close\" onClick={() => this.close()} aria-label=\"Cerrar\">\n              <dropi-icon name=\"Close-small\" iconWidth=\"32px\" iconHeight=\"32px\" color=\"Gray-Gray-400\" />\n            </button>\n          </div>\n\n          {/* Body */}\n          <div class=\"drawer-body\">\n            <slot />\n          </div>\n\n          {/* Footer — hidden by default matching host */}\n          <div class=\"drawer-footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,66 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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, #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.modelChange = createEvent(this, "modelChange", 7);
+    }
+    /** Options array or JSON string */
+    options = [];
+    /** Property name for the label */
+    valueModel = 'name';
+    /** 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 — matches Angular 'modelChange' */
+    modelChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.modelChange.emit(this.selected);
+    }
+    render() {
+        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 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 {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiDropdown.style = dropiDropdownCss();
+
+export { DropiDropdown as dropi_dropdown };
+//# sourceMappingURL=dropi-dropdown.entry.esm.js.map
+
+//# sourceMappingURL=dropi-dropdown.entry.js.map

package/dist/dropi-ui/dropi-dropdown.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-dropdown.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-dropdown/dropi-dropdown.css?tag=dropi-dropdown&encapsulation=shadow","src/components/dropi-dropdown/dropi-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropdown {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: var(--dropdown-height, 300px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.dropdown__item {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  cursor: pointer;\n  transition: background 0.15s;\n  user-select: none;\n}\n\n.dropdown__item:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n.dropdown__item--active {\n  background: var(--Primary-Primary-50, #fff5eb);\n}\n\n.dropdown__avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.dropdown__label {\n  flex: 1;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-700, #32394d);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownOption {\n  [key: string]: any;\n}\n\n/**\n * @component dropi-dropdown\n * Scrollable list with checkboxes for multi-selection.\n * Pass options as an array (JS) or JSON string.\n */\n@Component({\n  tag: 'dropi-dropdown',\n  styleUrl: 'dropi-dropdown.css',\n  shadow: true,\n})\nexport class DropiDropdown {\n  /** Options array or JSON string */\n  @Prop() options: DropdownOption[] | string = [];\n  /** Property name for the label */\n  @Prop() valueModel: string = 'name';\n  /** Height of the dropdown (CSS value) */\n  @Prop() height: string = '';\n  /** Whether the dropdown is inside a select component */\n  @Prop() isInSelect: boolean = false;\n  /** Configuration parameters for the dropdown items */\n  @Prop() parameters: {\n    type: 'checkbox';\n    icon: string;\n    iconCurrier: boolean;\n  } = {\n    type: 'checkbox',\n    icon: '',\n    iconCurrier: false,\n  };\n\n  @State() private selected: DropdownOption[] = [];\n  @State() private parsedOptions: DropdownOption[] = [];\n\n  /** Emitted when selection changes — matches Angular 'modelChange' */\n  @Event() modelChange: EventEmitter<DropdownOption[]>;\n\n  @Watch('options')\n  optionsChanged(val: DropdownOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() {\n    this.optionsChanged(this.options);\n  }\n\n  private isSelected(opt: DropdownOption): boolean {\n    return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));\n  }\n\n  private toggleOption(opt: DropdownOption) {\n    if (this.isSelected(opt)) {\n      this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));\n    } else {\n      this.selected = [...this.selected, opt];\n    }\n    this.modelChange.emit(this.selected);\n  }\n\n  render() {\n    const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';\n    const customHeight = this.height || '388px';\n\n    return (\n      <div class={containerClass} style={{ '--custom-height': customHeight } as any}>\n        {this.parsedOptions.map((opt, i) => {\n          const label = opt[this.valueModel] ?? String(opt);\n          const active = !!opt.checked || this.isSelected(opt);\n\n          return (\n            <div class=\"content-dropdown\" key={i}>\n              <div\n                class={{ 'container-check-dropdown': true, 'active-option': active }}\n                onClick={() => this.toggleOption(opt)}\n              >\n                {this.parameters.type === 'checkbox' && (\n                  <dropi-checkbox checked={active} />\n                )}\n\n                {this.parameters.iconCurrier && (\n                  <dropi-avatars\n                    image={opt[this.valueModel]}\n                    type=\"transport\"\n                  />\n                )}\n\n                {this.parameters.icon && (\n                  <dropi-avatars\n                    image={opt.image}\n                    type=\"transport\"\n                  />\n                )}\n\n                <span class=\"Body-M-Regular\">{label}</span>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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.buttonClickEvent = createEvent(this, "buttonClickEvent", 7);
+    }
+    /** 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) — 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: '50a720a8b293a19dbabccce8f7aa0fa996e5fd63', class: "empty-state" }, h("div", { key: 'd13894b011225337234301bd514891d89caac3d7', 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: 'eb40395b4bd3c623f27bc3290bb37427420c5e94', class: "empty-state-title" }, this.title), this.description && h("p", { key: 'f942c17f7a8d320bbe81dfcd45d13e56d7ea8eba', class: "empty-state-description" }, this.description), h("slot", { key: '513f49ffeeb77e2be1318d6d251a1bcabff2689a' }), this.buttonText && (h("div", { key: 'f6d9c391feee26eac44a8904e1768678bbb1604c', class: "empty-state-actions" }, h("dropi-button", { key: 'f9ea9563a76a80bd29b6e6aaf8405092046a62a8', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+    }
+};
+DropiEmptyState.style = dropiEmptyStateCss();
+
+export { DropiEmptyState as dropi_empty_state };
+//# sourceMappingURL=dropi-empty-state.entry.esm.js.map
+
+//# sourceMappingURL=dropi-empty-state.entry.js.map

package/dist/dropi-ui/dropi-empty-state.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-empty-state.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,s+BAAs+B,CAAC;;MCW5/B,eAAe,GAAA,MAAA;;;;;;IAElB,KAAK,GAAW,EAAE;;IAElB,WAAW,GAAW,EAAE;;IAExB,QAAQ,GAAW,EAAE;;IAErB,QAAQ,GAAW,gBAAgB;;IAEnC,UAAU,GAAW,EAAE;;IAEvB,UAAU,GAAW,EAAE;;IAEvB,SAAS,GAAwF,SAAS;;IAE1G,cAAc,GAAyC,UAAU;;AAGhE,IAAA,gBAAgB;IAEzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAI,KAEvE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,CAAA,yBAAA,EAA4B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,MAAM,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA,IAAA,CAAM,EACpK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAC,KAAM,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,sCAAsC,EAAA,CAC3F,CACH,CACG,EAEL,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EAC7D,IAAI,CAAC,WAAW,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yBAAyB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,EAE9E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,EAEP,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAA,CAC3C,CACE,CACP,CACG;;;;;;;","names":[],"sources":["src/components/dropi-empty-state/dropi-empty-state.css?tag=dropi-empty-state&encapsulation=shadow","src/components/dropi-empty-state/dropi-empty-state.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-3, 12px);\n  padding: var(--Size-6, 32px) var(--Size-5, 20px);\n  text-align: center;\n}\n\n.empty-state-img {\n  max-width: 200px;\n  width: 100%;\n  height: auto;\n  object-fit: contain;\n  filter: brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%);\n}\n\n.empty-state-svg {\n  width: 80px;\n  height: 80px;\n}\n\n.empty-state-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.empty-state-title {\n  margin: 0;\n  font-size: var(--font-size-l, 18px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n  line-height: 1.3;\n}\n\n.empty-state-description {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  line-height: 1.6;\n  max-width: 400px;\n}\n\n.empty-state-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-3, 12px);\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: var(--Size-2, 8px);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-empty-state\n * Empty state illustration with title, description and optional action button.\n */\n@Component({\n  tag: 'dropi-empty-state',\n  styleUrl: 'dropi-empty-state.css',\n  shadow: true,\n})\nexport class DropiEmptyState {\n  /** Title text (matches Angular 'title') */\n  @Prop() title: string = '';\n  /** Description text */\n  @Prop() description: string = '';\n  /** URL of the illustration image */\n  @Prop() imageUrl: string = '';\n  /** Alt text for the image */\n  @Prop() imageAlt: string = 'Sin resultados';\n  /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */\n  @Prop() buttonText: string = '';\n  /** Icon name for button — matches Angular 'buttonIcon' */\n  @Prop() buttonIcon: string = '';\n  /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */\n  @Prop() dropiIcon: 'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info' = 'default';\n  /** Severity for the action button — matches Angular 'buttonSeverity' */\n  @Prop() buttonSeverity: 'primary' | 'secondary' | 'tertiary' = 'tertiary';\n\n  /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */\n  @Event() buttonClickEvent: EventEmitter<void>;\n\n  render() {\n    return (\n      <div class=\"empty-state\">\n        <div class=\"empty-state-visual\">\n          {this.imageUrl ? (\n            <img class=\"empty-state-img\" src={this.imageUrl} alt={this.imageAlt} />\n          ) : (\n            <img\n              class=\"empty-state-img\"\n              src={`assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`}\n              alt={this.imageAlt}\n              onError={(e) => (e.target as HTMLImageElement).src = 'assets/icons/ilustration/default.svg'}\n            />\n          )}\n        </div>\n\n        {this.title && <h3 class=\"empty-state-title\">{this.title}</h3>}\n        {this.description && <p class=\"empty-state-description\">{this.description}</p>}\n\n        <slot />\n\n        {this.buttonText && (\n          <div class=\"empty-state-actions\">\n            <dropi-button\n              text={this.buttonText}\n              preIcon={this.buttonIcon}\n              severity={this.buttonSeverity}\n              onClick={() => this.buttonClickEvent.emit()}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.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.toggleFavorite = createEvent(this, "toggleFavorite", 7);
+    }
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    toggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.toggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: 'da3d3c03b4c297f1d4bb754f8ade9222d3edc39d', 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: '857967dd6982df82f5ac29db4370fa607369da34', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', iconWidth: "19px", iconHeight: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+};
+DropiFavoriteButton.style = dropiFavoriteButtonCss();
+
+export { DropiFavoriteButton as dropi_favorite_button };
+//# sourceMappingURL=dropi-favorite-button.entry.esm.js.map
+
+//# sourceMappingURL=dropi-favorite-button.entry.js.map

package/dist/dropi-ui/dropi-favorite-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-favorite-button.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,6VAA6V,CAAC;;MCWvX,mBAAmB,GAAA,MAAA;;;;;;IAEL,UAAU,GAAY,KAAK;;AAG3C,IAAA,cAAc;IAEN,OAAO,GAAY,KAAK;IAEjC,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;;IAG3C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAE,EAC9D,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,EACvC,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,EAAA,YAAA,EAC5B,IAAI,CAAC,UAAU,GAAG,qBAAqB,GAAG,qBAAqB,EAAA,cAAA,EAC7D,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,EAAA,EAErC,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,OAAO,EAC/D,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,GAAG,qBAAqB,GAAG,eAAe,EAAA,CAChF,CACK;;;;;;;","names":[],"sources":["src/components/dropi-favorite-button/dropi-favorite-button.css?tag=dropi-favorite-button&encapsulation=shadow","src/components/dropi-favorite-button/dropi-favorite-button.tsx"],"sourcesContent":[":host { display: inline-flex; }\n\n.fav-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 37px;\n  height: 37px;\n  border-radius: 8px;\n  border: 1px solid var(--Gray-Gray-200);\n  background: var(--Neutral-White);\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n}\n\n.fav-btn:hover,\n.fav-btn--active {\n  background: var(--Gray-Gray-50);\n}\n\n/* Optional: Subtle scale on click */\n.fav-btn:active {\n  transform: scale(0.95);\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-favorite-button\n * Heart toggle button for marking items as favorite.\n */\n@Component({\n  tag: 'dropi-favorite-button',\n  styleUrl: 'dropi-favorite-button.css',\n  shadow: true,\n})\nexport class DropiFavoriteButton {\n  /** Whether the item is currently marked as favorite */\n  @Prop({ mutable: true }) isFavorite: boolean = false;\n\n  /** Emitted when toggled. e.detail = new favorite state */\n  @Event() toggleFavorite: EventEmitter<boolean>;\n\n  @State() private hovered: boolean = false;\n\n  private toggle() {\n    this.isFavorite = !this.isFavorite;\n    this.toggleFavorite.emit(this.isFavorite);\n  }\n\n  render() {\n    return (\n      <button\n        class={{ 'fav-btn': true, 'fav-btn--active': this.isFavorite }}\n        onClick={() => this.toggle()}\n        onMouseEnter={() => this.hovered = true}\n        onMouseLeave={() => this.hovered = false}\n        aria-label={this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos'}\n        aria-pressed={String(this.isFavorite)}\n      >\n        <dropi-icon\n          name={this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart'}\n          iconWidth=\"19px\"\n          iconHeight=\"19px\"\n          color={this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800'}\n        />\n      </button>\n    );\n  }\n}\n"],"version":3}