@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -0,0 +1,379 @@
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.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: '24b0039f30c4d4e043c83a6c77caf55098d6207c', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '29357a95920cf7e5f8ab3673f19c0872d3fb50ad', 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 };