@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

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

@@ -1,286 +1,39 @@
 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.
+ * @deprecated Use `<co-date-range-picker>` instead.
  *
- * 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".
+ * Thin compatibility shim kept for one release: it renders the canonical
+ * `<co-date-range-picker>` (accessible, manual input, presets, timezone-safe)
+ * and re-emits its `coApply` as the legacy `coChange`. The legacy per-preset
+ * label props are no longer honored — preset labels now come from `locale`.
  */
 export class CoDateRange {
     constructor() {
-        /** JSON `{from, to}` or empty string. */
+        /** 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. */
+        /** BCP-47 locale. */
         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++;
-            }
+        this.warned = false;
+        this.handleApply = (e) => {
+            this.value = JSON.stringify(e.detail);
+            this.coChange.emit(e.detail);
         };
     }
-    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 };
+        if (!this.warned) {
+            this.warned = true;
+            // eslint-disable-next-line no-console
+            console.warn('[cobalt] <co-date-range> is deprecated — use <co-date-range-picker>.');
         }
-        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))))));
+        return (h("co-date-range-picker", { key: '52a80ab59ff863209e62f5dcddbc674ea32a662c', value: this.value, label: this.label, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, presets: this.presets, helperText: this.helperText, locale: this.locale, applyLabel: this.applyLabel, clearLabel: this.clearLabel, onCoApply: this.handleApply, onCoClear: () => this.coClear.emit() }));
     }
     static get is() { return "co-date-range"; }
     static get encapsulation() { return "shadow"; }
@@ -308,7 +61,7 @@ export class CoDateRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "JSON `{from, to}` or empty string."
+                    "text": "JSON `{from,to}` or empty string."
                 },
                 "getter": false,
                 "setter": false,
@@ -416,26 +169,6 @@ export class CoDateRange {
                 "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,
@@ -468,7 +201,7 @@ export class CoDateRange {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "BCP-47 locale tag used by Intl.DateTimeFormat."
+                    "text": "BCP-47 locale."
                 },
                 "getter": false,
                 "setter": false,
@@ -476,136 +209,16 @@ export class CoDateRange {
                 "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",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -613,19 +226,18 @@ export class CoDateRange {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "apply-label",
-                "defaultValue": "'Apply'"
+                "attribute": "apply-label"
             },
             "clearLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -633,21 +245,10 @@ export class CoDateRange {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "clear-label",
-                "defaultValue": "'Clear'"
+                "attribute": "clear-label"
             }
         };
     }
-    static get states() {
-        return {
-            "isOpen": {},
-            "draftFrom": {},
-            "draftTo": {},
-            "hoverDay": {},
-            "viewMonth": {},
-            "viewYear": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "coChange",
@@ -657,16 +258,17 @@ export class CoDateRange {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Fires (with `{from,to}`) when the user applies a range."
                 },
                 "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"
+                            "location": "import",
+                            "path": "../co-date-range-picker/co-date-range-picker",
+                            "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue",
+                            "referenceLocation": "DateRangeValue"
                         }
                     }
                 }
@@ -688,10 +290,4 @@ export class CoDateRange {
             }];
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "onValueChange"
-            }];
-    }
 }