@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,150 @@
+:host { display: block; width: 100%; position: relative; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.dp-label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: 4px;
+}
+
+/* Trigger */
+.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, #fff);
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.2s;
+}
+.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
+.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }
+
+.dp-trigger__value {
+  flex: 1;
+  text-align: left;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }
+
+/* Popup */
+.dp-popup {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 280px;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  z-index: 300;
+  padding: var(--Size-3, 12px);
+}
+
+/* Navigation */
+.dp-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--Size-3, 12px);
+}
+
+.dp-nav__btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.dp-nav__title {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+}
+
+/* Grid */
+.dp-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.dp-day-header {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-400, #858ea6);
+  text-align: center;
+  padding: 4px 0;
+  font-weight: var(--font-weight-bold, 700);
+}
+
+/* Day cells */
+.dp-cell {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  border: none;
+  border-radius: var(--Border-1, 4px);
+  cursor: pointer;
+  background: none;
+  color: var(--Gray-Gray-700, #32394d);
+  transition: background 0.15s, color 0.15s;
+}
+.dp-cell:hover:not(:disabled) { background: var(--Gray-Gray-50, #f7f8fa); }
+
+.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
+.dp-cell--today { font-weight: var(--font-weight-bold, 700); color: var(--Primary-Primary-500, #f49a3d); }
+.dp-cell--selected, .dp-cell--range-start, .dp-cell--range-end {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #fff);
+  border-radius: var(--Border-1, 4px);
+}
+.dp-cell--in-range {
+  background: var(--Primary-Primary-50, #fff5eb);
+  border-radius: 0;
+}
+.dp-cell--range-start { border-radius: var(--Border-1, 4px) 0 0 var(--Border-1, 4px); }
+.dp-cell--range-end   { border-radius: 0 var(--Border-1, 4px) var(--Border-1, 4px) 0; }
+.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* Footer */
+.dp-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--Size-3, 12px);
+  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  padding-top: var(--Size-2, 8px);
+}
+
+.dp-footer__clear,
+.dp-footer__today {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  cursor: pointer;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+}
+.dp-footer__clear { color: var(--Gray-Gray-500, #68738f); }
+.dp-footer__today { color: var(--Primary-Primary-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
+.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.dp-footer__today:hover { background: var(--Primary-Primary-50, #fff5eb); }

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

@@ -0,0 +1,434 @@
+import { h } from "@stencil/core";
+const MONTHS_ES = [
+    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+];
+const DAYS_ES = ['Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do'];
+/**
+ * @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) */
+    value = '';
+    /** Range start date (ISO string, range mode) */
+    startDate = '';
+    /** Range end date (ISO string, range mode) */
+    endDate = '';
+    /** Enable range selection */
+    range = false;
+    /** Min selectable date (ISO string) */
+    minDate = '';
+    /** Max selectable date (ISO string) */
+    maxDate = '';
+    /** Label */
+    label = '';
+    /** Placeholder */
+    placeholder = 'Seleccionar fecha';
+    /** Disabled */
+    disabled = false;
+    open = false;
+    viewYear = new Date().getFullYear();
+    viewMonth = new Date().getMonth();
+    hoverDate = '';
+    /** Emitted when single date selected. e.detail = ISO date */
+    dropiDateChange;
+    /** Emitted when range selected. e.detail = { start, end } */
+    dropiRangeChange;
+    get displayValue() {
+        if (this.range) {
+            if (this.startDate && this.endDate)
+                return `${this.startDate} – ${this.endDate}`;
+            if (this.startDate)
+                return this.startDate;
+            return '';
+        }
+        return this.value;
+    }
+    open_() {
+        if (this.disabled)
+            return;
+        if (this.value) {
+            const d = new Date(this.value);
+            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.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.range) {
+            this.value = iso;
+            this.open = false;
+            this.dropiDateChange.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 Monday-first
+        const startOffset = (firstDay + 6) % 7;
+        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: 'ee619ad7d2528fa29f74cd9e149a9a4f8250c1b5', class: "dp-wrap" }, this.label && h("label", { key: 'faffc20912e7e27cf27f6b8895050df117f2fcd9', class: "dp-label" }, this.label), h("button", { key: '6249c8e76c7b19bd54bedb3f2e98342b45eb9444', class: { 'dp-trigger': true, 'dp-trigger--disabled': this.disabled }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled, type: "button" }, h("dropi-icon", { key: '3033520703a6c58fb30d8231196a206e1f2a153c', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("span", { key: 'c426b0a12c17108d4f32d2d01732bfc13ec15b26', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), h("dropi-icon", { key: '218703644316e36b4a2bece89975db723eaa0bfa', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (h("div", { key: '4ca8fa76344e960a42e4aec332e6ecdabab3bc6c', class: "dp-popup" }, h("div", { key: '04b2b43eb0b209127a31adb2d0721b70449e84ab', class: "dp-nav" }, h("button", { key: '4f7e1208d4a6b2e03f30730fb38306f4aaf365af', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, h("dropi-icon", { key: '307a5dcbd86c26f13a22e0d69a8f61b7a646378b', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), h("span", { key: '1c094b7fb9385cc7673a2dd3038eebdc11a247c7', class: "dp-nav__title" }, MONTHS_ES[this.viewMonth], " ", this.viewYear), h("button", { key: '70c629dc1f1229fffcceec2f01ed8acc72bf1794', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, h("dropi-icon", { key: 'ab1847f3771ccc80c9257a82f31ed7cd2cb0dd0a', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), h("div", { key: '92ff7685583877bed3a63ea74c92fd4581b9a777', class: "dp-grid" }, DAYS_ES.map(d => (h("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            const isSelected = !this.range
+                ? iso === this.value
+                : iso === this.startDate || iso === this.endDate;
+            const isRangeStart = this.range && iso === this.startDate;
+            const isRangeEnd = this.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.range && this.startDate && !this.endDate)
+                        this.hoverDate = iso;
+                }, onMouseLeave: () => this.hoverDate = '' }, day));
+        })), h("div", { key: '2e1a6e5e3f016b68b9486e6acadb94738671fe7f', class: "dp-footer" }, h("button", { key: 'cef6300ccd52c617426522d3977ac72829cb40cc', class: "dp-footer__clear", type: "button", onClick: () => {
+                this.value = '';
+                this.startDate = '';
+                this.endDate = '';
+                this.open = false;
+            } }, "Limpiar"), h("button", { key: 'a5627d87cdc24d70368618fb8c67eff30b0800c7', class: "dp-footer__today", type: "button", onClick: () => {
+                if (!this.range) {
+                    this.value = today;
+                    this.open = false;
+                    this.dropiDateChange.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 {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected date (ISO string, single mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "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": "''"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable range selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "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",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "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": "'Seleccionar fecha'"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "viewYear": {},
+            "viewMonth": {},
+            "hoverDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiDateChange",
+                "name": "dropiDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when single date selected. e.detail = ISO date"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiRangeChange",
+                "name": "dropiRangeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when range selected. e.detail = { start, end }"
+                },
+                "complexType": {
+                    "original": "{ start: string; end: string }",
+                    "resolved": "{ start: string; end: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}