@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,344 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:8px}.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, #ffffff);cursor:pointer;font-family:var(--font-family-01, 'Inter', sans-serif);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;display:flex;flex-direction:row;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;overflow:hidden}.dp-calendar{padding:var(--Size-4, 16px);width:300px;flex-shrink:0}.dp-divider{width:1px;background:var(--Gray-Gray-100, #e6eaf2);flex-shrink:0}.dp-shortcuts{padding:var(--Size-4, 16px) var(--Size-3, 12px);display:flex;flex-direction:column;gap:2px;min-width:140px}.shortcut-btn{background:transparent;border:1px solid transparent;padding:6px 10px;font-size:13px;font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:6px;transition:background 0.1s ease;font-weight:var(--font-weight-regular);white-space:nowrap}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn--active{border-color:var(--Gray-Gray-200, #c3c9d9);font-weight:var(--font-weight-semibold);background:var(--Gray-Gray-50, #f5f6f8)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.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{background:none;border:none;font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px;cursor:pointer;padding:4px 8px;border-radius:var(--Border-1, 4px);transition:background 0.15s;font-family:var(--font-family-01, 'Inter', sans-serif)}.dp-nav__title:hover{background:var(--Gray-Gray-50, #f7f8fa)}.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:var(--font-family-01, 'Inter', sans-serif);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-month-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}.dp-month-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-month-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-month-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-month-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}.dp-year-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}.dp-year-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-year-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-year-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-year-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}`;
-
-const MONTHS_ES = [
-    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
-];
-const MONTHS_SHORT = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
-const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
-const DropiDatePicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiChangeDate = index.createEvent(this, "dropiChangeDate");
-        this.dropiClosePanel = index.createEvent(this, "dropiClosePanel");
-        this.dropiRangeChange = index.createEvent(this, "dropiRangeChange");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    /** Name for native form submission */
-    name;
-    /** Selected date (ISO string, single mode) */
-    selectedDate = '';
-    /** Range start date (ISO string, range mode) */
-    startDate = '';
-    /** Range end date (ISO string, range mode) */
-    endDate = '';
-    valueChanged() { this.updateFormValue(); }
-    /** Enable range selection */
-    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 */
-    isInvalid = false;
-    /** Loading state */
-    loading = false;
-    /** Hide "Hoy" shortcut */
-    hideTodayShortcut = false;
-    open = false;
-    viewYear = new Date().getFullYear();
-    viewMonth = new Date().getMonth();
-    hoverDate = '';
-    viewMode = 'day';
-    activeShortcut = -1;
-    get el() { return index.getElement(this); }
-    handleDocClick(e) {
-        if (this.open && !e.composedPath().includes(this.el)) {
-            this.open = false;
-        }
-    }
-    dropiChangeDate;
-    dropiClosePanel;
-    dropiRangeChange;
-    componentWillLoad() { this.updateFormValue(); }
-    updateFormValue() {
-        if (this.selectionMode === 'range') {
-            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
-        }
-        else {
-            this.internals.setFormValue(this.selectedDate || '');
-        }
-    }
-    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.viewMode = 'day';
-        this.open = true;
-    }
-    get decadeStart() {
-        return Math.floor(this.viewYear / 10) * 10;
-    }
-    get navTitle() {
-        if (this.viewMode === 'day')
-            return `${MONTHS_ES[this.viewMonth]}  ${this.viewYear}`;
-        if (this.viewMode === 'month')
-            return `${this.viewYear}`;
-        return `${this.decadeStart}-${this.decadeStart + 9}`;
-    }
-    cycleView() {
-        if (this.viewMode === 'day')
-            this.viewMode = 'month';
-        else if (this.viewMode === 'month')
-            this.viewMode = 'year';
-    }
-    prevNav() {
-        if (this.viewMode === 'day') {
-            if (this.viewMonth === 0) {
-                this.viewMonth = 11;
-                this.viewYear--;
-            }
-            else
-                this.viewMonth--;
-        }
-        else if (this.viewMode === 'month') {
-            this.viewYear--;
-        }
-        else {
-            this.viewYear = this.decadeStart - 10;
-        }
-    }
-    nextNav() {
-        if (this.viewMode === 'day') {
-            if (this.viewMonth === 11) {
-                this.viewMonth = 0;
-                this.viewYear++;
-            }
-            else
-                this.viewMonth++;
-        }
-        else if (this.viewMode === 'month') {
-            this.viewYear++;
-        }
-        else {
-            this.viewYear = this.decadeStart + 10;
-        }
-    }
-    selectMonth(month) {
-        this.viewMonth = month;
-        this.viewMode = 'day';
-    }
-    selectYear(year) {
-        this.viewYear = year;
-        this.viewMode = 'month';
-    }
-    get today() {
-        return new Date().toISOString().slice(0, 10);
-    }
-    daysAgo(n) {
-        const d = new Date();
-        d.setDate(d.getDate() - n);
-        return d.toISOString().slice(0, 10);
-    }
-    get shortcuts() {
-        const all = [
-            { label: 'Hoy', start: this.today, end: this.today },
-            { label: 'Últimos 7 días', start: this.daysAgo(6), end: this.today },
-            { label: 'Últimos 15 días', start: this.daysAgo(14), end: this.today },
-            { label: 'Últimos 30 días', start: this.daysAgo(29), end: this.today },
-            { label: 'Últimos 90 días', start: this.daysAgo(89), end: this.today },
-        ];
-        return this.hideTodayShortcut ? all.slice(1) : all;
-    }
-    selectShortcut(idx) {
-        const s = this.shortcuts[idx];
-        this.activeShortcut = idx;
-        if (this.selectionMode === 'range') {
-            this.startDate = s.start;
-            this.endDate = s.end;
-            this.dropiRangeChange.emit({ start: s.start, end: s.end });
-        }
-        else {
-            this.selectedDate = s.end;
-            this.dropiChangeDate.emit(s.end);
-        }
-        this.open = false;
-    }
-    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;
-        }
-        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();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        const daysInPrevMonth = new Date(year, month, 0).getDate();
-        const cells = [];
-        for (let i = firstDay - 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 });
-        }
-        for (let d = 1; d <= daysInMonth; d++) {
-            cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
-        }
-        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;
-    }
-    renderDayView(today) {
-        const days = this.buildDays();
-        return (index.h("div", { 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.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 (index.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));
-        })));
-    }
-    renderMonthView() {
-        const todayMonth = new Date().getMonth();
-        const todayYear = new Date().getFullYear();
-        return (index.h("div", { class: "dp-month-grid" }, MONTHS_SHORT.map((name, idx) => {
-            const isSelected = idx === this.viewMonth;
-            const isCurrent = idx === todayMonth && this.viewYear === todayYear;
-            return (index.h("button", { class: {
-                    'dp-month-cell': true,
-                    'dp-month-cell--selected': isSelected,
-                    'dp-month-cell--current': isCurrent && !isSelected,
-                }, type: "button", onClick: () => this.selectMonth(idx) }, name));
-        })));
-    }
-    renderYearView() {
-        const currentYear = new Date().getFullYear();
-        const start = this.decadeStart;
-        const years = Array.from({ length: 10 }, (_, i) => start + i);
-        return (index.h("div", { class: "dp-year-grid" }, years.map(year => {
-            const isSelected = year === this.viewYear;
-            const isCurrent = year === currentYear;
-            return (index.h("button", { class: {
-                    'dp-year-cell': true,
-                    'dp-year-cell--selected': isSelected,
-                    'dp-year-cell--current': isCurrent && !isSelected,
-                }, type: "button", onClick: () => this.selectYear(year) }, year));
-        })));
-    }
-    render() {
-        const today = new Date().toISOString().slice(0, 10);
-        return (index.h("div", { key: '6ae00de99b93a13faba81ac027c292b9624d0336', class: "dp-wrap" }, this.label && index.h("label", { key: '9282bb57332ebaef9861702d80759d641ea21757', class: "dp-label" }, this.label), index.h("button", { key: '1fe5d5fcd8ce1c0b151381d9c249c401d322f78a', 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: '560cf80eb7652543b9000e375b213a3dba91060b', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("span", { key: '3bdc45bd4706502af4050475e709c15beebce028', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder)), this.open && (index.h("div", { key: 'e21053dd38d62ab43c01f337fbbeb8b36e70680c', class: "dp-popup" }, index.h("div", { key: 'd6c8fc40ec4bd11bcd5bf3d8b3706c4c62099bbf', class: "dp-calendar" }, index.h("div", { key: 'cf8f21d301592077851a44eb588418302240598f', class: "dp-nav" }, index.h("button", { key: '28702d76d499cec07cd69d7bd23f5eb0369d288f', class: "dp-nav__btn", onClick: () => this.prevNav(), type: "button" }, index.h("dropi-icon", { key: '18b1c6fb2ea5f51b4a4b59592c7d89c5406c6c39', name: "dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), index.h("button", { key: '755274772a90deae38d613da369863aefe95e297', class: "dp-nav__title", onClick: () => this.cycleView(), type: "button" }, this.viewMode === 'day'
-            ? [index.h("span", null, MONTHS_ES[this.viewMonth]), index.h("span", null, this.viewYear)]
-            : index.h("span", null, this.navTitle)), index.h("button", { key: '6442690df1e434f9fb0128327f8f07c3cecbed4c', class: "dp-nav__btn", onClick: () => this.nextNav(), type: "button" }, index.h("dropi-icon", { key: '00525ae2cbe5cc8a881d165141de10ce3d72e439', name: "dropdown-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), this.viewMode === 'day' && this.renderDayView(today), this.viewMode === 'month' && this.renderMonthView(), this.viewMode === 'year' && this.renderYearView()), this.selectionMode === 'range' && [
-            index.h("div", { key: '688df97b843c3c3342fc301d6c6c74ec88921d68', class: "dp-divider" }),
-            index.h("div", { key: '2c75f7b004812ee1eb18bbc349f03ab55623cd9f', class: "dp-shortcuts" }, this.shortcuts.map((s, i) => (index.h("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeShortcut === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))
-        ]))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "selectedDate": [{
-                "valueChanged": 0
-            }],
-        "startDate": [{
-                "valueChanged": 0
-            }],
-        "endDate": [{
-                "valueChanged": 0
-            }]
-    }; }
-};
-DropiDatePicker.style = dropiDatePickerCss();
-
-exports.dropi_date_picker = DropiDatePicker;

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

@@ -1,79 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiDrawerCss = () => `:host{display:contents;font-family:var(--font-family-01, 'Inter', sans-serif);font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:var(--dropi-z-index-drawer, 9999);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");
-    }
-    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 (index.h("div", { key: 'e173a207447ff88cba0f838844ae629a367a6c98', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, index.h("div", { key: '1a4b3990d1a4641abcdd53b535b84f99991d1a90', class: "drawer-backdrop", onClick: () => {
-                if (this.closeOnBackdrop)
-                    this.close();
-            } }), index.h("div", { key: 'eb3042e7506a6d64f6461b5bb7f0a93048299d50', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, index.h("div", { key: 'ce4468ae512bd70596313dbaa8a738666ff7ef5d', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, index.h("h3", { key: '30e6af93a4e697590a8dc79748ec4e52f31f42c7', class: "drawer-header__title" }, this.drawerTitle), index.h("button", { key: '0a817e6236e51112812302ff320c15565071f3bc', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, index.h("dropi-icon", { key: 'c540300a8c5486f6957f0cb4c5e55a70daf17b39', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), index.h("div", { key: '0b63274c3a8a810c06b1aec621209178499dae86', class: "drawer-body" }, index.h("slot", { key: '26c6a31c6c8bd9ae409880d85748ed44f01941d0' })), index.h("div", { key: 'be3dba11d475e95391e039e791f98d11c1625b5e', class: "drawer-footer" }, index.h("slot", { key: 'e2e42a0543dd9a8fb6278711d948816dda1969a3', name: "footer" })))));
-    }
-    static get watchers() { return {
-        "open": [{
-                "openChanged": 0
-            }],
-        "drawerIsOpen": [{
-                "openChanged": 0
-            }]
-    }; }
-};
-DropiDrawer.style = dropiDrawerCss();
-
-exports.dropi_drawer = DropiDrawer;

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

@@ -1,65 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.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.modelChange = index.createEvent(this, "modelChange");
-    }
-    /** 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 (index.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 (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", { name: "_dropdown-option", 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 {
-        "options": [{
-                "optionsChanged": 0
-            }]
-    }; }
-};
-DropiDropdown.style = dropiDropdownCss();
-
-exports.dropi_dropdown = DropiDropdown;