@dropi/ui 0.1.19 → 0.1.21

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: 'fc10fdf1b3621b61fa1ee929f759c23ccfafa0e9', class: "dp-wrap" }, this.label && h("label", { key: '7e7be5c6ed8cc9e4a273defc7f3c5ba41861ee2f', class: "dp-label" }, this.label), h("button", { key: '52f190e283341a0836df16c2bd375e45b684ffe7', 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: '2e79e9e6ed80a52d8a70efd69bb5ebaf5fc6e901', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: '8667a6b56e73506aa9cf171d61f3425a7143d3f6', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: 'c42b1e91c5f8c830c5f758c6f4a6f6513aae4296', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '1096c4ded79202c51d2df4ce1b72f4afe3da9171', class: "dp-popup" }, h("div", { key: '1f6cb906f32af2ab4bb894e67672657983ff16b6', class: "dp-nav" }, h("button", { key: 'd85f4f8fab9e9112cd2b22e353d4e7afe55874a2', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '48e06f17915b6ac2016f20f6d5c45c2ecc8ce77b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: 'efe6cd99ddbf872ad69da22a3c8df08d9258beb6', class: "dp-nav__title" }, h("span", { key: '4752259d25443430a4f67cce19d129ef123c55c7' }, MONTHS_ES[this.viewMonth]), h("span", { key: '1b47d475123adf6eef19dfca84530cf03086bbcb' }, this.viewYear)), h("button", { key: 'e2979317eb2c3483be9e648ae3c4f33b9f139e68', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: '00dd3b6b6c8ed941db4d6e1a1241b25a196522f8', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '9c1404d125cd5c63f84d97e7b67c257a5aea1a6f', 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: '2b5b0438fdaa782c1ba6f3f6d99870c6bdef9c09', class: "dp-footer" }, h("button", { key: 'd7645b65bd581ddb6c827a4361fc413b1978b08b', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.selectedDate = '';
+                this.startDate = '';
+                this.endDate = '';
+                this.open = false;
+            } }, "Limpiar"), h("button", { key: '855675f6fdb35aa564b469a772d0fcd5d704ed52', 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;
+  }
+}