@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -0,0 +1,620 @@
+import { h, } from "@stencil/core";
+import { addDays, addMonths, getMonthLabel, getMonthMatrix, parseISO, todayYMD, } from "@prolibu-suite/cobalt-date-utils";
+import { normalizeEvents, getLocalTimeZone, } from "@prolibu-suite/cobalt-calendar-utils";
+import { getDateStrings } from "../../utils/dateI18n";
+/**
+ * co-event-calendar — the public entry point of the Cobalt Calendars family.
+ *
+ * Owns view state, the visible anchor date, event normalization and the toolbar,
+ * and delegates rendering to the active view (Phase 1: month). All hard math
+ * lives in `@prolibu-suite/cobalt-calendar-utils`. Events are CONTROLLED: the
+ * calendar emits requests (`coEventDrop`, `coDateSelect`) and the host applies
+ * them by updating the `events` prop — leaving it unchanged on failure is the
+ * revert.
+ *
+ * Instants are ISO-8601 strings WITH offset/Z (timed) or "YYYY-MM-DD" (all-day);
+ * the calendar never exposes Date objects. `timeZone` controls wall-clock render.
+ *
+ * @part toolbar - The header toolbar
+ * @part body - The active view container
+ */
+export class CoEventCalendar {
+    constructor() {
+        /** Active view. Phase 1 ships `month`; week/day/agenda land in later phases. */
+        this.view = 'month';
+        /** Events: an array or a JSON string (raw-HTML use). */
+        this.events = [];
+        /** BCP-47 locale for labels. */
+        this.locale = 'es-CO';
+        /** Master interaction gate (per-event `editable` can still lock individuals). */
+        this.editable = true;
+        /** Allow empty-day selection to request a create. */
+        this.selectable = true;
+        /** Max event lanes per day before "+N more". */
+        this.dayMaxEvents = 3;
+        /** First day of week, 0=Sun..6=Sat. */
+        this.firstDayOfWeek = 1;
+        /** Views offered in the switcher. Defaults to the implemented set. */
+        this.availableViews = ['month'];
+        /** Default minutes for a timed event missing an end. */
+        this.defaultDurationMinutes = 60;
+        this.goToday = () => this.setAnchor(todayYMD());
+        this.goPrev = () => this.step(-1);
+        this.goNext = () => this.step(1);
+        // ── Month delegation handlers ───────────────────────────────────────────
+        this.handleDaySelect = (e) => {
+            const date = e.detail.date;
+            this.coDateSelect.emit({ start: date, end: addDays(date, 1), allDay: true });
+        };
+        this.handleEventClick = (e) => {
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (ev)
+                this.coEventClick.emit({ event: ev });
+        };
+        this.handleEventDrop = (e) => {
+            const ev = this.normalized.find((x) => x.id === e.detail.id);
+            if (!ev)
+                return;
+            this.coEventDrop.emit({
+                event: ev,
+                start: e.detail.start,
+                end: e.detail.end,
+                oldStart: e.detail.oldStart,
+                oldEnd: e.detail.oldEnd,
+                allDay: e.detail.allDay,
+                revert: () => {
+                    /* controlled mode: host reverts by not updating `events` */
+                },
+            });
+        };
+        this.handleMoreClick = (e) => {
+            const date = e.detail.date;
+            const tz = this.tz;
+            const events = this.normalized.filter((ev) => {
+                const day = ev.allDay ? ev.start.slice(0, 10) : zonedDay(ev.startMs, tz);
+                return day === date;
+            });
+            this.coMoreClick.emit({ date, events });
+        };
+    }
+    componentWillLoad() {
+        this.anchor = this.date && parseISO(this.date) ? this.date : todayYMD();
+    }
+    componentDidLoad() {
+        this.emitDatesSet();
+    }
+    onDateChange(value) {
+        if (value && parseISO(value) && value !== this.anchor) {
+            this.anchor = value;
+            this.emitDatesSet();
+        }
+    }
+    get tz() {
+        return this.timeZone || getLocalTimeZone();
+    }
+    get normalized() {
+        const raw = parseEventsProp(this.events);
+        const opts = {
+            defaultDurationMinutes: this.defaultDurationMinutes,
+            statusColors: parseStatusColors(this.statusColors),
+        };
+        return normalizeEvents(raw, opts);
+    }
+    get viewsList() {
+        return Array.isArray(this.availableViews)
+            ? this.availableViews
+            : String(this.availableViews).split(',').map((s) => s.trim()).filter(Boolean);
+    }
+    /** Visible [start, end) of the current month view, as date strings. */
+    visibleRange() {
+        const a = parseISO(this.anchor);
+        const matrix = getMonthMatrix(a.year, a.month, this.firstDayOfWeek);
+        const start = matrix[0][0].value;
+        const last = matrix[matrix.length - 1][6].value;
+        return { start, end: addDays(last, 1) };
+    }
+    emitDatesSet() {
+        const { start, end } = this.visibleRange();
+        this.coDatesSet.emit({ view: this.view, start, end, activeDate: this.anchor });
+    }
+    setAnchor(next) {
+        this.anchor = next;
+        this.date = next;
+        this.emitDatesSet();
+    }
+    step(dir) {
+        if (this.view === 'month') {
+            this.setAnchor(addMonths(this.anchor, dir));
+        }
+        else {
+            this.setAnchor(addDays(this.anchor, dir * 7));
+        }
+    }
+    switchView(next) {
+        if (next === this.view)
+            return;
+        this.view = next;
+        this.coViewChange.emit({ view: next });
+        this.emitDatesSet();
+    }
+    title() {
+        const a = parseISO(this.anchor);
+        return getMonthLabel(a.year, a.month, this.locale, 'long');
+    }
+    render() {
+        var _a;
+        const t = getDateStrings(this.locale);
+        const views = this.viewsList;
+        const a = parseISO(this.anchor);
+        return (h("div", { key: 'dca7d290407d0815ed127e9ea85bd9581ca1238d', class: "cal" }, h("div", { key: '739c0374461233ea08fb1d7ba9dd9104194d4348', class: "cal__toolbar", part: "toolbar" }, h("div", { key: '70bc5571180aba131a52a6a46041f0a3a8227819', class: "cal__nav-group" }, h("button", { key: 'f0308bd1a9eb83b98aaabc9fcc7e08536f34e630', type: "button", class: "cal__btn", onClick: this.goToday }, (_a = t.today) !== null && _a !== void 0 ? _a : 'Today'), h("button", { key: '8979b382c37384f59f00f566afb9ade636944811', type: "button", class: "cal__icon-btn", "aria-label": t.prevMonth, onClick: this.goPrev }, h("co-icon", { key: 'cb83fb82be3f902315c6d1072a3706dc0716fb9a', name: "caret-left", size: 16 })), h("button", { key: '4505ac7e1fdbe452349f36a696bde9a2f6a8b63e', type: "button", class: "cal__icon-btn", "aria-label": t.nextMonth, onClick: this.goNext }, h("co-icon", { key: 'fee0a868c53fc92ac1e31f8a6e582e3c651a727c', name: "caret-right", size: 16 }))), h("h2", { key: '4641c225889d32834236e4ff22d60b4777e1625d', class: "cal__title", "aria-live": "polite" }, this.title()), views.length > 1 ? (h("div", { class: "cal__views", role: "tablist" }, views.map((v) => {
+            var _a;
+            return (h("button", { type: "button", role: "tab", "aria-selected": this.view === v ? 'true' : 'false', class: { 'cal__view-btn': true, 'cal__view-btn--active': this.view === v }, onClick: () => this.switchView(v) }, (_a = t[v]) !== null && _a !== void 0 ? _a : v));
+        }))) : (h("span", { class: "cal__views-spacer" }))), h("div", { key: '152eacc1320a7b3d0e33c31e9c6cbf04cd756855', class: "cal__body", part: "body" }, this.view === 'month' ? (h("co-calendar-month", { events: this.normalized, year: a.year, month: a.month, locale: this.locale, firstDayOfWeek: this.firstDayOfWeek, timeZone: this.tz, minDate: this.minDate, maxDate: this.maxDate, editable: this.editable, selectable: this.selectable, maxLanes: this.dayMaxEvents, onCoDaySelect: this.handleDaySelect, onCoEventClick: this.handleEventClick, onCoEventDrop: this.handleEventDrop, onCoMoreClick: this.handleMoreClick })) : (h("div", { class: "cal__placeholder" }, h("co-icon", { name: "calendar-dots", size: 32 }), h("p", null, `${this.view} view — coming soon`))))));
+    }
+    static get is() { return "co-event-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-event-calendar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-event-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "view": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'month' | 'week' | 'day' | 'agenda'",
+                    "resolved": "\"agenda\" | \"day\" | \"month\" | \"week\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active view. Phase 1 ships `month`; week/day/agenda land in later phases."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "view",
+                "defaultValue": "'month'"
+            },
+            "date": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Anchor date \"YYYY-MM-DD\" controlling the visible period. Persisted by host."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date"
+            },
+            "events": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CoCalendarEvent[] | string",
+                    "resolved": "CoCalendarEvent[] | string",
+                    "references": {
+                        "CoCalendarEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::CoCalendarEvent",
+                            "referenceLocation": "CoCalendarEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Events: an array or a JSON string (raw-HTML use)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "events",
+                "defaultValue": "[]"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es-CO'"
+            },
+            "timeZone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "IANA timezone for wall-clock rendering. Defaults to the browser zone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-zone"
+            },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Master interaction gate (per-event `editable` can still lock individuals)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "true"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow empty-day selection to request a create."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            },
+            "dayMaxEvents": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max event lanes per day before \"+N more\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day-max-events",
+                "defaultValue": "3"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest interactable day \"YYYY-MM-DD\" (past-block)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest interactable day \"YYYY-MM-DD\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First day of week, 0=Sun..6=Sat."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "1"
+            },
+            "availableViews": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Views offered in the switcher. Defaults to the implemented set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "available-views",
+                "defaultValue": "['month']"
+            },
+            "statusColors": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, { backgroundColor?: string; borderColor?: string }> | string",
+                    "resolved": "string | undefined | { backgroundColor?: string | undefined; borderColor?: string | undefined; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional status\u2192{backgroundColor,borderColor} map (object or JSON string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-colors"
+            },
+            "defaultDurationMinutes": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default minutes for a timed event missing an end."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-duration-minutes",
+                "defaultValue": "60"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "anchor": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coEventClick",
+                "name": "coEventClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event chip was activated."
+                },
+                "complexType": {
+                    "original": "{ event: NormalizedEvent }",
+                    "resolved": "{ event: NormalizedEvent; }",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "coDateSelect",
+                "name": "coDateSelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A date/range was selected (create request)."
+                },
+                "complexType": {
+                    "original": "{ start: string; end: string; allDay: boolean }",
+                    "resolved": "{ start: string; end: string; allDay: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coEventDrop",
+                "name": "coEventDrop",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event was dragged to a new time (move). `revert` is a host convenience."
+                },
+                "complexType": {
+                    "original": "{\n    event: NormalizedEvent;\n    start: string;\n    end: string;\n    oldStart: string;\n    oldEnd: string;\n    allDay: boolean;\n    revert: () => void;\n  }",
+                    "resolved": "{ event: NormalizedEvent; start: string; end: string; oldStart: string; oldEnd: string; allDay: boolean; revert: () => void; }",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "coDatesSet",
+                "name": "coDatesSet",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The visible period changed \u2192 host should refetch and persist the view pref."
+                },
+                "complexType": {
+                    "original": "{\n    view: string;\n    start: string;\n    end: string;\n    activeDate: string;\n  }",
+                    "resolved": "{ view: string; start: string; end: string; activeDate: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coViewChange",
+                "name": "coViewChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The active view changed."
+                },
+                "complexType": {
+                    "original": "{ view: string }",
+                    "resolved": "{ view: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coMoreClick",
+                "name": "coMoreClick",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\"+N more\" was activated for a day."
+                },
+                "complexType": {
+                    "original": "{ date: string; events: NormalizedEvent[] }",
+                    "resolved": "{ date: string; events: NormalizedEvent[]; }",
+                    "references": {
+                        "NormalizedEvent": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-calendar-utils",
+                            "id": "../calendar-utils/dist/index.d.ts::NormalizedEvent",
+                            "referenceLocation": "NormalizedEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "date",
+                "methodName": "onDateChange"
+            }];
+    }
+}
+// ── helpers ─────────────────────────────────────────────────────────────────
+function parseEventsProp(value) {
+    if (Array.isArray(value))
+        return value;
+    if (typeof value === 'string' && value.trim()) {
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return [];
+}
+function parseStatusColors(value) {
+    if (!value)
+        return undefined;
+    if (typeof value === 'string') {
+        try {
+            return JSON.parse(value);
+        }
+        catch (_a) {
+            return undefined;
+        }
+    }
+    return value;
+}
+/** Local import-free wall-clock day; mirrors engine zonedDateKey to avoid a dep here. */
+function zonedDay(ms, timeZone) {
+    const parts = new Intl.DateTimeFormat('en-CA', {
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    }).format(new Date(ms));
+    return parts; // en-CA → "YYYY-MM-DD"
+}

package/dist/collection/components/co-fab/co-fab.js

@@ -15,14 +15,14 @@ export class CoFab {
     render() {
         const iconSize = this.size === 'l' ? 24 : this.size === 's' ? 18 : 20;
         const isExtended = !!this.label;
-        return (h("button", { key: '90ffc7d273a4aca5bbe3214d9f6ba3a8c5d063da', class: {
+        return (h("button", { key: '4e5be05c3e525fa2de4930300f562d2da993cd60', class: {
                 'co-fab': true,
                 [`co-fab--${this.variant}`]: true,
                 [`co-fab--${this.size}`]: true,
                 'co-fab--extended': isExtended,
                 'co-fab--disabled': this.disabled,
                 [`co-fab--${this.position}`]: this.position !== 'none',
-            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: '29745cdc0f20d21d4d5a130d523f7a6839a9927c', name: this.icon, size: iconSize }), this.label && h("span", { key: '9314aa4e634e2bb3280bc9015e6a60b265afca43', class: "co-fab__label" }, this.label)));
+            }, type: "button", disabled: this.disabled, onClick: this.handleClick, "aria-label": this.label || this.icon }, h("co-icon", { key: 'a827e3c5bfc7fdd162c8618443eb6696a4659709', name: this.icon, size: iconSize }), this.label && h("span", { key: '879b3be3bc35fc7b2eeeebc9263e2d9a10e3f5ba', class: "co-fab__label" }, this.label)));
     }
     static get is() { return "co-fab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-file-field/co-file-field.css

@@ -58,7 +58,9 @@
   justify-content: center;
   gap: var(--co-spacing-md);
   padding: var(--co-spacing-4xl) var(--co-spacing-2xl);
-  background: var(--co-semantic-surface-hover);
+  background: color-mix(in srgb, var(--co-semantic-surface-hover) 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 dashed var(--co-semantic-border-default);
   border-radius: var(--co-border-radius-sm);
   cursor: pointer;
@@ -387,3 +389,7 @@
   grid-column: 2;
   min-width: 0;
 }
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-file-field__dropzone { background: var(--co-semantic-surface-hover); }
+}