@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/cjs/co-calendar_3.cjs.entry.js

@@ -0,0 +1,692 @@
+'use strict';
+
+var index = require('./index-BumlM92r.js');
+var dateI18n = require('./dateI18n-BdiNAl0_.js');
+var dates = require('./dates-D8D-aS5d.js');
+var requiredMark = require('./requiredMark-CqMGt1H1.js');
+
+const coCalendarCss = () => `:host{display:inline-block;font-family:var(--co-font-family-primary);--co-calendar-day-size:36px}:host([data-touch]){--co-calendar-day-size:44px}.co-calendar{display:flex;flex-direction:column;gap:var(--co-spacing-sm);width:max-content}.co-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-calendar__month{font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize}.co-calendar__title{display:inline-flex;align-items:center;gap:var(--co-spacing-xxs);background:none;border:0;cursor:pointer;font-family:inherit;font-size:var(--co-font-size-14);font-weight:600;color:var(--co-semantic-text-default);text-transform:capitalize;padding:var(--co-spacing-xxs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs)}.co-calendar__title:hover{background:var(--co-semantic-surface-hover)}.co-calendar__title:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__title-caret{color:var(--co-semantic-text-muted)}.co-calendar__panel{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--co-spacing-xs);width:calc(var(--co-calendar-day-size) * 7 + 12px);padding-top:var(--co-spacing-xs)}.co-calendar__cell{height:calc(var(--co-calendar-day-size) + 8px);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--co-border-radius-xs);font-family:inherit;font-size:var(--co-font-size-14);color:var(--co-semantic-text-default);cursor:pointer;text-transform:capitalize;transition:background 0.1s ease, color 0.1s ease, border-color 0.1s ease}.co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected){background:var(--co-semantic-surface-hover)}.co-calendar__cell:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__cell--muted{color:var(--co-semantic-text-muted)}.co-calendar__cell--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__cell--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__cell--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-calendar__nav{background:none;border:0;cursor:pointer;padding:var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);display:inline-flex;align-items:center;color:var(--co-semantic-text-default)}.co-calendar__nav:hover{background:var(--co-semantic-surface-hover)}.co-calendar__nav:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__grid{display:flex;flex-direction:column;gap:2px}.co-calendar__row{display:grid;grid-template-columns:repeat(7, var(--co-calendar-day-size));gap:2px}.co-calendar__row--dow{margin-bottom:2px}.co-calendar__dow{height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10, 10px);font-weight:600;color:var(--co-semantic-text-muted);text-transform:uppercase;letter-spacing:0.04em}.co-calendar__day{width:var(--co-calendar-day-size);height:var(--co-calendar-day-size);display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;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, color 0.1s ease, border-color 0.1s ease}.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected){background:var(--co-semantic-surface-hover)}.co-calendar__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.co-calendar__day--outside{color:var(--co-semantic-text-muted)}.co-calendar__day--today{border-color:var(--co-color-primary-azul);font-weight:600}.co-calendar__day--selected{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--disabled{color:var(--co-semantic-text-disabled);cursor:not-allowed;pointer-events:none}.co-calendar__day--in-range{background:var(--co-semantic-surface-hover);border-radius:0;color:var(--co-semantic-text-default)}.co-calendar__day--range-start,.co-calendar__day--range-end{background:var(--co-color-primary-azul);border-color:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);font-weight:600}.co-calendar__day--range-start:not(.co-calendar__day--range-end){border-top-right-radius:0;border-bottom-right-radius:0}.co-calendar__day--range-end:not(.co-calendar__day--range-start){border-top-left-radius:0;border-bottom-left-radius:0}`;
+
+const CoCalendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coSelect = index.createEvent(this, "coSelect", 7);
+        this.coRangeSelect = index.createEvent(this, "coRangeSelect", 7);
+        /** Selection mode. */
+        this.mode = 'single';
+        /** BCP-47 locale used for month/weekday labels. */
+        this.locale = 'es-CO';
+        /** First day of the week: 0=Sunday .. 6=Saturday. Default 1 (Monday). */
+        this.firstDayOfWeek = 1;
+        /** Hovered day for range preview (range mode, pointer only). */
+        this.hoverDay = null;
+        /** Header view: day grid, month picker, or year picker. */
+        this.view = 'days';
+        /** When set, focus the matching day cell after the next render. */
+        this.shouldFocusGrid = false;
+        this.handleDayHover = (day) => {
+            if (this.mode === 'range')
+                this.hoverDay = day;
+        };
+        /** Header prev/next — steps by month (days), year (months) or decade (years). */
+        this.handlePrev = () => this.step(-1);
+        this.handleNext = () => this.step(1);
+        /** Title click zooms out: days → months → years; years → back to days. */
+        this.toggleView = () => {
+            this.view = this.view === 'days' ? 'months' : this.view === 'months' ? 'years' : 'days';
+        };
+        this.handleGridKeyDown = (e) => {
+            const cur = this.focused;
+            let handled = true;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    this.moveFocus(dates.addDays(cur, -1));
+                    break;
+                case 'ArrowRight':
+                    this.moveFocus(dates.addDays(cur, 1));
+                    break;
+                case 'ArrowUp':
+                    this.moveFocus(dates.addDays(cur, -7));
+                    break;
+                case 'ArrowDown':
+                    this.moveFocus(dates.addDays(cur, 7));
+                    break;
+                case 'Home':
+                    this.moveFocus(startOfWeek(cur, this.firstDayOfWeek));
+                    break;
+                case 'End':
+                    this.moveFocus(dates.addDays(startOfWeek(cur, this.firstDayOfWeek), 6));
+                    break;
+                case 'PageUp':
+                    this.moveFocus(dates.addMonths(cur, e.shiftKey ? -12 : -1));
+                    break;
+                case 'PageDown':
+                    this.moveFocus(dates.addMonths(cur, e.shiftKey ? 12 : 1));
+                    break;
+                case 'Enter':
+                case ' ':
+                    this.selectDay(cur);
+                    break;
+                default:
+                    handled = false;
+            }
+            if (handled) {
+                // Stop Enter/Space from reaching an enclosing <form> and submitting,
+                // and stop arrows from scrolling the page.
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+    }
+    componentWillLoad() {
+        var _a;
+        const anchor = (_a = this.anchorValue) !== null && _a !== void 0 ? _a : dates.todayYMD();
+        const a = dates.parseISO(anchor);
+        this.viewYear = a.year;
+        this.viewMonth = a.month;
+        this.focused = this.initialFocus();
+    }
+    onValueChange() {
+        if (!this.selectedValue)
+            return;
+        const a = dates.parseISO(this.selectedValue);
+        this.viewYear = a.year;
+        this.viewMonth = a.month;
+        this.focused = this.selectedValue;
+    }
+    /** Move keyboard focus into the grid (used by the picker when the popover opens). */
+    async focusGrid() {
+        this.shouldFocusGrid = true;
+        this.focusFocusedCell();
+    }
+    get selectedValue() {
+        return dates.isValidYMD(this.value) ? this.value : null;
+    }
+    get rangeStartV() {
+        return dates.isValidYMD(this.rangeStart) ? this.rangeStart : null;
+    }
+    get rangeEndV() {
+        return dates.isValidYMD(this.rangeEnd) ? this.rangeEnd : null;
+    }
+    /** The date the grid should anchor on / focus first. */
+    get anchorValue() {
+        return this.mode === 'range' ? this.rangeStartV : this.selectedValue;
+    }
+    get disabledOpts() {
+        return {
+            min: this.min,
+            max: this.max,
+            disabledDates: normalizeStringArray(this.disabledDates),
+            disabledDaysOfWeek: normalizeNumberArray(this.disabledDaysOfWeek),
+        };
+    }
+    isDayDisabled(value) {
+        return dates.isDisabled(value, this.disabledOpts);
+    }
+    /** Best initial focus: selected/start → today → first enabled day of view → 1st. */
+    initialFocus() {
+        const anchor = this.anchorValue;
+        if (anchor && !this.isDayDisabled(anchor))
+            return anchor;
+        const today = dates.todayYMD();
+        const t = dates.parseISO(today);
+        if (t.year === this.viewYear && t.month === this.viewMonth && !this.isDayDisabled(today)) {
+            return today;
+        }
+        const first = `${String(this.viewYear).padStart(4, '0')}-${String(this.viewMonth).padStart(2, '0')}-01`;
+        let cur = first;
+        for (let i = 0; i < 31; i++) {
+            const d = dates.parseISO(cur);
+            if (!d || d.month !== this.viewMonth)
+                break;
+            if (!this.isDayDisabled(cur))
+                return cur;
+            cur = dates.addDays(cur, 1);
+        }
+        return first;
+    }
+    selectDay(value) {
+        if (this.isDayDisabled(value))
+            return;
+        this.focused = value;
+        if (this.mode === 'range') {
+            this.selectRangeDay(value);
+        }
+        else {
+            this.coSelect.emit(value);
+        }
+    }
+    /**
+     * Range click model (controlled by rangeStart/rangeEnd):
+     *   - no start, or both set → start = day, end = null
+     *   - start set, no end → second click sets end (swaps if before start)
+     */
+    selectRangeDay(day) {
+        const start = this.rangeStartV;
+        const end = this.rangeEndV;
+        let next;
+        if (!start || (start && end)) {
+            next = { start: day, end: null };
+        }
+        else if (dates.compareYMD(day, start) < 0) {
+            next = { start: day, end: start };
+        }
+        else {
+            next = { start, end: day };
+        }
+        this.coRangeSelect.emit(next);
+    }
+    moveFocus(next) {
+        this.focused = next;
+        const n = dates.parseISO(next);
+        if (n.year !== this.viewYear || n.month !== this.viewMonth) {
+            this.viewYear = n.year;
+            this.viewMonth = n.month;
+        }
+        this.shouldFocusGrid = true;
+    }
+    step(dir) {
+        if (this.view === 'days') {
+            const m = dates.addMonths(`${this.viewYear}-${String(this.viewMonth).padStart(2, '0')}-01`, dir);
+            const p = dates.parseISO(m);
+            this.viewYear = p.year;
+            this.viewMonth = p.month;
+        }
+        else if (this.view === 'months') {
+            this.viewYear += dir;
+        }
+        else {
+            this.viewYear += dir * 10;
+        }
+    }
+    selectMonth(month) {
+        this.viewMonth = month;
+        this.view = 'days';
+    }
+    selectYear(year) {
+        this.viewYear = year;
+        this.view = 'months';
+    }
+    get decadeStart() {
+        return Math.floor(this.viewYear / 10) * 10;
+    }
+    /** {year, month} of the active selection (single value or range start). */
+    get selectedYM() {
+        const v = this.mode === 'range' ? this.rangeStartV : this.selectedValue;
+        if (!v)
+            return null;
+        const ymd = dates.parseISO(v);
+        return { year: ymd.year, month: ymd.month };
+    }
+    isMonthDisabled(year, month) {
+        const first = `${String(year).padStart(4, '0')}-${String(month).padStart(2, '0')}-01`;
+        const last = dates.addDays(dates.startOfMonth(dates.addMonths(first, 1)), -1);
+        if (this.min && dates.compareYMD(last, this.min) < 0)
+            return true;
+        if (this.max && dates.compareYMD(first, this.max) > 0)
+            return true;
+        return false;
+    }
+    isYearDisabled(year) {
+        const first = `${String(year).padStart(4, '0')}-01-01`;
+        const last = `${String(year).padStart(4, '0')}-12-31`;
+        if (this.min && dates.compareYMD(last, this.min) < 0)
+            return true;
+        if (this.max && dates.compareYMD(first, this.max) > 0)
+            return true;
+        return false;
+    }
+    componentDidRender() {
+        if (this.shouldFocusGrid) {
+            this.shouldFocusGrid = false;
+            this.focusFocusedCell();
+        }
+    }
+    focusFocusedCell() {
+        var _a;
+        const cell = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${this.focused}"]`);
+        cell === null || cell === void 0 ? void 0 : cell.focus();
+    }
+    /** Range endpoint/in-range flags for a cell, accounting for hover preview. */
+    rangeFlags(value) {
+        const start = this.rangeStartV;
+        const end = this.rangeEndV;
+        if (!start)
+            return { isStart: false, isEnd: false, inRange: false };
+        const previewTarget = end !== null && end !== void 0 ? end : (this.hoverDay && !end ? this.hoverDay : null);
+        if (!previewTarget) {
+            return { isStart: dates.compareYMD(value, start) === 0, isEnd: false, inRange: false };
+        }
+        const lo = dates.compareYMD(start, previewTarget) <= 0 ? start : previewTarget;
+        const hi = dates.compareYMD(start, previewTarget) <= 0 ? previewTarget : start;
+        return {
+            isStart: dates.compareYMD(value, lo) === 0,
+            isEnd: dates.compareYMD(value, hi) === 0,
+            inRange: dates.compareYMD(value, lo) > 0 && dates.compareYMD(value, hi) < 0,
+        };
+    }
+    dayClass(value, inMonth, disabled) {
+        const isToday = dates.compareYMD(value, dates.todayYMD()) === 0;
+        if (this.mode === 'range') {
+            const { isStart, isEnd, inRange } = this.rangeFlags(value);
+            const isEndpoint = isStart || isEnd;
+            return {
+                'co-calendar__day': true,
+                'co-calendar__day--outside': !inMonth,
+                'co-calendar__day--today': isToday && !isEndpoint && !inRange,
+                'co-calendar__day--range-start': isStart,
+                'co-calendar__day--range-end': isEnd,
+                'co-calendar__day--in-range': inRange,
+                'co-calendar__day--disabled': disabled,
+            };
+        }
+        const selected = this.selectedValue;
+        const isSelected = !!selected && dates.compareYMD(value, selected) === 0;
+        return {
+            'co-calendar__day': true,
+            'co-calendar__day--outside': !inMonth,
+            'co-calendar__day--today': isToday && !isSelected,
+            'co-calendar__day--selected': isSelected,
+            'co-calendar__day--disabled': disabled,
+        };
+    }
+    headerTitle() {
+        if (this.view === 'months')
+            return String(this.viewYear);
+        if (this.view === 'years')
+            return `${this.decadeStart}–${this.decadeStart + 9}`;
+        return dates.getMonthLabel(this.viewYear, this.viewMonth, this.locale, 'long');
+    }
+    renderDays(t) {
+        const monthLabel = dates.getMonthLabel(this.viewYear, this.viewMonth, this.locale, 'long');
+        const shortLabels = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
+        const longLabels = dates.getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
+        const matrix = dates.getMonthMatrix(this.viewYear, this.viewMonth, this.firstDayOfWeek);
+        return (index.h("div", { class: "co-calendar__grid", part: "grid", role: "grid", "aria-label": monthLabel, onKeyDown: this.handleGridKeyDown }, index.h("div", { class: "co-calendar__row co-calendar__row--dow", role: "row" }, shortLabels.map((lbl, i) => (index.h("span", { class: "co-calendar__dow", role: "columnheader", "aria-label": longLabels[i] }, lbl)))), matrix.map((week) => (index.h("div", { class: "co-calendar__row", role: "row" }, week.map((cell) => {
+            const disabled = this.isDayDisabled(cell.value);
+            const isFocused = dates.compareYMD(cell.value, this.focused) === 0;
+            const isToday = dates.compareYMD(cell.value, dates.todayYMD()) === 0;
+            let isSelectedAria;
+            if (this.mode === 'range') {
+                const { isStart, isEnd } = this.rangeFlags(cell.value);
+                isSelectedAria = isStart || isEnd;
+            }
+            else {
+                const selected = this.selectedValue;
+                isSelectedAria = !!selected && dates.compareYMD(cell.value, selected) === 0;
+            }
+            const dayNum = dates.parseISO(cell.value).day;
+            return (index.h("button", { type: "button", role: "gridcell", "data-date": cell.value, class: this.dayClass(cell.value, cell.inMonth, disabled), tabIndex: isFocused ? 0 : -1, "aria-selected": isSelectedAria ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": dates.getFullDateLabel(cell.value, this.locale), onClick: () => this.selectDay(cell.value), onMouseEnter: () => this.handleDayHover(cell.value), onMouseLeave: () => this.handleDayHover(null) }, dayNum));
+        }))))));
+    }
+    renderMonths() {
+        const sel = this.selectedYM;
+        const now = new Date();
+        return (index.h("div", { class: "co-calendar__panel", part: "grid" }, Array.from({ length: 12 }, (_, i) => {
+            const month = i + 1;
+            const name = new Intl.DateTimeFormat(this.locale, { month: 'short' }).format(new Date(this.viewYear, i, 1));
+            const disabled = this.isMonthDisabled(this.viewYear, month);
+            const isSelected = !!sel && sel.year === this.viewYear && sel.month === month;
+            const isCurrent = now.getFullYear() === this.viewYear && now.getMonth() === i;
+            return (index.h("button", { type: "button", class: {
+                    'co-calendar__cell': true,
+                    'co-calendar__cell--selected': isSelected,
+                    'co-calendar__cell--today': isCurrent && !isSelected,
+                    'co-calendar__cell--disabled': disabled,
+                }, disabled: disabled, "aria-current": isCurrent ? 'date' : undefined, onClick: () => this.selectMonth(month) }, name));
+        })));
+    }
+    renderYears() {
+        const sel = this.selectedYM;
+        const nowYear = new Date().getFullYear();
+        const start = this.decadeStart - 1;
+        return (index.h("div", { class: "co-calendar__panel", part: "grid" }, Array.from({ length: 12 }, (_, i) => {
+            const year = start + i;
+            const disabled = this.isYearDisabled(year);
+            const isSelected = !!sel && sel.year === year;
+            const isCurrent = nowYear === year;
+            return (index.h("button", { type: "button", class: {
+                    'co-calendar__cell': true,
+                    'co-calendar__cell--muted': year < this.decadeStart || year > this.decadeStart + 9,
+                    'co-calendar__cell--selected': isSelected,
+                    'co-calendar__cell--today': isCurrent && !isSelected,
+                    'co-calendar__cell--disabled': disabled,
+                }, disabled: disabled, "aria-current": isCurrent ? 'date' : undefined, onClick: () => this.selectYear(year) }, year));
+        })));
+    }
+    render() {
+        var _a, _b;
+        const t = dateI18n.getDateStrings(this.locale);
+        return (index.h("div", { key: '7320bd2eb0ee092cf3499bd1d40d05cceb26a32f', class: "co-calendar", part: "root" }, index.h("div", { key: '1271d1d9a335b8d8a5bf206351e5b00a8e2f0528', class: "co-calendar__header", part: "header" }, index.h("button", { key: '456e7a68d6a910c8495e5cf7eeabd7fe13dce120', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, index.h("co-icon", { key: '84eefee59bfec282afd4e4ec66b5c73f1a96ee7f', name: "caret-left", size: 16 })), index.h("button", { key: 'bd214b4dc78e77bed5038bf6e9ce44f401857518', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), index.h("co-icon", { key: 'fb3eec407771f96375dfd6451065e20f627c3516', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), index.h("button", { key: '6063b0cbb2f4bef653e25b1087f43c8a9141dbac', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, index.h("co-icon", { key: '24d805b7ba812a0b3f33e58714e0378ca7c03944', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+/** Monday-first (or configurable) start-of-week for a date. */
+function startOfWeek(value, firstDayOfWeek) {
+    const ymd = dates.parseISO(value);
+    if (!ymd)
+        return value;
+    const dow = new Date(ymd.year, ymd.month - 1, ymd.day).getDay();
+    const back = (dow - firstDayOfWeek + 7) % 7;
+    return dates.addDays(value, -back);
+}
+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 [];
+}
+function normalizeNumberArray(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(Number).filter((n) => !Number.isNaN(n));
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return t.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+    }
+    return [];
+}
+CoCalendar.style = coCalendarCss();
+
+const coDateFieldCss = () => `:host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-date-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-date-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-date-field__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-date-field__field-row{display:flex;align-items:stretch}.co-date-field--s .co-date-field__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm)}.co-date-field--sm .co-date-field__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm)}.co-date-field--lg .co-date-field__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg)}.co-date-field--s .co-date-field__input-wrapper,.co-date-field--sm .co-date-field__input-wrapper{min-height:0;padding:0}.co-date-field__field{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);transition:border-color 0.15s ease, box-shadow 0.15s ease;min-height:40px;box-sizing:border-box;overflow:hidden;flex:1;min-width:0}.co-date-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__input-wrapper{flex:1;display:flex;align-items:center;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0}.co-date-field__native{width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-date-field__native::placeholder{color:var(--co-semantic-text-muted)}.co-date-field__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-date-field__clear--hidden{visibility:hidden;pointer-events:none}.co-date-field__clear:hover{color:var(--co-semantic-text-default)}.co-date-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-date-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-date-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;letter-spacing:var(--co-font-letter-spacing-body)}.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-date-field--disabled .co-date-field__labels .co-date-field__label{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-date-field--disabled .co-date-field__native{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-date-field--disabled .co-date-field__native::placeholder{color:var(--co-semantic-text-disabled)}.co-date-field--disabled .co-date-field__icon{color:var(--co-semantic-text-disabled)}.co-date-field--invalid .co-date-field__field{border-color:var(--co-semantic-status-error)}.co-date-field--invalid.co-date-field--focused .co-date-field__field{border-color:var(--co-semantic-status-error);box-shadow:0 0 0 2px rgba(170, 46, 27, 0.12)}.co-date-field__helper--error .co-date-field__helper-icon,.co-date-field__helper--error .co-date-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-date-field{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-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-date-field__label{white-space:normal}:host([layout='horizontal']) .co-date-field>:not(.co-date-field__labels){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)')}@supports not (background: color-mix(in srgb, red, transparent)){.co-date-field__field{background:var(--co-semantic-surface-secondary)}}`;
+
+const CoDateField = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coInput = index.createEvent(this, "coInput", 7);
+        this.coChange = index.createEvent(this, "coChange", 7);
+        this.coInvalid = index.createEvent(this, "coInvalid", 7);
+        this.coClear = index.createEvent(this, "coClear", 7);
+        this.coFocus = index.createEvent(this, "coFocus", 7);
+        this.coBlur = index.createEvent(this, "coBlur", 7);
+        /** Committed value, "YYYY-MM-DD" or null. */
+        this.value = null;
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** BCP-47 locale. */
+        this.locale = 'es-CO';
+        /** Display pattern (tokens yyyy/yy/MMMM/MMM/MM/M/dd/d). */
+        this.displayFormat = 'd MMM yyyy';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.clearable = true;
+        /** External invalid flag (e.g. from a form controller). OR'd with internal parse failure. */
+        this.invalid = false;
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Raw text in the box (display-formatted on commit). */
+        this.draft = '';
+        /** Internal parse-failure flag. */
+        this.internalInvalid = false;
+        this.hasFocus = false;
+        this.handleInput = (e) => {
+            this.draft = e.target.value;
+            this.internalInvalid = false;
+            this.coInput.emit(this.draft);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.coFocus.emit();
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.commit();
+            this.coBlur.emit();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                const ok = this.commit();
+                if (!ok) {
+                    // Don't let an unparsed/invalid date submit the enclosing form.
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        };
+        this.handleClear = () => {
+            var _a;
+            this.draft = '';
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            this.coClear.emit();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    componentWillLoad() {
+        this.draft = dates.formatDisplay(this.value, this.displayFormat, this.locale);
+    }
+    onValueChange() {
+        // Only reformat from the controlled value while NOT focused, so we never
+        // clobber what the user is actively typing.
+        if (this.hasFocus)
+            return;
+        this.draft = dates.formatDisplay(this.value, this.displayFormat, this.locale);
+        this.internalInvalid = false;
+    }
+    /** Focus the text input (used by co-date-picker to return focus on close). */
+    async focusInput() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    get order() {
+        const f = this.displayFormat.toLowerCase();
+        if (f.startsWith('y'))
+            return 'ymd';
+        if (f.startsWith('m'))
+            return 'mdy';
+        return 'dmy';
+    }
+    get isInvalid() {
+        return this.invalid || this.internalInvalid;
+    }
+    get hasValue() {
+        return this.draft.trim() !== '';
+    }
+    /**
+     * Parse the draft and commit. Returns true when the field is in a valid,
+     * committed state (including empty → null), false when invalid.
+     */
+    commit() {
+        const result = dates.parseFlexible(this.draft, { order: this.order, locale: this.locale });
+        if (result.status === 'empty') {
+            this.internalInvalid = false;
+            if (this.value !== null) {
+                this.value = null;
+                this.coChange.emit(null);
+            }
+            return true;
+        }
+        if (result.status === 'invalid' || result.value === null) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        // Valid syntax — also enforce range / disabled rules.
+        const ymd = result.value;
+        const blocked = dates.isDisabled(ymd, {
+            min: this.min,
+            max: this.max,
+            disabledDates: toStringArray(this.disabledDates),
+            disabledDaysOfWeek: toNumberArray(this.disabledDaysOfWeek),
+        });
+        if (blocked) {
+            this.internalInvalid = true;
+            this.coInvalid.emit({ raw: this.draft });
+            return false;
+        }
+        this.internalInvalid = false;
+        this.draft = dates.formatDisplay(ymd, this.displayFormat, this.locale);
+        if (this.value !== ymd) {
+            this.value = ymd;
+            this.coChange.emit(ymd);
+        }
+        return true;
+    }
+    render() {
+        var _a, _b;
+        const t = dateI18n.getDateStrings(this.locale);
+        const showClear = this.clearable && this.hasValue && !this.disabled && !this.readonly;
+        // `||` (not `??`): consumers/forms commonly pass an empty string, which
+        // should still fall back to the localized default placeholder.
+        const placeholder = this.placeholder || t.setDate;
+        const helper = this.isInvalid ? this.errorMessage : this.helperText;
+        return (index.h("div", { key: '88be9ead58abc8f3c417e66482aa8f05fee57337', class: {
+                'co-date-field': true,
+                'co-date-field--disabled': this.disabled,
+                'co-date-field--focused': this.hasFocus,
+                'co-date-field--filled': this.hasValue,
+                'co-date-field--invalid': this.isInvalid,
+                [`co-date-field--${this.size}`]: true,
+            }, part: "wrapper" }, this.label && (index.h("div", { key: 'c916f0e36ba63ffdcf2a6cd08ffe295c93e9aa91', class: "co-date-field__labels" }, index.h("label", { key: '0d84f75656c45fff7e695ecea68d9e93b5031e7e', class: "co-date-field__label", part: "label" }, this.label, index.h(requiredMark.RequiredMark, { key: '3fc035181fb79cb0879736dfa91ff979d4d6f8ab', required: this.required })))), index.h("div", { key: 'e423c62b5ed75b52786732944be251ec4c565692', class: "co-date-field__field-row" }, index.h("div", { key: '6c902beccd2d3d50166c027d755c4bd9687fa770', class: "co-date-field__field", part: "field" }, index.h("co-icon", { key: '87ac25c7d1816069d60f488c7d4ca0ab6902954b', name: "calendar", size: 16, class: "co-date-field__icon" }), index.h("div", { key: 'ac1d1ee4b641ce034a5723487bf1bfb6f1f834ff', class: "co-date-field__input-wrapper" }, index.h("input", { key: '54d4478118e7c02185619b07a1c44034e2d0cbe0', ref: (el) => (this.inputEl = el), class: "co-date-field__native", type: "text", inputMode: "numeric", autocomplete: "off", value: this.draft, placeholder: placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, "aria-invalid": this.isInvalid ? 'true' : 'false', "aria-label": !this.label ? t.dateLabel : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" })), this.clearable && (index.h("button", { key: '484bdacdb620dec400355efe868779f91ec352b7', class: {
+                'co-date-field__clear': true,
+                'co-date-field__clear--hidden': !showClear,
+            }, type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault() /* keep input focus */, onClick: this.handleClear, "aria-label": (_a = this.clearLabel) !== null && _a !== void 0 ? _a : t.clearDate, part: "clear" }, index.h("co-icon", { key: '9d5ce8fa3cf07062ac62fb50cd95bfd3841a6298', name: "x-circle", size: 16, weight: "fill" }))))), this.name && index.h("input", { key: '6bf071d3aaa3b02542860c5cd12156df1a34d6f3', type: "hidden", name: this.name, value: (_b = this.value) !== null && _b !== void 0 ? _b : '' }), helper && (index.h("div", { key: '39ac15b77ff7f6c7e710b714709f42a67decb4db', class: {
+                'co-date-field__helper': true,
+                'co-date-field__helper--error': this.isInvalid,
+            }, part: "helper" }, this.isInvalid && (index.h("co-icon", { key: '2c652605bf6f0a04bb08a0fa679ffaace1aaa110', name: "warning-circle", size: 14, class: "co-date-field__helper-icon" })), index.h("span", { key: 'c1022e560275a0f263af532304e948b78a0d4318', class: "co-date-field__helper-text" }, helper)))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+function toStringArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(String);
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+}
+function toNumberArray(v) {
+    if (Array.isArray(v))
+        return v;
+    if (typeof v === 'string' && v.trim()) {
+        try {
+            const p = JSON.parse(v);
+            if (Array.isArray(p))
+                return p.map(Number).filter((n) => !Number.isNaN(n));
+        }
+        catch (_a) {
+            /* not JSON */
+        }
+        return v.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+    }
+    return [];
+}
+CoDateField.style = coDateFieldCss();
+
+const coDrawerCss = () => `:host{display:contents}.co-drawer{position:fixed;background:var(--co-semantic-surface-page);display:flex;flex-direction:column;font-family:var(--co-font-family-primary);transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;will-change:transform;z-index:1}.co-drawer--right{top:0;right:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(100% + 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--right.co-drawer--open{transform:translateX(0)}.co-drawer--left{top:0;left:0;margin:6px;height:100vh;height:-webkit-fill-available;border-radius:24px;transform:translateX(calc(-100% - 12px));box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.co-drawer--left.co-drawer--open{transform:translateX(0)}.co-drawer--bottom{bottom:0;left:0;right:0;margin:6px;width:auto;transform:translateY(calc(100% + 12px));box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12);border-radius:24px}.co-drawer--bottom.co-drawer--open{transform:translateY(0)}.co-drawer--right.co-drawer--sm,.co-drawer--left.co-drawer--sm{width:400px;max-width:100vw}.co-drawer--right.co-drawer--md,.co-drawer--left.co-drawer--md{width:520px;max-width:100vw}.co-drawer--right.co-drawer--lg,.co-drawer--left.co-drawer--lg{width:720px;max-width:100vw}.co-drawer--right.co-drawer--xl,.co-drawer--left.co-drawer--xl{width:960px;max-width:100vw}.co-drawer--right.co-drawer--full,.co-drawer--left.co-drawer--full{width:100vw}.co-drawer--bottom.co-drawer--sm{height:40vh}.co-drawer--bottom.co-drawer--md{height:60vh}.co-drawer--bottom.co-drawer--lg{height:80vh}.co-drawer--bottom.co-drawer--xl{height:95vh}.co-drawer--bottom.co-drawer--full{height:100vh}.co-drawer__header{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-bottom:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__header-content{flex:1;min-width:0}.co-drawer__heading-row{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px)}.co-drawer__icon{flex-shrink:0;color:var(--co-semantic-text-secondary)}.co-drawer__heading{margin:0;font-size:var(--co-font-size-18);font-weight:600;color:var(--co-semantic-text-default);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.co-drawer__description{margin:var(--co-spacing-xs) 0 0;font-size:var(--co-font-size-13);font-weight:400;color:var(--co-semantic-text-muted);line-height:1.4}.co-drawer__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);transition:background 0.1s ease;flex-shrink:0}.co-drawer__close:hover{background:var(--co-semantic-surface-hover)}.co-drawer__close:focus-visible{outline:2px solid var(--co-color-primary-azul);outline-offset:2px}.co-drawer__tabs{flex-shrink:0;border-bottom:1px solid var(--co-semantic-border-default)}.co-drawer__tabs:empty{display:none}.co-drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--co-spacing-xl);position:relative}.co-drawer__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);flex-shrink:0}.co-drawer__footer:empty{display:none}@media (max-width: 600px){.co-drawer--right,.co-drawer--left{width:100vw !important}}`;
+
+const CoDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coClose = index.createEvent(this, "coClose", 7);
+        this.coOpen = index.createEvent(this, "coOpen", 7);
+        this.coAfterOpen = index.createEvent(this, "coAfterOpen", 7);
+        this.coAfterClose = index.createEvent(this, "coAfterClose", 7);
+        /** Whether the drawer is visible */
+        this.open = false;
+        /** Side from which the drawer slides in */
+        this.position = 'right';
+        /** Predefined sizes — sm 400 / md 520 / lg 720 / xl 960 / full 100% */
+        this.size = 'md';
+        /** Drawer title (used when `header` slot is empty) */
+        this.heading = '';
+        /** Optional description shown below the heading */
+        this.description = '';
+        /** Optional Phosphor icon name shown before the heading */
+        this.icon = '';
+        /** Show close (X) button in header */
+        this.closable = true;
+        /** Close when clicking the backdrop */
+        this.closeOnOverlay = true;
+        /** Close when pressing Escape */
+        this.closeOnEscape = true;
+        /** Show a loading overlay over the body */
+        this.loading = false;
+        this.handleOverlayClose = () => {
+            if (this.closeOnOverlay)
+                this.coClose.emit();
+        };
+        this.handleCloseClick = () => {
+            this.coClose.emit();
+        };
+        this.stopPropagation = (e) => {
+            e.stopPropagation();
+        };
+        this.handleTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform')
+                return;
+            if (this.open)
+                this.coAfterOpen.emit();
+            else
+                this.coAfterClose.emit();
+        };
+    }
+    onOpenChange(next, prev) {
+        if (next && !prev)
+            this.coOpen.emit();
+    }
+    handleKey(e) {
+        if (this.open && this.closeOnEscape && e.key === 'Escape') {
+            this.coClose.emit();
+        }
+    }
+    render() {
+        return (index.h("co-overlay", { key: '7c69e70718bf2085643677d37053afd37d2b6352', open: this.open, onCoClose: this.handleOverlayClose }, index.h("aside", { key: '01ab0f984e661aea796b7df9c04997d2bd1980e4', class: {
+                'co-drawer': true,
+                'co-drawer--open': this.open,
+                [`co-drawer--${this.position}`]: true,
+                [`co-drawer--${this.size}`]: true,
+            }, part: "drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, index.h("header", { key: '5176fec875eeb18be424ff9c898280dd31d0e3a1', class: "co-drawer__header", part: "header" }, index.h("div", { key: '3b3476ccbffa5dabafcc810695993c4b0679730d', class: "co-drawer__header-content" }, index.h("slot", { key: '7b7b4432956e107e12ecc4c46347fb431b4fca4f', name: "header" }, index.h("div", { key: '786511c2d038f3ca408d094afee8966b310ee36f', class: "co-drawer__heading-row" }, this.icon && index.h("co-icon", { key: '1f3331f934a568d8564e968739629f01eb8b8460', name: this.icon, size: 20, class: "co-drawer__icon" }), index.h("h2", { key: '19f2fe27e891efdd00d9a95e2e62c858c6688cac', class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && index.h("p", { key: 'cc65c4946b4a8f3add2509c412e64bd8c8389fda', class: "co-drawer__description" }, this.description))), this.closable && (index.h("button", { key: '4026e85eefcf7fd221c9ee61f807b8757857de1b', class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, index.h("co-icon", { key: 'bf861e28ccf9a1ecc2189415943240f1e81bf69a', name: "x", size: 20 })))), index.h("div", { key: '57c591df50af7d19ce2926eb7dcba6c2ab3422d5', class: "co-drawer__tabs", part: "tabs" }, index.h("slot", { key: 'c9e3ab57d666cfb85802d5e07dd89769434c696d', name: "tabs" })), index.h("div", { key: 'd7f0adf9a58f92756b9f83987c326dc208b10441', class: "co-drawer__body", part: "body" }, index.h("slot", { key: '6f2ad9551a80c1e957b35d8c61f6bed314dfc567' }), index.h("co-loader", { key: '088d8c6623b2d56e45361c06de0cb199653c1f0d', overlay: true, visible: this.loading, part: "loader" })), index.h("footer", { key: 'cdb32ec0e7f2dcfe971fec5b33224ad812987bdc', class: "co-drawer__footer", part: "footer" }, index.h("slot", { key: 'c08df3969fb871d3b313b121dd077a72769d3019', name: "footer" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+CoDrawer.style = coDrawerCss();
+
+exports.co_calendar = CoCalendar;
+exports.co_date_field = CoDateField;
+exports.co_drawer = CoDrawer;