@prolibu-suite/cobalt-core 0.7.0 → 0.8.0

package/dist/esm/co-calendar-month.entry.js

@@ -1,379 +0,0 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BCEz3S-z.js';
-import { c as compareYMD, d as addDays, a as todayYMD, p as parseISO, g as getMonthMatrix, h as isDisabled, j as getWeekdayLabels } from './dates-tPYikBRJ.js';
-import { z as zonedDateKey, b as zonedMinutesOfDay, a as toUtcISO, c as getWallClock, w as wallClockToEpoch } from './tz-B6JZk8fL.js';
-
-/**
- * layout-month.ts — lane assignment for the month grid.
- *
- * Multi-day (all-day) events render as continuous bars spanning day cells; they
- * must keep a stable vertical lane across the days they cover, and overlapping
- * events must not share a lane. Single-day chips (timed events, single all-day)
- * are degenerate one-column bars. Days exceeding `maxLanes` report an overflow
- * count for the "+N more" affordance.
- *
- * Days are addressed by a week matrix of "YYYY-MM-DD" keys (e.g. from
- * `getMonthMatrix` in `@prolibu-suite/cobalt-date-utils`). Lexicographic string
- * comparison is correct for ISO dates, so no Date objects are needed here.
- */
-/** Inclusive day span of an event in calendar days. */
-function eventDaySpan(event, timeZone) {
-    if (event.allDay) {
-        // end is exclusive → last visible day is end - 1.
-        const firstDay = event.start.slice(0, 10);
-        const lastDay = addDays(event.end.slice(0, 10), -1);
-        if (compareYMD(lastDay, firstDay) < 0)
-            return { event, firstDay, lastDay: firstDay };
-        return { event, firstDay, lastDay };
-    }
-    // Timed events occupy their (wall-clock) start day in the month grid.
-    const day = timeZone ? zonedDateKey(event.startMs, timeZone) : event.start.slice(0, 10);
-    return { event, firstDay: day, lastDay: day };
-}
-function layoutMonth(events, weeks, options = {}) {
-    const maxLanes = options.maxLanes ?? Infinity;
-    const segments = [];
-    const overflow = {};
-    let laneCount = 0;
-    const spans = events
-        .map((e) => eventDaySpan(e, options.timeZone))
-        .filter((s) => s !== null);
-    weeks.forEach((days, weekIndex) => {
-        if (!days.length)
-            return;
-        const weekStart = days[0];
-        const weekEnd = days[days.length - 1];
-        const colOf = new Map(days.map((d, i) => [d, i]));
-        // Candidate segments intersecting this week.
-        const candidates = spans
-            .filter((s) => compareYMD(s.firstDay, weekEnd) <= 0 && compareYMD(weekStart, s.lastDay) <= 0)
-            .map((s) => {
-            const segFirst = compareYMD(s.firstDay, weekStart) >= 0 ? s.firstDay : weekStart;
-            const segLast = compareYMD(s.lastDay, weekEnd) <= 0 ? s.lastDay : weekEnd;
-            return {
-                span: s,
-                startCol: colOf.get(segFirst) ?? 0,
-                endCol: colOf.get(segLast) ?? days.length - 1,
-            };
-        })
-            // Multi-day/earlier events claim lanes first → stable, readable bars.
-            .sort((a, b) => a.startCol - b.startCol ||
-            b.endCol - b.startCol - (a.endCol - a.startCol) ||
-            a.span.event.startMs - b.span.event.startMs ||
-            (a.span.event.id < b.span.event.id ? -1 : 1));
-        const placed = [];
-        for (const cand of candidates) {
-            let lane = 0;
-            while (placed.some((p) => p.lane === lane && !(cand.endCol < p.startCol || cand.startCol > p.endCol))) {
-                lane++;
-            }
-            placed.push({ lane, startCol: cand.startCol, endCol: cand.endCol });
-            laneCount = Math.max(laneCount, lane + 1);
-            segments.push({
-                eventId: cand.span.event.id,
-                weekIndex,
-                lane,
-                startCol: cand.startCol,
-                endCol: cand.endCol,
-                isStart: compareYMD(cand.span.firstDay, weekStart) >= 0,
-                isEnd: compareYMD(cand.span.lastDay, weekEnd) <= 0,
-                continuesBefore: compareYMD(cand.span.firstDay, weekStart) < 0,
-                continuesAfter: compareYMD(cand.span.lastDay, weekEnd) > 0,
-            });
-        }
-    });
-    if (Number.isFinite(maxLanes)) {
-        for (const seg of segments) {
-            if (seg.lane >= maxLanes) {
-                for (let c = seg.startCol; c <= seg.endCol; c++) {
-                    const dk = weeks[seg.weekIndex][c];
-                    overflow[dk] = (overflow[dk] ?? 0) + 1;
-                }
-            }
-        }
-    }
-    return { segments, overflow, laneCount };
-}
-
-const coCalendarMonthCss = () => `:host{display:block;font-family:var(--co-font-family-primary);--co-cal-daynum-h:24px;--co-cal-lane-h:22px;--co-cal-min-week-h:92px;--co-cal-gap:2px;--co-cal-surface:var(--co-semantic-surface-page);--co-cal-border:var(--co-semantic-border-default);--co-cal-text:var(--co-semantic-text-default);--co-cal-text-muted:var(--co-semantic-text-muted);--co-cal-hover:var(--co-semantic-surface-hover);--co-cal-today-ring:var(--co-color-primary-azul);--co-cal-event-bg:var(--co-color-primary-azul);--co-cal-event-border:transparent;--co-cal-event-text:var(--co-color-base-blanco, #fff);--co-cal-event-text-light:var(--co-color-base-blanco, #fff);--co-cal-event-text-dark:var(--co-semantic-text-default)}.cal-month{display:flex;flex-direction:column;border:1px solid var(--co-cal-border);border-radius:var(--co-border-radius-xs);overflow:hidden;background:var(--co-cal-surface)}.cal-month__dow{display:grid;grid-template-columns:repeat(7, 1fr);border-bottom:1px solid var(--co-cal-border)}.cal-month__dow-cell{padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-10, 10px);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--co-cal-text-muted);text-align:right}.cal-month__week{position:relative;min-height:var(--co-cal-min-week-h)}.cal-month__week:not(:last-child){border-bottom:1px solid var(--co-cal-border)}.cal-month__days{display:grid;grid-template-columns:repeat(7, 1fr);height:100%;position:absolute;inset:0}.cal-month__day{border-right:1px solid var(--co-cal-border);padding:var(--co-spacing-xxs);cursor:pointer;transition:background 0.1s ease}.cal-month__day:last-child{border-right:0}.cal-month__day:hover{background:var(--co-cal-hover)}.cal-month__day:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:-2px}.cal-month__day--outside .cal-month__daynum{color:var(--co-cal-text-muted)}.cal-month__day--disabled{cursor:not-allowed;background:color-mix(in srgb, var(--co-cal-border) 20%, transparent)}.cal-month__day--drag-over{background:color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);box-shadow:inset 0 0 0 2px var(--co-cal-today-ring)}.cal-month__daynum{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:auto;float:right;font-size:var(--co-font-size-12, 12px);color:var(--co-cal-text);border-radius:var(--co-border-radius-full)}.cal-month__day--today .cal-month__daynum{background:var(--co-cal-today-ring);color:var(--co-color-base-blanco, #fff);font-weight:600}.cal-month__events{position:absolute;inset:0;pointer-events:none;}.cal-chip,.cal-month__more{position:absolute;height:calc(var(--co-cal-lane-h) - 3px);box-sizing:border-box;pointer-events:auto;display:flex;align-items:center;gap:var(--co-spacing-xxs);margin:0 3px;padding:0 var(--co-spacing-xs);border:1px solid var(--co-cal-event-border);border-radius:var(--co-border-radius-xxs);font-family:inherit;font-size:var(--co-font-size-12, 12px);line-height:1;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap}.cal-chip{background:var(--co-cal-event-bg);color:var(--co-cal-event-text)}.cal-chip:hover{filter:brightness(0.95)}.cal-chip:focus-visible{outline:2px solid var(--co-semantic-border-focus);outline-offset:1px}.cal-chip--all-day{font-weight:500}.cal-chip__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--co-border-radius-full);background:var(--co-cal-event-bg)}.cal-chip:not(.cal-chip--all-day){background:transparent;color:var(--co-cal-text);border-color:transparent}.cal-chip:not(.cal-chip--all-day):hover{background:var(--co-cal-hover);filter:none}.cal-chip__time{flex:0 0 auto;color:var(--co-cal-text-muted);font-variant-numeric:tabular-nums}.cal-chip__title{overflow:hidden;text-overflow:ellipsis}.cal-chip__ext{flex:0 0 auto;opacity:0.8}.cal-chip--past{opacity:0.55}.cal-chip--locked{cursor:default}.cal-chip--external{border-style:dashed}.cal-chip--dragging{opacity:0.4}.cal-chip--continues-before{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}.cal-chip--continues-after{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}.cal-month__more{background:transparent;color:var(--co-cal-text-muted);border-color:transparent;font-weight:600;font-size:var(--co-font-size-11, 11px)}.cal-month__more:hover{background:var(--co-cal-hover);color:var(--co-cal-text)}`;
-
-const CoCalendarMonth = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.coDaySelect = createEvent(this, "coDaySelect", 3);
-        this.coEventClick = createEvent(this, "coEventClick", 3);
-        this.coEventDrop = createEvent(this, "coEventDrop", 3);
-        this.coMoreClick = createEvent(this, "coMoreClick", 3);
-        /** Normalized events to render (from the engine's `normalizeEvents`). */
-        this.events = [];
-        /** BCP-47 locale for weekday labels. */
-        this.locale = 'es-CO';
-        /** First day of week, 0=Sun..6=Sat. */
-        this.firstDayOfWeek = 1;
-        /** Master interaction gate. */
-        this.editable = true;
-        /** Allow empty-day click to request a create. */
-        this.selectable = true;
-        /** Max event lanes per day before "+N more". */
-        this.maxLanes = 3;
-        /** Day currently hovered while dragging an event. */
-        this.dragOverDate = null;
-        /** Id of the event being dragged. */
-        this.dragId = null;
-        this.onPointerUp = () => this.finishDrag();
-        this.handleKeyDown = (e) => {
-            const cur = this.focused;
-            let handled = true;
-            switch (e.key) {
-                case 'ArrowLeft':
-                    this.moveFocus(addDays(cur, -1));
-                    break;
-                case 'ArrowRight':
-                    this.moveFocus(addDays(cur, 1));
-                    break;
-                case 'ArrowUp':
-                    this.moveFocus(addDays(cur, -7));
-                    break;
-                case 'ArrowDown':
-                    this.moveFocus(addDays(cur, 7));
-                    break;
-                case 'Enter':
-                case ' ':
-                    this.selectDay(cur);
-                    break;
-                default:
-                    handled = false;
-            }
-            if (handled) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        };
-    }
-    componentWillLoad() {
-        this.focused = this.defaultFocus();
-    }
-    connectedCallback() {
-        window.addEventListener('pointerup', this.onPointerUp);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('pointerup', this.onPointerUp);
-    }
-    defaultFocus() {
-        const first = `${pad4(this.year)}-${pad2(this.month)}-01`;
-        const today = todayYMD();
-        const t = parseISO(today);
-        return t.year === this.year && t.month === this.month ? today : first;
-    }
-    get matrix() {
-        return getMonthMatrix(this.year, this.month, this.firstDayOfWeek).map((row) => row.map((c) => c.value));
-    }
-    eventById(id) {
-        return this.events.find((e) => e.id === id);
-    }
-    isDayInteractable(date) {
-        return !isDisabled(date, { min: this.minDate, max: this.maxDate });
-    }
-    // ── Selection / activation ──────────────────────────────────────────────
-    selectDay(date) {
-        if (!this.selectable || !this.isDayInteractable(date))
-            return;
-        this.coDaySelect.emit({ date });
-    }
-    activateEvent(id) {
-        this.coEventClick.emit({ id });
-    }
-    // ── Keyboard (WAI-ARIA grid, forked from co-calendar) ───────────────────
-    moveFocus(next) {
-        this.focused = next;
-        requestAnimationFrame(() => this.focusCell());
-    }
-    focusCell() {
-        var _a, _b;
-        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${this.focused}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
-    }
-    // ── Drag-move (day granularity) ─────────────────────────────────────────
-    startDrag(e, id) {
-        const ev = this.eventById(id);
-        if (!ev || !this.editable || ev.editable === false || ev.startEditable === false)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        this.dragId = id;
-        this.dragOverDate = null;
-    }
-    finishDrag() {
-        const id = this.dragId;
-        const target = this.dragOverDate;
-        this.dragId = null;
-        this.dragOverDate = null;
-        if (!id || !target)
-            return;
-        const ev = this.eventById(id);
-        if (!ev)
-            return;
-        const originDay = ev.allDay
-            ? ev.start.slice(0, 10)
-            : zonedDateKey(ev.startMs, this.timeZone);
-        const deltaDays = daysBetween(originDay, target);
-        if (deltaDays === 0)
-            return;
-        if (!this.isDayInteractable(target))
-            return;
-        const shifted = shiftEventByDays(ev, deltaDays, this.timeZone);
-        this.coEventDrop.emit({
-            id,
-            start: shifted.start,
-            end: shifted.end,
-            oldStart: ev.start,
-            oldEnd: ev.end,
-            allDay: ev.allDay,
-        });
-    }
-    // ── Render ──────────────────────────────────────────────────────────────
-    renderChip(seg, weekDays) {
-        var _a;
-        const ev = this.eventById(seg.eventId);
-        if (!ev)
-            return null;
-        const cols = weekDays.length;
-        const left = (seg.startCol / cols) * 100;
-        const width = ((seg.endCol - seg.startCol + 1) / cols) * 100;
-        const isPast = ev.endMs <= Date.now();
-        const isExternal = ((_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.isExternal) === true;
-        const locked = !this.editable || ev.editable === false;
-        const timeText = ev.allDay || !seg.isStart
-            ? ''
-            : minutesToLabel(zonedMinutesOfDay(ev.startMs, this.timeZone), this.locale);
-        const style = {
-            left: `${left}%`,
-            width: `${width}%`,
-            top: `calc(var(--co-cal-daynum-h) + ${seg.lane} * var(--co-cal-lane-h))`,
-        };
-        if (ev.backgroundColor) {
-            style['--co-cal-event-bg'] = ev.backgroundColor;
-            style['--co-cal-event-text'] = readableText(ev.backgroundColor);
-        }
-        if (ev.borderColor)
-            style['--co-cal-event-border'] = ev.borderColor;
-        return (h("button", { type: "button", key: `${seg.eventId}-${seg.weekIndex}`, class: {
-                'cal-chip': true,
-                'cal-chip--all-day': ev.allDay,
-                'cal-chip--past': isPast,
-                'cal-chip--external': isExternal,
-                'cal-chip--locked': locked,
-                'cal-chip--dragging': this.dragId === ev.id,
-                'cal-chip--continues-before': seg.continuesBefore,
-                'cal-chip--continues-after': seg.continuesAfter,
-            }, style: style, title: ev.title, "aria-label": ev.title, onClick: (e) => {
-                e.stopPropagation();
-                this.activateEvent(ev.id);
-            }, onPointerDown: (e) => this.startDrag(e, ev.id) }, !ev.allDay && h("span", { class: "cal-chip__dot", "aria-hidden": "true" }), timeText && h("span", { class: "cal-chip__time" }, timeText), h("span", { class: "cal-chip__title" }, ev.title || '—'), isExternal && h("co-icon", { name: "link", size: 11, class: "cal-chip__ext" })));
-    }
-    render() {
-        var _a;
-        const matrix = this.matrix;
-        const normalized = this.events;
-        const layout = layoutMonth(normalized, matrix, {
-            maxLanes: this.maxLanes,
-            timeZone: this.timeZone,
-        });
-        const segByWeek = new Map();
-        for (const seg of layout.segments) {
-            if (seg.lane >= this.maxLanes)
-                continue;
-            const arr = (_a = segByWeek.get(seg.weekIndex)) !== null && _a !== void 0 ? _a : [];
-            arr.push(seg);
-            segByWeek.set(seg.weekIndex, arr);
-        }
-        const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
-        const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
-        const today = todayYMD();
-        return (h("div", { key: '51781013cbfce9f2e8d07de9a46766c3a9326cbe', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: 'ee3545fbd982390cd233cb54b33060b7cb9b08e1', class: "cal-month__dow", role: "row" }, short.map((lbl, i) => (h("span", { class: "cal-month__dow-cell", role: "columnheader", "aria-label": long[i] }, lbl)))), matrix.map((week, wi) => {
-            var _a;
-            return (h("div", { class: "cal-month__week", role: "row" }, h("div", { class: "cal-month__days" }, week.map((date) => {
-                const ymd = parseISO(date);
-                const inMonth = ymd.month === this.month;
-                const isToday = compareYMD(date, today) === 0;
-                const isFocused = compareYMD(date, this.focused) === 0;
-                const interactable = this.isDayInteractable(date);
-                return (h("div", { role: "gridcell", "data-date": date, tabIndex: isFocused ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-disabled": interactable ? undefined : 'true', class: {
-                        'cal-month__day': true,
-                        'cal-month__day--outside': !inMonth,
-                        'cal-month__day--today': isToday,
-                        'cal-month__day--disabled': !interactable,
-                        'cal-month__day--drag-over': this.dragId !== null && this.dragOverDate === date,
-                    }, onClick: () => this.selectDay(date), onPointerEnter: () => {
-                        if (this.dragId)
-                            this.dragOverDate = date;
-                    } }, h("span", { class: "cal-month__daynum" }, ymd.day)));
-            })), h("div", { class: "cal-month__events" }, ((_a = segByWeek.get(wi)) !== null && _a !== void 0 ? _a : []).map((seg) => this.renderChip(seg, week)), week.map((date, col) => {
-                var _a;
-                const more = (_a = layout.overflow[date]) !== null && _a !== void 0 ? _a : 0;
-                if (more <= 0)
-                    return null;
-                return (h("button", { type: "button", class: "cal-month__more", style: {
-                        left: `${(col / week.length) * 100}%`,
-                        width: `${(1 / week.length) * 100}%`,
-                        top: `calc(var(--co-cal-daynum-h) + ${this.maxLanes} * var(--co-cal-lane-h))`,
-                    }, onClick: (e) => {
-                        e.stopPropagation();
-                        this.coMoreClick.emit({ date });
-                    } }, "+", more));
-            }))));
-        })));
-    }
-    get el() { return getElement(this); }
-};
-// ── helpers ─────────────────────────────────────────────────────────────────
-function pad2(n) {
-    return String(n).padStart(2, '0');
-}
-function pad4(n) {
-    return String(n).padStart(4, '0');
-}
-/** Whole-day delta between two "YYYY-MM-DD" using UTC-midnight arithmetic. */
-function daysBetween(a, b) {
-    const [ay, am, ad] = a.split('-').map(Number);
-    const [by, bm, bd] = b.split('-').map(Number);
-    return Math.round((Date.UTC(by, bm - 1, bd) - Date.UTC(ay, am - 1, ad)) / 86400000);
-}
-/** Shift an event by N days, preserving wall-clock time (DST-correct for timed). */
-function shiftEventByDays(ev, deltaDays, timeZone) {
-    if (ev.allDay) {
-        return {
-            start: addDays(ev.start.slice(0, 10), deltaDays),
-            end: addDays(ev.end.slice(0, 10), deltaDays),
-        };
-    }
-    return {
-        start: toUtcISO(shiftInstant(ev.startMs, deltaDays, timeZone)),
-        end: toUtcISO(shiftInstant(ev.endMs, deltaDays, timeZone)),
-    };
-}
-function shiftInstant(ms, deltaDays, timeZone) {
-    const wc = getWallClock(ms, timeZone);
-    const newDate = addDays(`${pad4(wc.year)}-${pad2(wc.month)}-${pad2(wc.day)}`, deltaDays);
-    const [y, m, d] = newDate.split('-').map(Number);
-    return wallClockToEpoch({ year: y, month: m, day: d, hour: wc.hour, minute: wc.minute, second: wc.second }, timeZone);
-}
-/** Short localized time label, e.g. "9:00 a. m." / "09:00". */
-function minutesToLabel(minutes, locale) {
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' }).format(new Date(2000, 0, 1, h, m));
-}
-/** Pick a readable text token for an arbitrary background color (YIQ luminance). */
-function readableText(bg) {
-    const hex = bg.replace('#', '').trim();
-    if (hex.length !== 3 && hex.length !== 6)
-        return 'var(--co-cal-event-text)';
-    const full = hex.length === 3 ? hex.split('').map((c) => c + c).join('') : hex;
-    const r = parseInt(full.slice(0, 2), 16);
-    const g = parseInt(full.slice(2, 4), 16);
-    const b = parseInt(full.slice(4, 6), 16);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 150 ? 'var(--co-cal-event-text-dark)' : 'var(--co-cal-event-text-light)';
-}
-CoCalendarMonth.style = coCalendarMonthCss();
-
-export { CoCalendarMonth as co_calendar_month };

