@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,1142 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { addDays, addMonths, compareYMD, formatDisplay, isValidYMD, parseISO, startOfMonth, toLocalDate, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
+import { getDateStrings } from "../../utils/dateI18n";
+/**
+ * Date range picker: two manual date fields (Desde/Hasta) + a range calendar +
+ * quick presets, inside a popover with a Cancel/Clear/Apply footer.
+ *
+ * Value is a JSON string `{"from":"YYYY-MM-DD","to":"YYYY-MM-DD"}` (or '' when
+ * unset) so it survives JSX attribute serialization. The trigger shows the
+ * COMMITTED range; the popover edits a draft that only commits on Apply (or, if
+ * `applyOnSelect`, debounced once both ends are chosen — for table filters).
+ */
+export class CoDateRangePicker {
+    constructor() {
+        /** JSON `{from,to}` or '' (empty). */
+        this.value = '';
+        this.locale = 'es-CO';
+        this.displayFormat = 'd MMM yyyy';
+        this.firstDayOfWeek = 1;
+        /** Show the quick-preset column. */
+        this.presets = true;
+        /** Allow from === to. */
+        this.allowSameDay = true;
+        this.clearable = true;
+        /** Commit (emit coApply) as soon as a full valid range is picked, debounced. */
+        this.applyOnSelect = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.invalid = false;
+        /** Whether the field is required (renders a required marker on the label). */
+        this.required = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Trigger size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        this.placement = 'bottom-start';
+        this.open = false;
+        /** Max viewport width (px) that renders the picker as a bottom sheet. */
+        this.mobileBreakpoint = 600;
+        /** Working range while the popover is open (commits on Apply). */
+        this.draftFrom = null;
+        this.draftTo = null;
+        /** True when the viewport is at/under `mobileBreakpoint`. */
+        this.isMobile = false;
+        this.mqlHandler = (e) => {
+            this.isMobile = e.matches;
+        };
+        this.onPopoverOpen = () => {
+            if (!this.open) {
+                this.open = true;
+                this.coOpen.emit();
+            }
+            this.syncDraftFromValue();
+        };
+        this.onPopoverClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.coClose.emit();
+            }
+            // Revert the draft to the committed value. After Apply/Clear the committed
+            // value already equals the draft, so this is a no-op there; for outside
+            // click / Cancel / Escape it discards the in-progress edit.
+            this.syncDraftFromValue();
+        };
+        this.onRootKeyDown = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.stopPropagation();
+                this.handleCancel();
+            }
+        };
+        this.onCalendarRange = (e) => {
+            this.updateDraft(e.detail.start, e.detail.end);
+        };
+        this.onFromChange = (e) => {
+            this.updateDraft(e.detail, this.draftTo);
+        };
+        this.onToChange = (e) => {
+            this.updateDraft(this.draftFrom, e.detail);
+        };
+        /** Open the mobile bottom sheet (desktop opens via co-popover's trigger click). */
+        this.openSheet = () => {
+            if (this.disabled || this.open)
+                return;
+            this.syncDraftFromValue();
+            this.open = true;
+            this.coOpen.emit();
+        };
+        // ── Footer actions ─────────────────────────────────────────
+        this.handleApply = () => {
+            if (!this.canApply)
+                return;
+            this.value = JSON.stringify({ from: this.draftFrom, to: this.draftTo });
+            this.coApply.emit({ from: this.draftFrom, to: this.draftTo });
+            this.open = false; // → onPopoverClose (draft already == committed)
+        };
+        this.handleCancel = () => {
+            this.coCancel.emit();
+            this.syncDraftFromValue(); // revert (covers the mobile drawer path too)
+            this.open = false;
+        };
+        this.handleClear = () => {
+            this.value = '';
+            this.draftFrom = null;
+            this.draftTo = null;
+            this.coClear.emit();
+            this.coRangeChange.emit({ from: null, to: null });
+            this.open = false;
+        };
+    }
+    componentWillLoad() {
+        const v = this.parseValue();
+        this.draftFrom = v.from;
+        this.draftTo = v.to;
+    }
+    connectedCallback() {
+        this.mql = window.matchMedia(`(max-width: ${this.mobileBreakpoint}px)`);
+        this.isMobile = this.mql.matches;
+        this.mql.addEventListener('change', this.mqlHandler);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mqlHandler);
+    }
+    onValueChange() {
+        const v = this.parseValue();
+        this.draftFrom = v.from;
+        this.draftTo = v.to;
+    }
+    parseValue() {
+        if (!this.value)
+            return { from: null, to: null };
+        try {
+            const v = JSON.parse(this.value);
+            return {
+                from: isValidYMD(v.from) ? v.from : null,
+                to: isValidYMD(v.to) ? v.to : null,
+            };
+        }
+        catch (_a) {
+            return { from: null, to: null };
+        }
+    }
+    get committed() {
+        return this.parseValue();
+    }
+    inclusiveDays(from, to) {
+        const ms = toLocalDate(parseISO(to)).getTime() - toLocalDate(parseISO(from)).getTime();
+        return Math.round(ms / 86400000) + 1;
+    }
+    get canApply() {
+        const f = this.draftFrom;
+        const t = this.draftTo;
+        if (!f || !t)
+            return false;
+        if (compareYMD(f, t) > 0)
+            return false;
+        if (!this.allowSameDay && compareYMD(f, t) === 0)
+            return false;
+        const days = this.inclusiveDays(f, t);
+        if (this.minRangeDays && days < this.minRangeDays)
+            return false;
+        if (this.maxRangeDays && days > this.maxRangeDays)
+            return false;
+        return true;
+    }
+    // ── Open / close + draft lifecycle ─────────────────────────
+    syncDraftFromValue() {
+        const v = this.parseValue();
+        this.draftFrom = v.from;
+        this.draftTo = v.to;
+    }
+    // ── Draft edits ────────────────────────────────────────────
+    updateDraft(from, to) {
+        const prevFrom = this.draftFrom;
+        const prevTo = this.draftTo;
+        this.draftFrom = from;
+        this.draftTo = to;
+        if (from !== prevFrom)
+            this.coRangeStartChange.emit(from);
+        if (to !== prevTo)
+            this.coRangeEndChange.emit(to);
+        this.coRangeChange.emit({ from, to });
+        if (this.applyOnSelect && this.canApply)
+            this.scheduleApply();
+    }
+    scheduleApply() {
+        clearTimeout(this.applyTimer);
+        this.applyTimer = setTimeout(() => {
+            if (this.canApply)
+                this.handleApply();
+        }, 250);
+    }
+    // ── Presets ────────────────────────────────────────────────
+    applyPreset(id) {
+        const today = todayYMD();
+        let from = null;
+        let to = null;
+        switch (id) {
+            case 'today':
+                from = today;
+                to = today;
+                break;
+            case 'yesterday':
+                from = addDays(today, -1);
+                to = from;
+                break;
+            case 'last7Days':
+                to = today;
+                from = addDays(today, -6);
+                break;
+            case 'last14Days':
+                to = today;
+                from = addDays(today, -13);
+                break;
+            case 'last30Days':
+                to = today;
+                from = addDays(today, -29);
+                break;
+            case 'last90Days':
+                to = today;
+                from = addDays(today, -89);
+                break;
+            case 'thisWeek':
+                from = startOfWeek(today, this.firstDayOfWeek);
+                to = addDays(from, 6);
+                break;
+            case 'thisMonth':
+                from = startOfMonth(today);
+                to = endOfMonth(today);
+                break;
+            case 'lastMonth': {
+                const lm = addMonths(today, -1);
+                from = startOfMonth(lm);
+                to = endOfMonth(lm);
+                break;
+            }
+            case 'thisYear': {
+                const y = parseISO(today).year;
+                from = `${y}-01-01`;
+                to = `${y}-12-31`;
+                break;
+            }
+            case 'lastYear': {
+                const y = parseISO(today).year - 1;
+                from = `${y}-01-01`;
+                to = `${y}-12-31`;
+                break;
+            }
+            case 'custom':
+                from = null;
+                to = null;
+                break;
+        }
+        this.updateDraft(from, to);
+    }
+    get hasCommitted() {
+        const c = this.committed;
+        return !!(c.from || c.to);
+    }
+    triggerText(t) {
+        const c = this.committed;
+        const f = c.from ? formatDisplay(c.from, this.displayFormat, this.locale) : null;
+        const to = c.to ? formatDisplay(c.to, this.displayFormat, this.locale) : null;
+        if (f && to)
+            return `${f} → ${to}`;
+        if (f)
+            return `${f} → …`;
+        return this.placeholder || t.setDate; // `||`: empty string → localized default
+    }
+    presetItems(t) {
+        const DEFAULT_PRESETS = [
+            'today',
+            'yesterday',
+            'last7Days',
+            'last30Days',
+            'thisWeek',
+            'thisMonth',
+            'lastMonth',
+            'custom',
+        ];
+        const ids = normalizeStringArray(this.presetIds);
+        return (ids.length ? ids : DEFAULT_PRESETS).map((id) => {
+            var _a;
+            return ({
+                id,
+                label: (_a = t[id]) !== null && _a !== void 0 ? _a : id,
+            });
+        });
+    }
+    renderTriggerChildren(t, showClear) {
+        var _a;
+        return [
+            h("co-icon", { name: "calendar", size: 16, class: "co-date-range-picker__icon" }),
+            h("span", { class: {
+                    'co-date-range-picker__trigger-text': true,
+                    'co-date-range-picker__trigger-text--placeholder': !this.hasCommitted,
+                } }, this.triggerText(t)),
+            showClear && (h("button", { class: "co-date-range-picker__clear", type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleClear();
+                }, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clear }, h("co-icon", { name: "x-circle", size: 16, weight: "fill" }))),
+            h("co-icon", { name: "caret-down", size: 14, class: "co-date-range-picker__caret" }),
+        ];
+    }
+    renderPanel(t, touch) {
+        var _a, _b, _c, _d, _e, _f;
+        return (h("div", { class: "co-date-range-picker__panel" }, h("div", { class: "co-date-range-picker__fields" }, h("co-date-field", { class: "co-date-range-picker__field", label: (_a = this.fromLabel) !== null && _a !== void 0 ? _a : t.from, value: this.draftFrom, min: this.min, max: (_b = this.draftTo) !== null && _b !== void 0 ? _b : this.max, locale: this.locale, displayFormat: this.displayFormat, clearable: false, onCoChange: this.onFromChange }), h("co-date-field", { class: "co-date-range-picker__field", label: (_c = this.toLabel) !== null && _c !== void 0 ? _c : t.to, value: this.draftTo, min: (_d = this.draftFrom) !== null && _d !== void 0 ? _d : this.min, max: this.max, locale: this.locale, displayFormat: this.displayFormat, clearable: false, onCoChange: this.onToChange })), h("div", { class: { 'co-date-range-picker__body': true, 'co-date-range-picker__body--touch': touch } }, this.presets && (h("div", { class: "co-date-range-picker__presets" }, this.presetItems(t).map((p) => (h("button", { key: p.id, type: "button", class: "co-date-range-picker__preset", onClick: () => this.applyPreset(p.id) }, p.label))))), h("co-calendar", { mode: "range", "data-touch": touch ? '' : undefined, rangeStart: this.draftFrom, rangeEnd: this.draftTo, min: this.min, max: this.max, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, onCoRangeSelect: this.onCalendarRange })), h("div", { class: "co-date-range-picker__footer" }, h("button", { type: "button", class: "co-date-range-picker__btn co-date-range-picker__btn--ghost", onClick: this.handleCancel }, (_e = this.cancelLabel) !== null && _e !== void 0 ? _e : t.cancel), h("button", { type: "button", class: "co-date-range-picker__btn co-date-range-picker__btn--primary", disabled: !this.canApply, onClick: this.handleApply }, (_f = this.applyLabel) !== null && _f !== void 0 ? _f : t.apply))));
+    }
+    renderHelper(isInvalid, helper) {
+        if (!helper)
+            return null;
+        return (h("div", { class: {
+                'co-date-range-picker__helper': true,
+                'co-date-range-picker__helper--error': isInvalid,
+            }, part: "helper" }, isInvalid && h("co-icon", { name: "warning-circle", size: 14 }), h("span", null, helper)));
+    }
+    render() {
+        const t = getDateStrings(this.locale);
+        const isInvalid = this.invalid;
+        const helper = isInvalid ? this.errorMessage : this.helperText;
+        const showClear = this.clearable && this.hasCommitted && !this.disabled && !this.readonly;
+        const triggerClasses = {
+            'co-date-range-picker__trigger': true,
+            'co-date-range-picker__trigger--open': this.open,
+            'co-date-range-picker__trigger--disabled': this.disabled,
+        };
+        if (this.isMobile) {
+            return (h("div", { class: { 'co-date-range-picker': true, 'co-date-range-picker--invalid': isInvalid, [`co-date-range-picker--${this.size}`]: true }, onKeyDown: this.onRootKeyDown }, this.label && h("label", { class: "co-date-range-picker__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), h("div", { class: triggerClasses, part: "trigger", role: "button", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', onClick: this.openSheet }, this.renderTriggerChildren(t, showClear)), h("co-drawer", { position: "bottom", open: this.open, heading: t.selectDate, onCoClose: this.handleCancel }, this.renderPanel(t, true)), this.renderHelper(isInvalid, helper)));
+        }
+        return (h("div", { class: { 'co-date-range-picker': true, 'co-date-range-picker--invalid': isInvalid, [`co-date-range-picker--${this.size}`]: true }, onKeyDown: this.onRootKeyDown }, this.label && h("label", { class: "co-date-range-picker__label", part: "label" }, this.label, h(RequiredMark, { required: this.required })), h("co-popover", { open: this.open, placement: this.placement, offset: 4, closeOnEscape: false, onCoOpen: this.onPopoverOpen, onCoClose: this.onPopoverClose }, h("div", { slot: "trigger", class: triggerClasses, part: "trigger", role: "button", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false' }, this.renderTriggerChildren(t, showClear)), this.open && this.renderPanel(t, false)), this.renderHelper(isInvalid, helper)));
+    }
+    static get is() { return "co-date-range-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-date-range-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-date-range-picker.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)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-format",
+                "defaultValue": "'d MMM yyyy'"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "presets": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the quick-preset column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets",
+                "defaultValue": "true"
+            },
+            "presetIds": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Which presets to show, from the built-in catalog: today, yesterday,\nlast7Days, last14Days, last30Days, last90Days, thisWeek, thisMonth,\nlastMonth, thisYear, lastYear, custom. Labels come from `locale`; dates are\ncomputed tz-safe. Accepts a string[] or JSON/comma string. Defaults to a\nsensible set when omitted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset-ids"
+            },
+            "allowSameDay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow from === to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-same-day",
+                "defaultValue": "true"
+            },
+            "minRangeDays": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum span (inclusive days)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-range-days"
+            },
+            "maxRangeDays": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum span (inclusive days)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-range-days"
+            },
+            "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"
+            },
+            "applyOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Commit (emit coApply) as soon as a full valid range is picked, debounced."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-on-select",
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the field is required (renders a required marker on the label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/positioning",
+                            "id": "src/utils/positioning.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "applyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-label"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label"
+            },
+            "fromLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "from-label"
+            },
+            "toLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "to-label"
+            },
+            "mobileBreakpoint": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max viewport width (px) that renders the picker as a bottom sheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-breakpoint",
+                "defaultValue": "600"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "draftFrom": {},
+            "draftTo": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coRangeStartChange",
+                "name": "coRangeStartChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                }
+            }, {
+                "method": "coRangeEndChange",
+                "name": "coRangeEndChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                }
+            }, {
+                "method": "coRangeChange",
+                "name": "coRangeChange",
+                "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-picker/co-date-range-picker.tsx",
+                            "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "coApply",
+                "name": "coApply",
+                "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-picker/co-date-range-picker.tsx",
+                            "id": "src/components/co-date-range-picker/co-date-range-picker.tsx::DateRangeValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "coCancel",
+                "name": "coCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coClear",
+                "name": "coClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coOpen",
+                "name": "coOpen",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coClose",
+                "name": "coClose",
+                "bubbles": false,
+                "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"
+            }];
+    }
+}
+/** Start-of-week for a date (local, tz-safe). */
+function startOfWeek(value, firstDayOfWeek) {
+    const ymd = parseISO(value);
+    if (!ymd)
+        return value;
+    const dow = toLocalDate(ymd).getDay();
+    const back = (dow - firstDayOfWeek + 7) % 7;
+    return addDays(value, -back);
+}
+/** Last day of the month for a date. */
+function endOfMonth(value) {
+    return addDays(startOfMonth(addMonths(value, 1)), -1);
+}
+/** Accept a string[] or JSON/comma string (for raw-HTML attribute usage). */
+function normalizeStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        const t = v.trim();
+        try {
+            const parsed = JSON.parse(t);
+            if (Array.isArray(parsed))
+                return parsed.map(String);
+        }
+        catch (_a) {
+            /* not JSON — fall back to comma-split */
+        }
+        return t.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}