@prolibu-suite/cobalt-core 0.1.0

package/dist/collection/components/co-date-range/co-date-range.js

@@ -0,0 +1,697 @@
+import { h } from "@stencil/core";
+/**
+ * Date range picker. Renders an input-style trigger and, on open, a popover
+ * with optional preset chips + a single-month calendar.
+ *
+ * Selection model:
+ *   - first click  → sets `from`
+ *   - second click → sets `to` (auto-swaps if before `from`)
+ *   - third click  → restarts (sets new `from`, clears `to`)
+ *   - hover over a day with `from` set → previews the range
+ *
+ * `value` is a JSON string `{"from":"YYYY-MM-DD","to":"YYYY-MM-DD"}` (or empty
+ * for unset) so it survives JSX attribute serialization. `coChange` fires
+ * with `{from, to}` only when the user clicks "Apply".
+ */
+export class CoDateRange {
+    constructor() {
+        /** JSON `{from, to}` or empty string. */
+        this.value = '';
+        this.label = '';
+        this.placeholder = 'Select range';
+        this.disabled = false;
+        this.clearable = true;
+        this.presets = true;
+        this.status = 'default';
+        this.helperText = '';
+        /** BCP-47 locale tag used by Intl.DateTimeFormat. */
+        this.locale = 'es';
+        // i18n-ready labels (host wires from $t())
+        this.presetTodayLabel = 'Today';
+        this.presetThisWeekLabel = 'This week';
+        this.presetThisMonthLabel = 'This month';
+        this.presetLast30DaysLabel = 'Last 30 days';
+        this.presetLast90DaysLabel = 'Last 90 days';
+        this.presetThisYearLabel = 'This year';
+        this.applyLabel = 'Apply';
+        this.clearLabel = 'Clear';
+        this.isOpen = false;
+        this.draftFrom = null;
+        this.draftTo = null;
+        this.hoverDay = null;
+        this.viewMonth = new Date().getMonth();
+        this.viewYear = new Date().getFullYear();
+        this.handleTriggerClick = () => {
+            if (this.disabled)
+                return;
+            this.isOpen = !this.isOpen;
+        };
+        this.handleDocumentClick = (e) => {
+            if (!this.isOpen)
+                return;
+            const path = e.composedPath();
+            if (!path.includes(this.el)) {
+                e.stopPropagation();
+                this.handleCancel();
+            }
+        };
+        this.handleCancel = () => {
+            this.isOpen = false;
+            const parsed = this.parseValue();
+            this.draftFrom = parsed.from;
+            this.draftTo = parsed.to;
+        };
+        this.handleDayClick = (day) => {
+            if (!this.draftFrom || (this.draftFrom && this.draftTo)) {
+                this.draftFrom = day;
+                this.draftTo = null;
+                return;
+            }
+            if (this.draftFrom && !this.draftTo) {
+                if (day < this.draftFrom) {
+                    this.draftTo = this.draftFrom;
+                    this.draftFrom = day;
+                }
+                else {
+                    this.draftTo = day;
+                }
+            }
+        };
+        this.handleDayHover = (day) => {
+            this.hoverDay = day;
+        };
+        this.handlePresetClick = (preset) => {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            let from = null;
+            let to = null;
+            if (preset === 'today') {
+                from = today;
+                to = today;
+            }
+            else if (preset === 'thisWeek') {
+                const dow = today.getDay() === 0 ? 7 : today.getDay();
+                from = new Date(today);
+                from.setDate(today.getDate() - (dow - 1));
+                to = new Date(from);
+                to.setDate(from.getDate() + 6);
+            }
+            else if (preset === 'thisMonth') {
+                from = new Date(today.getFullYear(), today.getMonth(), 1);
+                to = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+            }
+            else if (preset === 'last30Days') {
+                to = today;
+                from = new Date(today);
+                from.setDate(today.getDate() - 29);
+            }
+            else if (preset === 'last90Days') {
+                to = today;
+                from = new Date(today);
+                from.setDate(today.getDate() - 89);
+            }
+            else if (preset === 'thisYear') {
+                from = new Date(today.getFullYear(), 0, 1);
+                to = new Date(today.getFullYear(), 11, 31);
+            }
+            if (!from || !to)
+                return;
+            this.draftFrom = this.formatISO(from);
+            this.draftTo = this.formatISO(to);
+            this.viewYear = from.getFullYear();
+            this.viewMonth = from.getMonth();
+        };
+        this.handleApply = () => {
+            this.value = JSON.stringify({ from: this.draftFrom, to: this.draftTo });
+            this.coChange.emit({ from: this.draftFrom, to: this.draftTo });
+            this.isOpen = false;
+        };
+        this.handleClear = () => {
+            this.draftFrom = null;
+            this.draftTo = null;
+            this.value = '';
+            this.coClear.emit();
+            this.coChange.emit({ from: null, to: null });
+            this.isOpen = false;
+        };
+        this.prevMonth = () => {
+            if (this.viewMonth === 0) {
+                this.viewMonth = 11;
+                this.viewYear--;
+            }
+            else {
+                this.viewMonth--;
+            }
+        };
+        this.nextMonth = () => {
+            if (this.viewMonth === 11) {
+                this.viewMonth = 0;
+                this.viewYear++;
+            }
+            else {
+                this.viewMonth++;
+            }
+        };
+    }
+    onValueChange() {
+        const parsed = this.parseValue();
+        this.draftFrom = parsed.from;
+        this.draftTo = parsed.to;
+    }
+    componentWillLoad() {
+        const parsed = this.parseValue();
+        this.draftFrom = parsed.from;
+        this.draftTo = parsed.to;
+        if (parsed.from) {
+            const d = new Date(parsed.from);
+            this.viewMonth = d.getMonth();
+            this.viewYear = d.getFullYear();
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleDocumentClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick, true);
+    }
+    parseValue() {
+        if (!this.value)
+            return { from: null, to: null };
+        try {
+            const v = JSON.parse(this.value);
+            return { from: v.from || null, to: v.to || null };
+        }
+        catch (_a) {
+            return { from: null, to: null };
+        }
+    }
+    formatISO(d) {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${day}`;
+    }
+    renderTriggerLabel() {
+        if (!this.draftFrom && !this.draftTo)
+            return this.placeholder;
+        if (this.draftFrom && this.draftTo)
+            return `${this.draftFrom} → ${this.draftTo}`;
+        if (this.draftFrom)
+            return `${this.draftFrom} → …`;
+        return this.placeholder;
+    }
+    inRange(day) {
+        if (!day || !this.draftFrom)
+            return false;
+        if (this.draftFrom && this.draftTo) {
+            return day >= this.draftFrom && day <= this.draftTo;
+        }
+        if (this.draftFrom && this.hoverDay) {
+            const start = this.draftFrom < this.hoverDay ? this.draftFrom : this.hoverDay;
+            const end = this.draftFrom < this.hoverDay ? this.hoverDay : this.draftFrom;
+            return day >= start && day <= end;
+        }
+        return false;
+    }
+    renderCalendar() {
+        const monthName = new Intl.DateTimeFormat(this.locale, { month: 'long', year: 'numeric' })
+            .format(new Date(this.viewYear, this.viewMonth, 1));
+        const firstDay = new Date(this.viewYear, this.viewMonth, 1);
+        // Monday-first grid
+        const startDow = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
+        const lastDay = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+        // Day-of-week labels (Mon..Sun in the active locale).
+        const monStart = new Date(this.viewYear, this.viewMonth, 1);
+        while (monStart.getDay() !== 1)
+            monStart.setDate(monStart.getDate() - 1);
+        const dowLabels = [];
+        for (let i = 0; i < 7; i++) {
+            const d = new Date(monStart);
+            d.setDate(monStart.getDate() + i);
+            const lbl = new Intl.DateTimeFormat(this.locale, { weekday: 'short' }).format(d);
+            dowLabels.push(lbl.charAt(0).toUpperCase() + lbl.slice(1, 2));
+        }
+        // Day cells (with leading blanks for alignment)
+        const cells = [];
+        for (let i = 0; i < startDow; i++)
+            cells.push(null);
+        for (let d = 1; d <= lastDay; d++) {
+            cells.push(this.formatISO(new Date(this.viewYear, this.viewMonth, d)));
+        }
+        while (cells.length % 7 !== 0)
+            cells.push(null);
+        return (h("div", { class: "co-date-range__calendar" }, h("div", { class: "co-date-range__cal-header" }, h("button", { class: "co-date-range__nav", type: "button", onClick: this.prevMonth, "aria-label": "Previous month" }, h("co-icon", { name: "caret-left", size: 16 })), h("span", { class: "co-date-range__month-label" }, monthName), h("button", { class: "co-date-range__nav", type: "button", onClick: this.nextMonth, "aria-label": "Next month" }, h("co-icon", { name: "caret-right", size: 16 }))), h("div", { class: "co-date-range__dow" }, dowLabels.map((l, i) => h("span", { key: i }, l))), h("div", { class: "co-date-range__days" }, cells.map((day, idx) => {
+            if (!day)
+                return h("span", { class: "co-date-range__day co-date-range__day--empty", key: idx });
+            const isStart = day === this.draftFrom;
+            const isEnd = day === this.draftTo;
+            const isRange = this.inRange(day);
+            return (h("button", { key: idx, type: "button", class: {
+                    'co-date-range__day': true,
+                    'co-date-range__day--start': isStart,
+                    'co-date-range__day--end': isEnd,
+                    'co-date-range__day--in-range': isRange && !isStart && !isEnd,
+                }, onClick: () => this.handleDayClick(day), onMouseEnter: () => this.handleDayHover(day), onMouseLeave: () => this.handleDayHover(null) }, parseInt(day.split('-')[2], 10)));
+        }))));
+    }
+    renderPresets() {
+        if (!this.presets)
+            return null;
+        const items = [
+            { id: 'today', label: this.presetTodayLabel },
+            { id: 'thisWeek', label: this.presetThisWeekLabel },
+            { id: 'thisMonth', label: this.presetThisMonthLabel },
+            { id: 'last30Days', label: this.presetLast30DaysLabel },
+            { id: 'last90Days', label: this.presetLast90DaysLabel },
+            { id: 'thisYear', label: this.presetThisYearLabel },
+        ];
+        return (h("div", { class: "co-date-range__presets" }, items.map(p => (h("button", { key: p.id, type: "button", class: "co-date-range__preset", onClick: () => this.handlePresetClick(p.id) }, p.label)))));
+    }
+    render() {
+        const hasValue = !!(this.draftFrom || this.draftTo);
+        return (h("div", { key: 'd7045dc55fad85c14ea8ed05278f11a91c894e8b', class: "co-date-range", part: "root" }, this.label && h("label", { key: '9a48cd7d9498138ccb1acac2ac8b664c5543b6d1', class: "co-date-range__label", part: "label" }, this.label), h("div", { key: '09379d7ac693bce51da6e131cb60c61d3d16d226', class: {
+                'co-date-range__trigger': true,
+                'co-date-range__trigger--open': this.isOpen,
+                'co-date-range__trigger--disabled': this.disabled,
+                [`co-date-range__trigger--${this.status}`]: this.status !== 'default',
+            }, onClick: this.handleTriggerClick, part: "trigger", tabIndex: this.disabled ? -1 : 0, role: "button" }, h("co-icon", { key: '8f0cf20d2e9e39eb625112bd31b13e03e9723fa3', name: "calendar", size: 16, class: "co-date-range__icon" }), h("span", { key: '394050d776116d98e3f585bb2521b726308cd57c', class: {
+                'co-date-range__trigger-text': true,
+                'co-date-range__trigger-text--placeholder': !hasValue,
+            } }, this.renderTriggerLabel()), this.clearable && hasValue && !this.disabled && (h("button", { key: '6af816bd7d5e1e677943692b2540d5cc1547d230', class: "co-date-range__clear", type: "button", onClick: (e) => { e.stopPropagation(); this.handleClear(); }, "aria-label": "Clear" }, h("co-icon", { key: 'aeb54016fc5b9616e2c4c9656cde0a07cc784d99', name: "x-circle", weight: "fill", size: 16 }))), h("co-icon", { key: '474e9a4b815f977ffaf444f6c568c6adbce393dd', name: "caret-down", size: 14, class: "co-date-range__caret" })), this.helperText && (h("span", { key: 'afc70e80268864a59c7c93623db3542560a08ca7', class: {
+                'co-date-range__helper': true,
+                [`co-date-range__helper--${this.status}`]: this.status !== 'default',
+            }, part: "helper" }, this.helperText)), this.isOpen && (h("div", { key: 'fbfdaf36083d09423e22a578ccead616a7bab704', class: "co-date-range__popover", part: "popover" }, h("div", { key: '43275ecd90419bc6625c9bd59b3fde2fb58f2fb0', class: "co-date-range__popover-body" }, this.renderPresets(), this.renderCalendar()), h("div", { key: 'b32a4217c1f15860ae2f767a1135f35e5f9e4bb8', class: "co-date-range__footer" }, h("button", { key: 'c0c07ad3017a318184bcae0011c3713b6924b16c', type: "button", class: "co-date-range__btn co-date-range__btn--ghost", onClick: this.handleClear }, this.clearLabel), h("button", { key: '234d87a5de1e7c04cad86b50130081bcf9fa17b1', type: "button", class: "co-date-range__btn co-date-range__btn--primary", onClick: this.handleApply, disabled: !this.draftFrom || !this.draftTo }, this.applyLabel))))));
+    }
+    static get is() { return "co-date-range"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-date-range.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-date-range.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON `{from, to}` or empty string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select range'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "true"
+            },
+            "presets": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets",
+                "defaultValue": "true"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success'",
+                    "resolved": "\"default\" | \"error\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text",
+                "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale tag used by Intl.DateTimeFormat."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es'"
+            },
+            "presetTodayLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-today-label",
+                "defaultValue": "'Today'"
+            },
+            "presetThisWeekLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-this-week-label",
+                "defaultValue": "'This week'"
+            },
+            "presetThisMonthLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-this-month-label",
+                "defaultValue": "'This month'"
+            },
+            "presetLast30DaysLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-last-3-0-days-label",
+                "defaultValue": "'Last 30 days'"
+            },
+            "presetLast90DaysLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-last-9-0-days-label",
+                "defaultValue": "'Last 90 days'"
+            },
+            "presetThisYearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-this-year-label",
+                "defaultValue": "'This year'"
+            },
+            "applyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-label",
+                "defaultValue": "'Apply'"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label",
+                "defaultValue": "'Clear'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "draftFrom": {},
+            "draftTo": {},
+            "hoverDay": {},
+            "viewMonth": {},
+            "viewYear": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DateRangeValue",
+                    "resolved": "DateRangeValue",
+                    "references": {
+                        "DateRangeValue": {
+                            "location": "local",
+                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-date-range/co-date-range.tsx",
+                            "id": "src/components/co-date-range/co-date-range.tsx::DateRangeValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}