package/dist/esm/co-skeleton.entry.js

@@ -1,24 +0,0 @@
-import { r as registerInstance, h } from './index-BCEz3S-z.js';
-
-const coSkeletonCss = () => `:host{display:block}.co-skeleton{height:1em;border-radius:var(--co-border-radius-xs);background:linear-gradient(     90deg,     var(--co-semantic-surface-secondary) 0%,     var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%,     var(--co-semantic-surface-secondary) 100%   );background-size:200% 100%;animation:co-skeleton-sweep 1.2s ease-in-out infinite}.co-skeleton--text{border-radius:var(--co-border-radius-xxs)}.co-skeleton--circle{border-radius:var(--co-border-radius-full)}@keyframes co-skeleton-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.co-skeleton{animation:none}}`;
-
-const CoSkeleton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** rect (default) | text (radio menor) | circle */
-        this.variant = 'rect';
-        /** Ancho CSS (default 100%) */
-        this.width = '100%';
-        /** Alto CSS (default por variante en CSS) */
-        this.height = '';
-    }
-    render() {
-        const style = { width: this.width };
-        if (this.height)
-            style.height = this.height;
-        return (h("div", { key: '62e14646999122acf4190e503bc89ba1a75a16a0', class: { 'co-skeleton': true, [`co-skeleton--${this.variant}`]: true }, part: "skeleton", style: style, "aria-hidden": "true" }));
-    }
-};
-CoSkeleton.style = coSkeletonCss();
-
-export { CoSkeleton as co_skeleton };