@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/esm/co-date-range-picker.entry.js

@@ -0,0 +1,376 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BKmfyPZK.js';
+import { R as RequiredMark } from './requiredMark-DFvtYtkE.js';
+import { g as getDateStrings } from './dateI18n-C1DCLOEl.js';
+import { i as isValidYMD, t as toLocalDate, p as parseISO, c as compareYMD, a as todayYMD, b as addMonths, s as startOfMonth, d as addDays, f as formatDisplay } from './dates-CyYF8IJE.js';
+
+const coDateRangePickerCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14)}.co-date-range-picker{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-range-picker__label{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);line-height:1;padding:0 var(--co-spacing-xs)}.co-date-range-picker co-popover{display:block;width:100%}.co-date-range-picker--s .co-date-range-picker__trigger{min-height:28px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--sm .co-date-range-picker__trigger{min-height:32px;padding:0 var(--co-spacing-sm)}.co-date-range-picker--lg .co-date-range-picker__trigger{min-height:48px;padding:0 var(--co-spacing-lg)}.co-date-range-picker__trigger{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);width:100%;min-height:40px;padding:0 var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);cursor:pointer;color:var(--co-semantic-text-default);box-sizing:border-box;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-date-range-picker__trigger--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-range-picker__trigger--disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker--invalid .co-date-range-picker__trigger{border-color:var(--co-semantic-status-error)}.co-date-range-picker__icon,.co-date-range-picker__caret{color:var(--co-semantic-text-muted);flex-shrink:0}.co-date-range-picker__trigger-text{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-date-range-picker__trigger-text--placeholder{color:var(--co-semantic-text-muted)}.co-date-range-picker__clear{background:none;border:0;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);display:inline-flex;align-items:center;flex-shrink:0}.co-date-range-picker__clear:hover{color:var(--co-semantic-text-default)}.co-date-range-picker__panel{display:flex;flex-direction:column;gap:var(--co-spacing-md);padding:var(--co-spacing-md);min-width:280px}.co-date-range-picker__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--co-spacing-sm)}.co-date-range-picker__body{display:flex;gap:var(--co-spacing-md);align-items:flex-start}.co-date-range-picker__body--touch{flex-direction:column;align-items:stretch}.co-date-range-picker__body--touch .co-date-range-picker__presets{flex-direction:row;flex-wrap:wrap;min-width:0;border-right:0;padding-right:0;border-bottom:1px solid var(--co-semantic-border-subtle);padding-bottom:var(--co-spacing-sm)}.co-date-range-picker__body--touch co-calendar{align-self:center}.co-date-range-picker__presets{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);min-width:120px;border-right:1px solid var(--co-semantic-border-subtle);padding-right:var(--co-spacing-md)}.co-date-range-picker__preset{text-align:left;background:none;border:0;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;color:var(--co-semantic-text-default);cursor:pointer;transition:background 0.1s ease}.co-date-range-picker__preset:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-sm);padding-top:var(--co-spacing-sm);border-top:1px solid var(--co-semantic-border-subtle)}.co-date-range-picker__btn{padding:var(--co-spacing-xs) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-size:var(--co-font-size-14);font-family:inherit;font-weight:500;cursor:pointer;border:0}.co-date-range-picker__btn--ghost{background:transparent;color:var(--co-semantic-text-default)}.co-date-range-picker__btn--ghost:hover{background:var(--co-semantic-surface-hover)}.co-date-range-picker__btn--primary{background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff)}.co-date-range-picker__btn--primary:disabled{opacity:0.5;cursor:not-allowed}.co-date-range-picker__helper{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);font-size:var(--co-font-size-14);color:var(--co-semantic-text-muted);padding:0 var(--co-spacing-xs)}.co-date-range-picker__helper--error{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-range-picker{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-date-range-picker__label{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-range-picker__label{white-space:normal}:host([layout='horizontal']) .co-date-range-picker>:not(.co-date-range-picker__label){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}`;
+
+const CoDateRangePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.coRangeStartChange = createEvent(this, "coRangeStartChange", 7);
+        this.coRangeEndChange = createEvent(this, "coRangeEndChange", 7);
+        this.coRangeChange = createEvent(this, "coRangeChange", 7);
+        this.coApply = createEvent(this, "coApply", 7);
+        this.coCancel = createEvent(this, "coCancel", 7);
+        this.coClear = createEvent(this, "coClear", 7);
+        this.coOpen = createEvent(this, "coOpen", 3);
+        this.coClose = createEvent(this, "coClose", 3);
+        /** 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)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+/** 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 [];
+}
+CoDateRangePicker.style = coDateRangePickerCss();
+
+export { CoDateRangePicker as co_date_range_picker };