@dropi/ui 0.1.24 → 0.1.26

package/dist/collection/components/dropi-date-picker/dropi-date-picker.js

@@ -1,516 +0,0 @@
-import { h } from "@stencil/core";
-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'];
-/**
- * @component dropi-date-picker
- * Calendar date picker with optional date range mode.
- * Emits ISO date strings (YYYY-MM-DD).
- */
-export class DropiDatePicker {
-    /** 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 = '';
-    el;
-    handleDocClick(e) {
-        if (this.open && !e.composedPath().includes(this.el)) {
-            this.open = false;
-        }
-    }
-    /** Emitted when date selected — matches Angular 'onChangeDate' */
-    onChangeDate;
-    /** Emitted when panel closes — matches Angular 'onClosePanel' */
-    onClosePanel;
-    /** Emitted when range selected */
-    dropiRangeChange;
-    get displayValue() {
-        if (this.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.onChangeDate.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: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && h("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), h("button", { key: '2fa9b1f3d2c9bfc4876724492a265ff0b29f8d23', class: {
-                'dp-trigger': true,
-                'dp-trigger--disabled': this.disabled,
-                'dp-trigger--invalid': this.isInvalid,
-                'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, h("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, h("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, h("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), h("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), h("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
-            const isSelected = this.selectionMode !== 'range'
-                ? iso === this.selectedDate
-                : iso === this.startDate || iso === this.endDate;
-            const isRangeStart = this.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: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, h("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
-                this.selectedDate = '';
-                this.startDate = '';
-                this.endDate = '';
-                this.open = false;
-            } }, "Limpiar"), h("button", { key: 'a08afb2358819fc8c15c7949dc7e4cbdf14b52fb', class: "dp-footer__today", type: "button", onClick: () => {
-                if (this.selectionMode !== 'range') {
-                    this.selectedDate = today;
-                    this.open = false;
-                    this.onChangeDate.emit(today);
-                }
-                else {
-                    this.startDate = today;
-                    this.endDate = '';
-                }
-            } }, "Hoy"))))));
-    }
-    static get is() { return "dropi-date-picker"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-date-picker.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-date-picker.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "selectedDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Selected date (ISO string, single mode) - matches Angular 'selectedDate'"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-date",
-                "defaultValue": "''"
-            },
-            "startDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Range start date (ISO string, range mode)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "start-date",
-                "defaultValue": "''"
-            },
-            "endDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Range end date (ISO string, range mode)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "end-date",
-                "defaultValue": "''"
-            },
-            "selectionMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'single' | 'range'",
-                    "resolved": "\"range\" | \"single\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable range selection - matches Angular selectionMode"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selection-mode",
-                "defaultValue": "'single'"
-            },
-            "minDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Min selectable date (ISO string)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-date",
-                "defaultValue": "''"
-            },
-            "maxDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max selectable date (ISO string)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-date",
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "null"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'DD/MM/YYYY'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "isInvalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Is invalid state - matches Angular"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-invalid",
-                "defaultValue": "false"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Loading state - matches Angular"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "loading",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "open": {},
-            "viewYear": {},
-            "viewMonth": {},
-            "hoverDate": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onChangeDate",
-                "name": "onChangeDate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when date selected \u2014 matches Angular 'onChangeDate'"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "onClosePanel",
-                "name": "onClosePanel",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when panel closes \u2014 matches Angular 'onClosePanel'"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiRangeChange",
-                "name": "dropiRangeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when range selected"
-                },
-                "complexType": {
-                    "original": "{ start: string; end: string }",
-                    "resolved": "{ start: string; end: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleDocClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/dropi-date-picker-range/dropi-date-picker-range.css

@@ -1,143 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  max-width: 380px;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.date-picker-range {
-  width: 100%;
-  font-family: inherit;
-}
-
-.label {
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
-  color: #7b8190;
-  margin-bottom: 8px;
-}
-
-.inputs-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-}
-
-.input-group {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.input-label {
-  font-size: var(--font-size-xs, 11px);
-  color: var(--Gray-Gray-500, #69738c);
-  font-weight: var(--font-weight-medium, 500);
-}
-
-.date-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 10px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  color: var(--Gray-Gray-600, #475066);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-}
-
-.date-input:focus {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-}
-
-.separator {
-  padding-bottom: 8px;
-  color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-m);
-}
-
-.shortcuts {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-top: 10px;
-  border-left: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  padding-left: 10px;
-}
-
-.shortcut-btn {
-  background: transparent;
-  border: none;
-  padding: 4px 6px;
-  font-size: 13px;
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  cursor: pointer;
-  text-align: left;
-  border-radius: 5px;
-  transition: background 0.1s ease;
-  font-weight: var(--font-weight-regular);
-}
-
-.shortcut-btn:hover {
-  background: var(--Gray-Gray-50, #f5f6f8);
-}
-
-.shortcut-btn.active {
-  background: var(--Gray-Gray-50, #f5f6f8);
-  font-weight: var(--font-weight-semibold);
-}
-
-.warning-box {
-  margin-top: 8px;
-  padding: 4px 8px;
-  border: 1px solid var(--Warning-Warning-400);
-  border-radius: 4px;
-  background: var(--Warning-Warning-50);
-}
-
-.warning-message {
-  color: #495057;
-  font-size: var(--font-size-xxs);
-  line-height: 16px;
-}
-
-@keyframes shimmer {
-  0%   { background-position: -468px 0; }
-  100% { background-position: 468px 0; }
-}
-
-.skeleton {
-  height: 40px;
-  width: 100%;
-  min-width: 180px;
-  border-radius: 6px;
-  animation: shimmer 1s linear infinite;
-  background: linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);
-  background-size: 800px 104px;
-}
-
-@media screen and (max-width: 480px) {
-  .inputs-row {
-    flex-direction: column;
-  }
-
-  .separator {
-    display: none;
-  }
-
-  .shortcuts {
-    flex-direction: row;
-    flex-wrap: wrap;
-    border-left: none;
-    padding-left: 0;
-    border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
-    padding-top: 8px;
-  }
-}