@besaitech/ng-design-system 0.0.76 → 0.0.78

package/fesm2022/besaitech-ng-design-system-calendar.mjs

@@ -0,0 +1,924 @@
+import { startOfDay, addDays, isSameDay, SdsIcon, SdsSegmented } from '@besaitech/ng-design-system';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, model, numberAttribute, booleanAttribute, output, signal, effect, untracked, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+const MS_PER_MINUTE = 60_000;
+function toDate(value) {
+    return value instanceof Date ? new Date(value.getTime()) : new Date(value);
+}
+/** Minutes since local midnight. Read off the clock, never from an epoch difference — see below. */
+function minutesOfDay(d) {
+    return d.getHours() * 60 + d.getMinutes();
+}
+function startOfWeek(d, firstDayOfWeek) {
+    const day = startOfDay(d);
+    const shift = (day.getDay() - firstDayOfWeek + 7) % 7;
+    return addDays(day, -shift);
+}
+/**
+ * The days a view shows.
+ *
+ * <p>`month` is always a 6×7 block, never 4–6 ragged rows: a grid that changes height as you page
+ * through the year makes everything below it jump.
+ */
+function visibleDays(view, date, firstDayOfWeek) {
+    if (view === 'day') {
+        return [startOfDay(date)];
+    }
+    if (view === '3day') {
+        const from = startOfDay(date);
+        return [0, 1, 2].map((i) => addDays(from, i));
+    }
+    if (view === 'week') {
+        const from = startOfWeek(date, firstDayOfWeek);
+        return Array.from({ length: 7 }, (_, i) => addDays(from, i));
+    }
+    const first = new Date(date.getFullYear(), date.getMonth(), 1);
+    const from = startOfWeek(first, firstDayOfWeek);
+    return Array.from({ length: 42 }, (_, i) => addDays(from, i));
+}
+/** The half-open range a view covers — what a host should fetch for. */
+function visibleRange(view, date, firstDayOfWeek) {
+    const days = visibleDays(view, date, firstDayOfWeek);
+    return { start: days[0], end: addDays(days[days.length - 1], 1) };
+}
+/** Paging: one month, one week, three days or one day at a time, in the view's own unit. */
+function step(view, date, direction) {
+    switch (view) {
+        case 'month': {
+            const d = new Date(date.getFullYear(), date.getMonth() + direction, 1);
+            return d;
+        }
+        case 'week':
+            return addDays(date, 7 * direction);
+        case '3day':
+            return addDays(date, 3 * direction);
+        default:
+            return addDays(date, direction);
+    }
+}
+/** Whether an event touches a given day at all. Half-open: an event ending at 00:00 is not there. */
+function occursOn(start, end, day) {
+    const from = startOfDay(day).getTime();
+    const to = addDays(startOfDay(day), 1).getTime();
+    return start.getTime() < to && end.getTime() > from;
+}
+/**
+ * Place one day's timed events in the grid, side by side where they overlap.
+ *
+ * <p>The classic column packing: events are clustered into runs that transitively overlap, each
+ * takes the leftmost column that is free at its time, and the whole cluster is then divided by the
+ * widest point. So two appointments at 09:00 each take half the width and a third takes a third —
+ * and a 14:00 appointment with nothing beside it is full width, because it is in its own cluster.
+ *
+ * <p><b>Vertical position is read off the clock, not from an epoch difference.</b> On the two days a
+ * year when the clocks move, a 09:00–10:00 appointment is still drawn at 09:00 and one hour tall;
+ * computing it from elapsed milliseconds would slide every event after the change by an hour.
+ *
+ * <p>Events are clipped to the visible window rather than dropped: a night shift starting at 06:00
+ * on a grid that opens at 08:00 should still show, flush to the top, not vanish.
+ */
+function placeDay(events, day, startHour, endHour, defaultMinutes) {
+    const windowStart = startHour * 60;
+    const windowEnd = endHour * 60;
+    const span = Math.max(1, windowEnd - windowStart);
+    const dayStart = startOfDay(day);
+    const nextDay = addDays(dayStart, 1);
+    const resolved = events
+        .map((event) => {
+        const start = toDate(event.start);
+        const end = event.end
+            ? toDate(event.end)
+            : new Date(start.getTime() + defaultMinutes * MS_PER_MINUTE);
+        return { event, start, end };
+    })
+        .filter((e) => !e.event.allDay && occursOn(e.start, e.end, day))
+        .map((e) => {
+        // Clip to this day first, so a block running past midnight is drawn on both days correctly.
+        const from = e.start < dayStart ? dayStart : e.start;
+        const to = e.end > nextDay ? nextDay : e.end;
+        const fromMin = from.getTime() === dayStart.getTime() ? 0 : minutesOfDay(from);
+        const toMin = to.getTime() === nextDay.getTime() ? 24 * 60 : minutesOfDay(to);
+        return { ...e, fromMin, toMin: Math.max(toMin, fromMin + 1) };
+    })
+        .filter((e) => e.toMin > windowStart && e.fromMin < windowEnd)
+        .sort((a, b) => a.fromMin - b.fromMin || b.toMin - a.toMin);
+    // Cluster transitively overlapping events; each cluster is divided independently.
+    const placed = [];
+    let cluster = [];
+    let clusterEnd = -1;
+    const flush = () => {
+        if (!cluster.length)
+            return;
+        const columnEnds = [];
+        const columnOf = new Map();
+        for (const item of cluster) {
+            let column = columnEnds.findIndex((endMin) => endMin <= item.fromMin);
+            if (column === -1) {
+                column = columnEnds.length;
+            }
+            columnEnds[column] = item.toMin;
+            columnOf.set(item, column);
+        }
+        const columns = columnEnds.length;
+        for (const item of cluster) {
+            const top = (Math.max(item.fromMin, windowStart) - windowStart) / span;
+            const bottom = (Math.min(item.toMin, windowEnd) - windowStart) / span;
+            const column = columnOf.get(item) ?? 0;
+            placed.push({
+                event: item.event,
+                start: item.start,
+                end: item.end,
+                top,
+                height: Math.max(bottom - top, 0.012),
+                left: column / columns,
+                width: 1 / columns,
+            });
+        }
+        cluster = [];
+        clusterEnd = -1;
+    };
+    for (const item of resolved) {
+        if (cluster.length && item.fromMin >= clusterEnd) {
+            flush();
+        }
+        cluster.push(item);
+        clusterEnd = Math.max(clusterEnd, item.toMin);
+    }
+    flush();
+    return placed;
+}
+/** The all-day (and multi-day) events touching a given day, in a stable order. */
+function allDayOn(events, day, defaultMinutes) {
+    return events
+        .map((event) => {
+        const start = toDate(event.start);
+        const end = event.end
+            ? toDate(event.end)
+            : new Date(start.getTime() + defaultMinutes * MS_PER_MINUTE);
+        return { event, start, end };
+    })
+        .filter((e) => e.event.allDay && occursOn(e.start, e.end, day))
+        .sort((a, b) => a.start.getTime() - b.start.getTime())
+        .map((e) => e.event);
+}
+/** Every event touching a day, all-day first then by start — what a month cell lists. */
+function eventsOn(events, day, defaultMinutes) {
+    return events
+        .map((event) => {
+        const start = toDate(event.start);
+        const end = event.end
+            ? toDate(event.end)
+            : new Date(start.getTime() + defaultMinutes * MS_PER_MINUTE);
+        return { event, start, end };
+    })
+        .filter((e) => occursOn(e.start, e.end, day))
+        .sort((a, b) => Number(!!b.event.allDay) - Number(!!a.event.allDay) ||
+        a.start.getTime() - b.start.getTime())
+        .map((e) => e.event);
+}
+
+/** Written out in full — a composed `bg-accent-${c}-soft` would produce no CSS. See sds-severity. */
+const CHIP = {
+    brand: 'bg-brand-500/15 text-brand-700 dark:text-brand-200 border-brand-500/40',
+    blue: 'bg-accent-blue-soft text-accent-blue border-accent-blue/40',
+    green: 'bg-accent-green-soft text-accent-green border-accent-green/40',
+    amber: 'bg-accent-amber-soft text-accent-amber border-accent-amber/40',
+    red: 'bg-accent-red-soft text-accent-red border-accent-red/40',
+    indigo: 'bg-accent-indigo-soft text-accent-indigo border-accent-indigo/40',
+    neutral: 'bg-muted text-ink-soft border-border',
+};
+const DOT = {
+    brand: 'bg-brand-500',
+    blue: 'bg-accent-blue',
+    green: 'bg-accent-green',
+    amber: 'bg-accent-amber',
+    red: 'bg-accent-red',
+    indigo: 'bg-accent-indigo',
+    neutral: 'bg-ink-faint',
+};
+/**
+ * A calendar of events — month, week, three days or one day.
+ *
+ * <p><b>Not {@link SdsCalendar}</b>, which is the month grid inside the date picker and exists to
+ * pick a date. This one shows what is ON the days, and it owns no data: the host passes `events`
+ * and listens to `rangeChange` to fetch the next lot.
+ *
+ * <p><b>It stores nothing and decides nothing.</b> `view` and `date` are two-way models, so the
+ * host can deep-link a view or restore one; every interaction is an output. That is what lets the
+ * same component serve a doctor's diary, a room's bookings or a delivery schedule without knowing
+ * what any of them are.
+ *
+ * <p><b>Dates come from `Intl`, control words come from you.</b> Day and month names follow
+ * `[locale]` automatically, so the part that is genuinely per-language needs no wiring — but
+ * "Today", "All day" and "+2 more" are inputs with English defaults, and a non-English app MUST
+ * pass them. An icon-only control's accessible name is the only name it has.
+ *
+ * <p><b>Mobile.</b> The week view keeps a readable minimum column width and scrolls sideways under
+ * its own header rather than squeezing seven columns onto a phone; the month view drops from chips
+ * to dots below `sm`. Both are CSS, so there is no resize listener to get wrong and no layout that
+ * depends on JavaScript having run.
+ *
+ * @example
+ * <sds-event-calendar
+ *   [events]="appointments()"
+ *   [(view)]="view"
+ *   [(date)]="focused"
+ *   [todayLabel]="'calendar.today' | translate"
+ *   (eventClick)="open($event)"
+ *   (rangeChange)="load($event)" />
+ */
+class SdsEventCalendar {
+    destroyRef = inject(DestroyRef);
+    events = input([], ...(ngDevMode ? [{ debugName: "events" }] : []));
+    /** Two-way: the host can deep-link or restore a view. */
+    view = model('week', ...(ngDevMode ? [{ debugName: "view" }] : []));
+    /** Two-way: any day inside the span being shown. */
+    date = model(new Date(), ...(ngDevMode ? [{ debugName: "date" }] : []));
+    /** 1 = Monday (the European week), 0 = Sunday. */
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** The hours the time grid shows. Events outside are clipped to the edge, never dropped. */
+    startHour = input(7, ...(ngDevMode ? [{ debugName: "startHour", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    endHour = input(20, ...(ngDevMode ? [{ debugName: "endHour", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    hourHeight = input(48, ...(ngDevMode ? [{ debugName: "hourHeight", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** How long an event with no `end` is assumed to last. */
+    defaultMinutes = input(30, ...(ngDevMode ? [{ debugName: "defaultMinutes", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** CSS height of the scrolling body (month: of the whole grid). */
+    height = input('32rem', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /** BCP-47 tag for day and month names. Empty follows the browser. */
+    locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    nowIndicator = input(true, ...(ngDevMode ? [{ debugName: "nowIndicator", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    showViewSwitcher = input(true, ...(ngDevMode ? [{ debugName: "showViewSwitcher", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Chips per month cell before it collapses to "+N". */
+    maxPerCell = input(3, ...(ngDevMode ? [{ debugName: "maxPerCell", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Control words. English defaults — a non-English app must pass every one of these. */
+    todayLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayLabel" }] : []));
+    previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    allDayLabel = input('All day', ...(ngDevMode ? [{ debugName: "allDayLabel" }] : []));
+    /** `{count}` is substituted. */
+    moreLabel = input('+{count} more', ...(ngDevMode ? [{ debugName: "moreLabel" }] : []));
+    viewSwitcherLabel = input('View', ...(ngDevMode ? [{ debugName: "viewSwitcherLabel" }] : []));
+    monthLabel = input('Month', ...(ngDevMode ? [{ debugName: "monthLabel" }] : []));
+    weekLabel = input('Week', ...(ngDevMode ? [{ debugName: "weekLabel" }] : []));
+    threeDayLabel = input('3 days', ...(ngDevMode ? [{ debugName: "threeDayLabel" }] : []));
+    dayLabel = input('Day', ...(ngDevMode ? [{ debugName: "dayLabel" }] : []));
+    eventClick = output();
+    /** A click on empty time, snapped to the hour that was clicked. */
+    slotClick = output();
+    dayClick = output();
+    /** The span now on screen — fetch for this. Fires whenever the view or the date moves. */
+    rangeChange = output();
+    /** Ticks the now-indicator. One timer, cleared with the component. */
+    now = signal(new Date(), ...(ngDevMode ? [{ debugName: "now" }] : []));
+    constructor() {
+        const timer = setInterval(() => this.now.set(new Date()), 60_000);
+        this.destroyRef.onDestroy(() => clearInterval(timer));
+        /*
+         * Announce the visible span whenever it changes, HOWEVER it changed. Emitting from the toolbar
+         * handlers instead would look identical until a host moved `date` itself — a deep link, a
+         * "jump to this appointment", restoring a remembered day — and then the calendar would show a
+         * week nobody fetched. The models are two-way, so the host is a first-class navigator.
+         */
+        effect(() => {
+            const view = this.view();
+            const { start, end } = visibleRange(view, this.date(), this.firstDayOfWeek());
+            untracked(() => this.rangeChange.emit({ start, end, view }));
+        });
+    }
+    days = computed(() => visibleDays(this.view(), this.date(), this.firstDayOfWeek()), ...(ngDevMode ? [{ debugName: "days" }] : []));
+    hours = computed(() => {
+        const out = [];
+        for (let h = this.startHour(); h <= this.endHour(); h++)
+            out.push(h);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "hours" }] : []));
+    bodyHeight = computed(() => Math.max(1, this.endHour() - this.startHour()) * this.hourHeight(), ...(ngDevMode ? [{ debugName: "bodyHeight" }] : []));
+    columns = computed(() => `3.25rem repeat(${this.days().length}, minmax(0, 1fr))`, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Keeps a day column readable on a phone; the grid scrolls sideways instead of squeezing. */
+    minWidth = computed(() => {
+        const perDay = this.days().length > 3 ? 92 : 120;
+        return 52 + this.days().length * perDay;
+    }, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
+    intl = computed(() => this.locale() || undefined, ...(ngDevMode ? [{ debugName: "intl" }] : []));
+    weekdayNames = computed(() => {
+        const fmt = new Intl.DateTimeFormat(this.intl(), { weekday: 'short' });
+        const base = startOfDay(new Date(2024, 0, 7)); // a Sunday
+        return Array.from({ length: 7 }, (_, i) => fmt.format(addDays(base, (this.firstDayOfWeek() + i) % 7)));
+    }, ...(ngDevMode ? [{ debugName: "weekdayNames" }] : []));
+    title = computed(() => {
+        const days = this.days();
+        const view = this.view();
+        if (view === 'day') {
+            return new Intl.DateTimeFormat(this.intl(), {
+                weekday: 'long',
+                day: 'numeric',
+                month: 'long',
+                year: 'numeric',
+            }).format(days[0]);
+        }
+        if (view === 'month') {
+            return new Intl.DateTimeFormat(this.intl(), { month: 'long', year: 'numeric' }).format(this.date());
+        }
+        const first = days[0];
+        const last = days[days.length - 1];
+        const sameMonth = first.getMonth() === last.getMonth();
+        const short = new Intl.DateTimeFormat(this.intl(), { day: 'numeric', month: 'short' });
+        const long = new Intl.DateTimeFormat(this.intl(), {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        });
+        return sameMonth
+            ? `${first.getDate()} – ${long.format(last)}`
+            : `${short.format(first)} – ${long.format(last)}`;
+    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    viewOptions = computed(() => [
+        { value: 'month', label: this.monthLabel() },
+        { value: 'week', label: this.weekLabel() },
+        { value: '3day', label: this.threeDayLabel() },
+        { value: 'day', label: this.dayLabel() },
+    ], ...(ngDevMode ? [{ debugName: "viewOptions" }] : []));
+    hasAllDay = computed(() => this.days().some((d) => allDayOn(this.events(), d, this.defaultMinutes()).length > 0), ...(ngDevMode ? [{ debugName: "hasAllDay" }] : []));
+    nowTop = computed(() => {
+        const minutes = minutesOfDay(this.now());
+        const from = this.startHour() * 60;
+        const to = this.endHour() * 60;
+        if (minutes < from || minutes > to)
+            return null;
+        return ((minutes - from) / 60) * this.hourHeight();
+    }, ...(ngDevMode ? [{ debugName: "nowTop" }] : []));
+    placed(day) {
+        return placeDay(this.events(), day, this.startHour(), this.endHour(), this.defaultMinutes());
+    }
+    allDayEvents(day) {
+        return allDayOn(this.events(), day, this.defaultMinutes());
+    }
+    cellEvents(day) {
+        return eventsOn(this.events(), day, this.defaultMinutes());
+    }
+    isToday(day) {
+        return isSameDay(day, this.now());
+    }
+    inFocusedMonth(day) {
+        return day.getMonth() === this.date().getMonth();
+    }
+    shortWeekday(day) {
+        return new Intl.DateTimeFormat(this.intl(), { weekday: 'short' }).format(day);
+    }
+    hourLabel(hour) {
+        return new Intl.DateTimeFormat(this.intl(), { hour: 'numeric', minute: '2-digit' }).format(new Date(2024, 0, 1, hour, 0));
+    }
+    clock(value) {
+        return new Intl.DateTimeFormat(this.intl(), { hour: '2-digit', minute: '2-digit' }).format(toDate(value));
+    }
+    hourTop(hour) {
+        return (hour - this.startHour()) * this.hourHeight();
+    }
+    chipClass(e) {
+        return CHIP[e.color ?? 'brand'];
+    }
+    dotClass(e) {
+        return DOT[e.color ?? 'brand'];
+    }
+    setView(next) {
+        this.view.set(next);
+    }
+    move(direction) {
+        this.date.set(step(this.view(), this.date(), direction));
+    }
+    goToday() {
+        this.date.set(new Date());
+    }
+    /** A click on empty grid becomes a slot of `defaultMinutes`, snapped to the hour clicked. */
+    onGridClick(event, day) {
+        const host = event.currentTarget;
+        const y = event.clientY - host.getBoundingClientRect().top;
+        const minutes = this.startHour() * 60 + (y / this.hourHeight()) * 60;
+        const snapped = Math.floor(minutes / this.defaultMinutes()) * this.defaultMinutes();
+        const start = new Date(startOfDay(day).getTime() + snapped * 60_000);
+        this.slotClick.emit({
+            start,
+            end: new Date(start.getTime() + this.defaultMinutes() * 60_000),
+        });
+    }
+    onEventClick(event, placed) {
+        // Without this the click falls through to the grid and also opens "new appointment".
+        event.stopPropagation();
+        this.eventClick.emit(placed.event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsEventCalendar, isStandalone: true, selector: "sds-event-calendar", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, hourHeight: { classPropertyName: "hourHeight", publicName: "hourHeight", isSignal: true, isRequired: false, transformFunction: null }, defaultMinutes: { classPropertyName: "defaultMinutes", publicName: "defaultMinutes", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, nowIndicator: { classPropertyName: "nowIndicator", publicName: "nowIndicator", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showViewSwitcher: { classPropertyName: "showViewSwitcher", publicName: "showViewSwitcher", isSignal: true, isRequired: false, transformFunction: null }, maxPerCell: { classPropertyName: "maxPerCell", publicName: "maxPerCell", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, allDayLabel: { classPropertyName: "allDayLabel", publicName: "allDayLabel", isSignal: true, isRequired: false, transformFunction: null }, moreLabel: { classPropertyName: "moreLabel", publicName: "moreLabel", isSignal: true, isRequired: false, transformFunction: null }, viewSwitcherLabel: { classPropertyName: "viewSwitcherLabel", publicName: "viewSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, threeDayLabel: { classPropertyName: "threeDayLabel", publicName: "threeDayLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", date: "dateChange", eventClick: "eventClick", slotClick: "slotClick", dayClick: "dayClick", rangeChange: "rangeChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="flex flex-col overflow-hidden rounded-card border border-border bg-surface">
+      @if (showToolbar()) {
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-3 py-2.5">
+          <div class="flex shrink-0 items-center gap-1">
+            <button
+              type="button"
+              [attr.aria-label]="previousLabel()"
+              [title]="previousLabel()"
+              class="inline-flex size-8 items-center justify-center rounded-control text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="move(-1)"
+            >
+              <sds-icon name="chevron-left" [size]="18" />
+            </button>
+            <button
+              type="button"
+              class="inline-flex h-8 items-center rounded-control border border-border px-3 text-sm font-medium text-ink transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="goToday()"
+            >
+              {{ todayLabel() }}
+            </button>
+            <button
+              type="button"
+              [attr.aria-label]="nextLabel()"
+              [title]="nextLabel()"
+              class="inline-flex size-8 items-center justify-center rounded-control text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="move(1)"
+            >
+              <sds-icon name="chevron-right" [size]="18" />
+            </button>
+          </div>
+
+          <h2 class="min-w-0 flex-1 truncate text-sm font-semibold text-ink sm:text-base">
+            {{ title() }}
+          </h2>
+
+          @if (showViewSwitcher()) {
+            <sds-segmented
+              size="sm"
+              [ariaLabel]="viewSwitcherLabel()"
+              [options]="viewOptions()"
+              [value]="view()"
+              (valueChange)="setView($event)"
+            />
+          }
+        </div>
+      }
+
+      @if (view() === 'month') {
+        <!-- ------------------------------------------------------------------ month -->
+        <div class="grid grid-cols-7 border-b border-border bg-muted/50">
+          @for (d of weekdayNames(); track $index) {
+            <div class="px-1 py-1.5 text-center text-[11px] font-medium text-ink-soft">
+              {{ d }}
+            </div>
+          }
+        </div>
+        <div class="grid grid-cols-7 grid-rows-6" [style.height]="height()">
+          @for (day of days(); track day.getTime()) {
+            <div
+              class="flex min-w-0 flex-col gap-0.5 border-t border-l border-border p-1 first:border-l-0 [&:nth-child(7n+1)]:border-l-0"
+              [class.bg-muted]="!inFocusedMonth(day)"
+              [class.opacity-60]="!inFocusedMonth(day)"
+            >
+              <button
+                type="button"
+                class="self-start rounded-full px-1.5 text-[11px] font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+                [class]="
+                  isToday(day) ? 'bg-brand-500 text-white hover:bg-brand-600' : 'text-ink-soft'
+                "
+                (click)="dayClick.emit(day)"
+              >
+                {{ day.getDate() }}
+              </button>
+
+              <!-- Phones get dots: four chips in a 48px-wide cell is four unreadable smears. -->
+              <div class="flex flex-wrap items-center gap-0.5 px-0.5 sm:hidden">
+                @for (e of cellEvents(day).slice(0, 4); track e.id) {
+                  <span [class]="dotClass(e) + ' size-1.5 rounded-full'" aria-hidden="true"></span>
+                }
+                @if (cellEvents(day).length) {
+                  <span class="sr-only">{{ cellEvents(day).length }}</span>
+                }
+              </div>
+
+              <div class="hidden min-h-0 flex-col gap-0.5 overflow-hidden sm:flex">
+                @for (e of cellEvents(day).slice(0, maxPerCell()); track e.id) {
+                  <button
+                    type="button"
+                    [class]="
+                      chipClass(e) + ' truncate rounded border px-1 py-px text-left text-[11px]'
+                    "
+                    [class.line-through]="e.cancelled"
+                    [class.opacity-60]="e.cancelled"
+                    (click)="eventClick.emit(e)"
+                  >
+                    @if (!e.allDay) {
+                      <span class="tabular-nums opacity-80">{{ clock(e.start) }}</span>
+                    }
+                    {{ e.title }}
+                  </button>
+                }
+                @if (cellEvents(day).length > maxPerCell()) {
+                  <button
+                    type="button"
+                    class="px-1 text-left text-[11px] font-medium text-ink-soft hover:text-ink"
+                    (click)="dayClick.emit(day)"
+                  >
+                    {{
+                      moreLabel().replace('{count}', '' + (cellEvents(day).length - maxPerCell()))
+                    }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      } @else {
+        <!-- ------------------------------------------------- week / 3 days / one day -->
+        <div class="overflow-x-auto">
+          <div [style.min-width.px]="minWidth()">
+            <div class="grid border-b border-border" [style.grid-template-columns]="columns()">
+              <div class="border-r border-border"></div>
+              @for (day of days(); track day.getTime()) {
+                <button
+                  type="button"
+                  class="flex flex-col items-center gap-0.5 px-1 py-1.5 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500"
+                  (click)="dayClick.emit(day)"
+                >
+                  <span class="text-[11px] uppercase text-ink-faint">{{ shortWeekday(day) }}</span>
+                  <span
+                    class="inline-flex size-6 items-center justify-center rounded-full text-sm font-semibold"
+                    [class]="isToday(day) ? 'bg-brand-500 text-white' : 'text-ink'"
+                  >
+                    {{ day.getDate() }}
+                  </span>
+                </button>
+              }
+            </div>
+
+            @if (hasAllDay()) {
+              <div class="grid border-b border-border" [style.grid-template-columns]="columns()">
+                <div
+                  class="border-r border-border px-1 py-1 text-right text-[10px] leading-tight text-ink-faint"
+                >
+                  {{ allDayLabel() }}
+                </div>
+                @for (day of days(); track day.getTime()) {
+                  <div class="flex min-w-0 flex-col gap-0.5 p-1">
+                    @for (e of allDayEvents(day); track e.id) {
+                      <button
+                        type="button"
+                        [class]="
+                          chipClass(e) + ' truncate rounded border px-1 py-px text-left text-[11px]'
+                        "
+                        [class.line-through]="e.cancelled"
+                        (click)="eventClick.emit(e)"
+                      >
+                        {{ e.title }}
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="overflow-y-auto" [style.height]="height()">
+              <div class="grid" [style.grid-template-columns]="columns()">
+                <div class="relative border-r border-border" [style.height.px]="bodyHeight()">
+                  @for (h of hours(); track h) {
+                    <span
+                      class="absolute right-1.5 -translate-y-1/2 text-[10px] tabular-nums text-ink-faint"
+                      [style.top.px]="hourTop(h)"
+                    >
+                      {{ hourLabel(h) }}
+                    </span>
+                  }
+                </div>
+
+                @for (day of days(); track day.getTime()) {
+                  <div
+                    class="relative border-r border-border last:border-r-0"
+                    [style.height.px]="bodyHeight()"
+                    (click)="onGridClick($event, day)"
+                  >
+                    @for (h of hours(); track h) {
+                      <div
+                        class="pointer-events-none absolute inset-x-0 border-t border-border/70"
+                        [style.top.px]="hourTop(h)"
+                      ></div>
+                    }
+
+                    @if (nowIndicator() && isToday(day) && nowTop() !== null) {
+                      <div
+                        class="pointer-events-none absolute inset-x-0 z-20 flex items-center"
+                        [style.top.px]="nowTop()"
+                        aria-hidden="true"
+                      >
+                        <span class="size-2 shrink-0 rounded-full bg-danger"></span>
+                        <span class="h-px flex-1 bg-danger"></span>
+                      </div>
+                    }
+
+                    @for (p of placed(day); track p.event.id) {
+                      <button
+                        type="button"
+                        [class]="
+                          chipClass(p.event) +
+                          ' absolute z-10 overflow-hidden rounded border px-1 py-0.5 text-left transition-shadow hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500'
+                        "
+                        [class.line-through]="p.event.cancelled"
+                        [class.opacity-60]="p.event.cancelled"
+                        [style.top.%]="p.top * 100"
+                        [style.height.%]="p.height * 100"
+                        [style.left.%]="p.left * 100"
+                        [style.width.%]="p.width * 100"
+                        [attr.aria-label]="
+                          p.event.title + ', ' + clock(p.start) + ' – ' + clock(p.end)
+                        "
+                        (click)="onEventClick($event, p)"
+                      >
+                        <span class="block truncate text-[11px] font-medium leading-tight">
+                          {{ p.event.title }}
+                        </span>
+                        @if (p.height > 0.045) {
+                          <span class="block truncate text-[10px] leading-tight opacity-80">
+                            {{ clock(p.start) }}
+                            @if (p.event.subtitle) {
+                              · {{ p.event.subtitle }}
+                            }
+                          </span>
+                        }
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsSegmented, selector: "sds-segmented", inputs: ["options", "value", "size", "ariaLabel", "ariaLabelledby", "disabled", "fullWidth", "iconOnly"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsEventCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-event-calendar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon, SdsSegmented],
+                    host: { class: 'block' },
+                    template: `
+    <div class="flex flex-col overflow-hidden rounded-card border border-border bg-surface">
+      @if (showToolbar()) {
+        <div class="flex flex-wrap items-center gap-x-3 gap-y-2 border-b border-border px-3 py-2.5">
+          <div class="flex shrink-0 items-center gap-1">
+            <button
+              type="button"
+              [attr.aria-label]="previousLabel()"
+              [title]="previousLabel()"
+              class="inline-flex size-8 items-center justify-center rounded-control text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="move(-1)"
+            >
+              <sds-icon name="chevron-left" [size]="18" />
+            </button>
+            <button
+              type="button"
+              class="inline-flex h-8 items-center rounded-control border border-border px-3 text-sm font-medium text-ink transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="goToday()"
+            >
+              {{ todayLabel() }}
+            </button>
+            <button
+              type="button"
+              [attr.aria-label]="nextLabel()"
+              [title]="nextLabel()"
+              class="inline-flex size-8 items-center justify-center rounded-control text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              (click)="move(1)"
+            >
+              <sds-icon name="chevron-right" [size]="18" />
+            </button>
+          </div>
+
+          <h2 class="min-w-0 flex-1 truncate text-sm font-semibold text-ink sm:text-base">
+            {{ title() }}
+          </h2>
+
+          @if (showViewSwitcher()) {
+            <sds-segmented
+              size="sm"
+              [ariaLabel]="viewSwitcherLabel()"
+              [options]="viewOptions()"
+              [value]="view()"
+              (valueChange)="setView($event)"
+            />
+          }
+        </div>
+      }
+
+      @if (view() === 'month') {
+        <!-- ------------------------------------------------------------------ month -->
+        <div class="grid grid-cols-7 border-b border-border bg-muted/50">
+          @for (d of weekdayNames(); track $index) {
+            <div class="px-1 py-1.5 text-center text-[11px] font-medium text-ink-soft">
+              {{ d }}
+            </div>
+          }
+        </div>
+        <div class="grid grid-cols-7 grid-rows-6" [style.height]="height()">
+          @for (day of days(); track day.getTime()) {
+            <div
+              class="flex min-w-0 flex-col gap-0.5 border-t border-l border-border p-1 first:border-l-0 [&:nth-child(7n+1)]:border-l-0"
+              [class.bg-muted]="!inFocusedMonth(day)"
+              [class.opacity-60]="!inFocusedMonth(day)"
+            >
+              <button
+                type="button"
+                class="self-start rounded-full px-1.5 text-[11px] font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+                [class]="
+                  isToday(day) ? 'bg-brand-500 text-white hover:bg-brand-600' : 'text-ink-soft'
+                "
+                (click)="dayClick.emit(day)"
+              >
+                {{ day.getDate() }}
+              </button>
+
+              <!-- Phones get dots: four chips in a 48px-wide cell is four unreadable smears. -->
+              <div class="flex flex-wrap items-center gap-0.5 px-0.5 sm:hidden">
+                @for (e of cellEvents(day).slice(0, 4); track e.id) {
+                  <span [class]="dotClass(e) + ' size-1.5 rounded-full'" aria-hidden="true"></span>
+                }
+                @if (cellEvents(day).length) {
+                  <span class="sr-only">{{ cellEvents(day).length }}</span>
+                }
+              </div>
+
+              <div class="hidden min-h-0 flex-col gap-0.5 overflow-hidden sm:flex">
+                @for (e of cellEvents(day).slice(0, maxPerCell()); track e.id) {
+                  <button
+                    type="button"
+                    [class]="
+                      chipClass(e) + ' truncate rounded border px-1 py-px text-left text-[11px]'
+                    "
+                    [class.line-through]="e.cancelled"
+                    [class.opacity-60]="e.cancelled"
+                    (click)="eventClick.emit(e)"
+                  >
+                    @if (!e.allDay) {
+                      <span class="tabular-nums opacity-80">{{ clock(e.start) }}</span>
+                    }
+                    {{ e.title }}
+                  </button>
+                }
+                @if (cellEvents(day).length > maxPerCell()) {
+                  <button
+                    type="button"
+                    class="px-1 text-left text-[11px] font-medium text-ink-soft hover:text-ink"
+                    (click)="dayClick.emit(day)"
+                  >
+                    {{
+                      moreLabel().replace('{count}', '' + (cellEvents(day).length - maxPerCell()))
+                    }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
+        </div>
+      } @else {
+        <!-- ------------------------------------------------- week / 3 days / one day -->
+        <div class="overflow-x-auto">
+          <div [style.min-width.px]="minWidth()">
+            <div class="grid border-b border-border" [style.grid-template-columns]="columns()">
+              <div class="border-r border-border"></div>
+              @for (day of days(); track day.getTime()) {
+                <button
+                  type="button"
+                  class="flex flex-col items-center gap-0.5 px-1 py-1.5 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500"
+                  (click)="dayClick.emit(day)"
+                >
+                  <span class="text-[11px] uppercase text-ink-faint">{{ shortWeekday(day) }}</span>
+                  <span
+                    class="inline-flex size-6 items-center justify-center rounded-full text-sm font-semibold"
+                    [class]="isToday(day) ? 'bg-brand-500 text-white' : 'text-ink'"
+                  >
+                    {{ day.getDate() }}
+                  </span>
+                </button>
+              }
+            </div>
+
+            @if (hasAllDay()) {
+              <div class="grid border-b border-border" [style.grid-template-columns]="columns()">
+                <div
+                  class="border-r border-border px-1 py-1 text-right text-[10px] leading-tight text-ink-faint"
+                >
+                  {{ allDayLabel() }}
+                </div>
+                @for (day of days(); track day.getTime()) {
+                  <div class="flex min-w-0 flex-col gap-0.5 p-1">
+                    @for (e of allDayEvents(day); track e.id) {
+                      <button
+                        type="button"
+                        [class]="
+                          chipClass(e) + ' truncate rounded border px-1 py-px text-left text-[11px]'
+                        "
+                        [class.line-through]="e.cancelled"
+                        (click)="eventClick.emit(e)"
+                      >
+                        {{ e.title }}
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            <div class="overflow-y-auto" [style.height]="height()">
+              <div class="grid" [style.grid-template-columns]="columns()">
+                <div class="relative border-r border-border" [style.height.px]="bodyHeight()">
+                  @for (h of hours(); track h) {
+                    <span
+                      class="absolute right-1.5 -translate-y-1/2 text-[10px] tabular-nums text-ink-faint"
+                      [style.top.px]="hourTop(h)"
+                    >
+                      {{ hourLabel(h) }}
+                    </span>
+                  }
+                </div>
+
+                @for (day of days(); track day.getTime()) {
+                  <div
+                    class="relative border-r border-border last:border-r-0"
+                    [style.height.px]="bodyHeight()"
+                    (click)="onGridClick($event, day)"
+                  >
+                    @for (h of hours(); track h) {
+                      <div
+                        class="pointer-events-none absolute inset-x-0 border-t border-border/70"
+                        [style.top.px]="hourTop(h)"
+                      ></div>
+                    }
+
+                    @if (nowIndicator() && isToday(day) && nowTop() !== null) {
+                      <div
+                        class="pointer-events-none absolute inset-x-0 z-20 flex items-center"
+                        [style.top.px]="nowTop()"
+                        aria-hidden="true"
+                      >
+                        <span class="size-2 shrink-0 rounded-full bg-danger"></span>
+                        <span class="h-px flex-1 bg-danger"></span>
+                      </div>
+                    }
+
+                    @for (p of placed(day); track p.event.id) {
+                      <button
+                        type="button"
+                        [class]="
+                          chipClass(p.event) +
+                          ' absolute z-10 overflow-hidden rounded border px-1 py-0.5 text-left transition-shadow hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500'
+                        "
+                        [class.line-through]="p.event.cancelled"
+                        [class.opacity-60]="p.event.cancelled"
+                        [style.top.%]="p.top * 100"
+                        [style.height.%]="p.height * 100"
+                        [style.left.%]="p.left * 100"
+                        [style.width.%]="p.width * 100"
+                        [attr.aria-label]="
+                          p.event.title + ', ' + clock(p.start) + ' – ' + clock(p.end)
+                        "
+                        (click)="onEventClick($event, p)"
+                      >
+                        <span class="block truncate text-[11px] font-medium leading-tight">
+                          {{ p.event.title }}
+                        </span>
+                        @if (p.height > 0.045) {
+                          <span class="block truncate text-[10px] leading-tight opacity-80">
+                            {{ clock(p.start) }}
+                            @if (p.event.subtitle) {
+                              · {{ p.event.subtitle }}
+                            }
+                          </span>
+                        }
+                      </button>
+                    }
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "startHour", required: false }] }], endHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "endHour", required: false }] }], hourHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourHeight", required: false }] }], defaultMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultMinutes", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], nowIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowIndicator", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showViewSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewSwitcher", required: false }] }], maxPerCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPerCell", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], allDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDayLabel", required: false }] }], moreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreLabel", required: false }] }], viewSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewSwitcherLabel", required: false }] }], monthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthLabel", required: false }] }], weekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabel", required: false }] }], threeDayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "threeDayLabel", required: false }] }], dayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayLabel", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], slotClick: [{ type: i0.Output, args: ["slotClick"] }], dayClick: [{ type: i0.Output, args: ["dayClick"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
+
+/*
+ * @besaitech/ng-design-system/calendar — the event calendar, kept OUT of the main entry point.
+ *
+ * Same reason the chart family has its own: a consuming app that never shows a calendar should not
+ * carry one. It is reachable from a lazy route, but the library is one ES module, so anything the
+ * primary entry point exports is linked into whatever bundle already imports from it — measured at
+ * roughly 28 kB landing in medicware-clinic's INITIAL bundle, past its budget, for a screen behind
+ * a lazy route. A separate entry point is what actually makes it lazy.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdsEventCalendar, allDayOn, eventsOn, minutesOfDay, occursOn, placeDay, startOfWeek, step, toDate, visibleDays, visibleRange };
+//# sourceMappingURL=besaitech-ng-design-system-calendar.mjs.map