@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

package/dist/collection/components/co-calendar-month/co-calendar-month.js

@@ -1,6 +1,7 @@
 import { h, } from "@stencil/core";
 import { addDays, compareYMD, getMonthMatrix, getWeekdayLabels, isDisabled, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
 import { layoutMonth, getWallClock, wallClockToEpoch, toUtcISO, zonedDateKey, zonedMinutesOfDay, } from "@prolibu-suite/cobalt-calendar-utils";
+import { readableTextToken } from "../../utils/eventColor";
 /**
  * Month grid for the event calendar. Forks the day grid, roving-tabindex and
  * keyboard model from `co-calendar`, then overlays multi-day event bars laid out
@@ -27,11 +28,20 @@ export class CoCalendarMonth {
         this.selectable = true;
         /** Max event lanes per day before "+N more". */
         this.maxLanes = 3;
+        /** Cargando: en vez de los chips pinta bloques skeleton en sus carriles. La
+         *  grilla del mes (cabecera de días, celdas, números, bordes) no se toca. */
+        this.loading = false;
         /** Day currently hovered while dragging an event. */
         this.dragOverDate = null;
         /** Id of the event being dragged. */
         this.dragId = null;
+        /** Epoch ms of "now", refreshed on a 60s timer so `past` styling stays live. */
+        this.nowMs = 0;
         this.onPointerUp = () => this.finishDrag();
+        // ── Selection / activation ──────────────────────────────────────────────
+        /** Día seleccionado que PERSISTE resaltado mientras el host tiene abierto su
+         * form/bubble de creación (referencia visual, paridad Google). */
+        this.selectedDate = null;
         this.handleKeyDown = (e) => {
             const cur = this.focused;
             let handled = true;
@@ -63,12 +73,20 @@ export class CoCalendarMonth {
     }
     componentWillLoad() {
         this.focused = this.defaultFocus();
+        this.nowMs = Date.now();
+    }
+    componentDidLoad() {
+        // setInterval acá (no en connectedCallback): componentDidLoad corre una sola
+        // vez por instancia → sin timer duplicado en reconexión (espeja co-calendar-timegrid).
+        this.nowTimer = window.setInterval(() => (this.nowMs = Date.now()), 60000);
     }
     connectedCallback() {
         window.addEventListener('pointerup', this.onPointerUp);
     }
     disconnectedCallback() {
         window.removeEventListener('pointerup', this.onPointerUp);
+        if (this.nowTimer)
+            window.clearInterval(this.nowTimer);
     }
     defaultFocus() {
         const first = `${pad4(this.year)}-${pad2(this.month)}-01`;
@@ -76,23 +94,29 @@ export class CoCalendarMonth {
         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);
+        var _a, _b;
+        return (_b = (_a = this._layoutCache) === null || _a === void 0 ? void 0 : _a.byId.get(id)) !== null && _b !== void 0 ? _b : this.events.find((e) => e.id === id);
     }
     isDayInteractable(date) {
         return !isDisabled(date, { min: this.minDate, max: this.maxDate });
     }
-    // ── Selection / activation ──────────────────────────────────────────────
-    selectDay(date) {
+    selectDay(date, rect) {
         if (!this.selectable || !this.isDayInteractable(date))
             return;
-        this.coDaySelect.emit({ date });
+        this.selectedDate = date;
+        this.coDaySelect.emit({ date, rect });
     }
-    activateEvent(id) {
-        this.coEventClick.emit({ id });
+    /** Limpia el resaltado persistente (lo llama el host al cerrar su form). */
+    async clearSelection() {
+        this.selectedDate = null;
+    }
+    /** Un refetch (post-save) invalida la referencia visual. */
+    onEventsChange() {
+        this.selectedDate = null;
+    }
+    activateEvent(id, rect) {
+        this.coEventClick.emit({ id, rect });
     }
     // ── Keyboard (WAI-ARIA grid, forked from co-calendar) ───────────────────
     moveFocus(next) {
@@ -104,20 +128,30 @@ export class CoCalendarMonth {
         (_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) ─────────────────────────────────────────
+    /** Marca la interacción en el root (pointer-events:none en los chips durante el
+     * drag — mata el hover/hit-testing de las barras all-day barridas en cada
+     * celda cruzada). No es @State a propósito: no debe disparar un render. */
+    setInteracting(on) {
+        var _a;
+        (_a = this.rootEl) === null || _a === void 0 ? void 0 : _a.classList.toggle('cal-month--interacting', on);
+    }
     startDrag(e, id) {
         const ev = this.eventById(id);
         if (!ev || !this.editable || ev.editable === false || ev.startEditable === false)
             return;
-        e.preventDefault();
+        // Ver la nota en co-calendar-timegrid#startMove: preventDefault en
+        // pointerdown mata el click y el chip arrastrable no podía activarse.
         e.stopPropagation();
         this.dragId = id;
         this.dragOverDate = null;
+        this.setInteracting(true);
     }
     finishDrag() {
         const id = this.dragId;
         const target = this.dragOverDate;
         this.dragId = null;
         this.dragOverDate = null;
+        this.setInteracting(false);
         if (!id || !target)
             return;
         const ev = this.eventById(id);
@@ -142,6 +176,46 @@ export class CoCalendarMonth {
         });
     }
     // ── Render ──────────────────────────────────────────────────────────────
+    getLayouts() {
+        var _a;
+        const c = this._layoutCache;
+        if (c &&
+            c.events === this.events &&
+            c.year === this.year &&
+            c.month === this.month &&
+            c.firstDayOfWeek === this.firstDayOfWeek &&
+            c.timeZone === this.timeZone &&
+            c.maxLanes === this.maxLanes) {
+            return c;
+        }
+        const matrix = getMonthMatrix(this.year, this.month, this.firstDayOfWeek).map((row) => row.map((cell) => cell.value));
+        const layout = layoutMonth(this.events, 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 byId = new Map(this.events.map((e) => [e.id, e]));
+        this._layoutCache = {
+            events: this.events,
+            year: this.year,
+            month: this.month,
+            firstDayOfWeek: this.firstDayOfWeek,
+            timeZone: this.timeZone,
+            maxLanes: this.maxLanes,
+            matrix,
+            layout,
+            segByWeek,
+            byId,
+        };
+        return this._layoutCache;
+    }
     renderChip(seg, weekDays) {
         var _a;
         const ev = this.eventById(seg.eventId);
@@ -150,7 +224,7 @@ export class CoCalendarMonth {
         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 isPast = ev.endMs <= this.nowMs;
         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
@@ -163,7 +237,9 @@ export class CoCalendarMonth {
         };
         if (ev.backgroundColor) {
             style['--co-cal-event-bg'] = ev.backgroundColor;
-            style['--co-cal-event-text'] = readableText(ev.backgroundColor);
+            const textToken = readableTextToken(this.rootEl, ev.backgroundColor);
+            if (textToken)
+                style['--co-cal-event-text'] = textToken;
         }
         if (ev.borderColor)
             style['--co-cal-event-border'] = ev.borderColor;
@@ -176,31 +252,24 @@ export class CoCalendarMonth {
                 'cal-chip--dragging': this.dragId === ev.id,
                 'cal-chip--continues-before': seg.continuesBefore,
                 'cal-chip--continues-after': seg.continuesAfter,
+                'cal-chip--tentative': ev.responseState === 'tentative',
+                'cal-chip--cancelled': ev.responseState === 'cancelled' || ev.responseState === 'declined',
             }, 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" })));
+                this.activateEvent(ev.id, e.currentTarget.getBoundingClientRect());
+            }, onDblClick: (e) => {
+                e.stopPropagation();
+                this.coEventDblClick.emit({ id: ev.id, rect: e.currentTarget.getBoundingClientRect() });
+            }, 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 && (providerBrand(ev)
+            ? h("co-provider-logo", { provider: providerBrand(ev), size: 11, plated: true, class: "cal-chip__ext" })
+            : 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 { matrix, layout, segByWeek } = this.getLayouts();
         const short = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'short');
         const long = getWeekdayLabels(this.locale, this.firstDayOfWeek, 'long');
         const today = todayYMD();
-        return (h("div", { key: '94afb2cd963e8292d09dda372b7f115e235c8cd3', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown }, h("div", { key: '381021f254ac5f36d3d59e108cbe64f7f4fb1b91', 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) => {
+        return (h("div", { key: 'f8bcb53b7ef7c47a1ff59caee0305dfc1a3f1fc2', class: "cal-month", part: "grid", role: "grid", onKeyDown: this.handleKeyDown, ref: (el) => (this.rootEl = el) }, h("div", { key: '11acf9973a13ad661590a04dd934c86ceaa10f5d', 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);
@@ -214,11 +283,16 @@ export class CoCalendarMonth {
                         '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: () => {
+                        'cal-month__day--selected': this.selectedDate === date,
+                    }, onClick: (e) => this.selectDay(date, e.currentTarget.getBoundingClientRect()), 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) => {
+            })), h("div", { class: "cal-month__events" }, this.loading && SKELETON_CHIPS[wi % SKELETON_CHIPS.length].map(([col, span, lane]) => (h("div", { class: "cal-month__chip-skeleton", "aria-hidden": "true", style: {
+                    left: `${(col / week.length) * 100}%`,
+                    width: `${(span / week.length) * 100}%`,
+                    top: `calc(var(--co-cal-daynum-h) + ${lane} * var(--co-cal-lane-h))`,
+                } }, h("co-skeleton", { variant: "rect", width: "100%", height: "100%" })))), !this.loading && ((_a = segByWeek.get(wi)) !== null && _a !== void 0 ? _a : []).map((seg) => this.renderChip(seg, week)), !this.loading && week.map((date, col) => {
                 var _a;
                 const more = (_a = layout.overflow[date]) !== null && _a !== void 0 ? _a : 0;
                 if (more <= 0)
@@ -467,6 +541,26 @@ export class CoCalendarMonth {
                 "reflect": false,
                 "attribute": "max-lanes",
                 "defaultValue": "3"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cargando: en vez de los chips pinta bloques skeleton en sus carriles. La\ngrilla del mes (cabecera de d\u00EDas, celdas, n\u00FAmeros, bordes) no se toca."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
             }
         };
     }
@@ -474,7 +568,9 @@ export class CoCalendarMonth {
         return {
             "focused": {},
             "dragOverDate": {},
-            "dragId": {}
+            "dragId": {},
+            "nowMs": {},
+            "selectedDate": {}
         };
     }
     static get events() {
@@ -483,37 +579,47 @@ export class CoCalendarMonth {
                 "name": "coDaySelect",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when an empty day is selected (create request). Detail = \"YYYY-MM-DD\"."
                 },
                 "complexType": {
-                    "original": "{ date: string }",
-                    "resolved": "{ date: string; }",
-                    "references": {}
+                    "original": "{ date: string; rect?: DOMRect }",
+                    "resolved": "{ date: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
                 }
             }, {
                 "method": "coEventClick",
                 "name": "coEventClick",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when an event chip is activated."
                 },
                 "complexType": {
-                    "original": "{ id: string }",
-                    "resolved": "{ id: string; }",
-                    "references": {}
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
                 }
             }, {
                 "method": "coEventDrop",
                 "name": "coEventDrop",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted on a completed drag-move (day granularity)."
@@ -528,7 +634,7 @@ export class CoCalendarMonth {
                 "name": "coMoreClick",
                 "bubbles": false,
                 "cancelable": true,
-                "composed": true,
+                "composed": false,
                 "docs": {
                     "tags": [],
                     "text": "Emitted when the \"+N more\" affordance is activated."
@@ -538,11 +644,68 @@ export class CoCalendarMonth {
                     "resolved": "{ date: string; }",
                     "references": {}
                 }
+            }, {
+                "method": "coEventDblClick",
+                "name": "coEventDblClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Doble activaci\u00F3n de un chip (direct-edit request del host)."
+                },
+                "complexType": {
+                    "original": "{ id: string; rect?: DOMRect }",
+                    "resolved": "{ id: string; rect?: DOMRect | undefined; }",
+                    "references": {
+                        "DOMRect": {
+                            "location": "global",
+                            "id": "global::DOMRect"
+                        }
+                    }
+                }
             }];
     }
+    static get methods() {
+        return {
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Limpia el resaltado persistente (lo llama el host al cerrar su form).",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "events",
+                "methodName": "onEventsChange"
+            }];
+    }
 }
 // ── helpers ─────────────────────────────────────────────────────────────────
+/** Chips del skeleton por semana: `[columna, ancho en días, carril]`. Patrón
+ *  FIJO (nada de random) y desparejo, como se ve un mes real. */
+const SKELETON_CHIPS = [
+    [[0, 2, 0], [3, 1, 0], [5, 1, 1]],
+    [[1, 1, 0], [2, 3, 1]],
+    [[0, 1, 0], [2, 1, 0], [4, 2, 1], [6, 1, 0]],
+    [[1, 2, 0], [4, 1, 1]],
+    [[2, 1, 0], [3, 2, 1], [6, 1, 0]],
+    [[0, 3, 0], [5, 1, 1]],
+];
 function pad2(n) {
     return String(n).padStart(2, '0');
 }
@@ -574,21 +737,41 @@ function shiftInstant(ms, deltaDays, timeZone) {
     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);
 }
+// Intl.DateTimeFormat es caro de construir y este label se recalcula por chip
+// por render sobre un dominio ACOTADO (≤96 minutos distintos, 1-2 locales):
+// cacheamos el RESULTADO (y el formatter, para el miss). Higiene: clear a las
+// 2000 entradas — inalcanzable en uso normal, solo protege de iteración
+// patológica. Mismo patrón que co-calendar-timegrid.tsx (duplicado a propósito:
+// componentes Stencil separados, consistencia > DRY entre ellos).
+const MINUTE_LABEL_CACHE = new Map();
+const MINUTE_FMT_CACHE = new Map();
 /** Short localized time label, e.g. "9:00 a. m." / "09:00". */
 function minutesToLabel(minutes, locale) {
+    const key = `${locale}|${minutes}`;
+    const hit = MINUTE_LABEL_CACHE.get(key);
+    if (hit !== undefined)
+        return hit;
+    let fmt = MINUTE_FMT_CACHE.get(locale);
+    if (!fmt) {
+        fmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+        MINUTE_FMT_CACHE.set(locale, fmt);
+    }
     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));
+    const out = fmt.format(new Date(2000, 0, 1, h, m));
+    if (MINUTE_LABEL_CACHE.size > 2000)
+        MINUTE_LABEL_CACHE.clear();
+    MINUTE_LABEL_CACHE.set(key, out);
+    return out;
 }
-/** 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)';
+/** Marca del evento externo (`co-provider-logo`), o '' si no se reconoce — el
+ *  llamador cae al ícono genérico de enlace. */
+function providerBrand(ev) {
+    var _a, _b;
+    const p = String((_b = (_a = ev.extendedProps) === null || _a === void 0 ? void 0 : _a.provider) !== null && _b !== void 0 ? _b : '').toLowerCase();
+    if (p.includes('google'))
+        return 'google';
+    if (p.includes('microsoft') || p.includes('outlook'))
+        return 'microsoft';
+    return '';
 }