@dropi/ui 0.1.27 → 0.1.29

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

@@ -0,0 +1,516 @@
+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

@@ -0,0 +1,143 @@
+: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;
+  }
+}