@dropi/ui 0.1.18 → 0.1.20

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": {}
+                }
+            }];
+    }
+}

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: 500;
+  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, #fff);
+  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: 16px;
+}
+
+.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: 400;
+}
+
+.shortcut-btn:hover {
+  background: var(--Gray-Gray-50, #f5f6f8);
+}
+
+.shortcut-btn.active {
+  background: var(--Gray-Gray-50, #f5f6f8);
+  font-weight: 600;
+}
+
+.warning-box {
+  margin-top: 8px;
+  padding: 4px 8px;
+  border: 1px solid #f4c370;
+  border-radius: 4px;
+  background: #fef8ed;
+}
+
+.warning-message {
+  color: #495057;
+  font-size: 10px;
+  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;
+  }
+}