ngwr 10.0.0 → 10.1.0

package/fesm2022/ngwr-event-calendar.mjs

@@ -0,0 +1,723 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, input, model, output, DOCUMENT, contentChild, signal, computed, ViewEncapsulation, Component } from '@angular/core';
+import { WrButton, WrButtonGroup } from 'ngwr/button';
+import { WrDateAdapter } from 'ngwr/date-adapter';
+import { readI18nText, useI18nFormatter, useI18nText } from 'ngwr/i18n';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Replace the chip's contents. The event is the implicit context; the chip
+ * itself — its button, its position and its drag handling — stays with the
+ * calendar, so a custom template cannot break the geometry.
+ *
+ * @example
+ * ```html
+ * <wr-event-calendar [events]="events">
+ *   <ng-template wrCalendarEvent let-event>
+ *     <strong>{{ event.title }}</strong> — {{ event.data.room }}
+ *   </ng-template>
+ * </wr-event-calendar>
+ * ```
+ */
+class WrCalendarEventTemplate {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCalendarEventTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: WrCalendarEventTemplate, isStandalone: true, selector: "ng-template[wrCalendarEvent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCalendarEventTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[wrCalendarEvent]',
+                }]
+        }] });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+const MINUTES_PER_DAY = 24 * 60;
+const DAYS_PER_WEEK = 7;
+const MONTH_ROWS = 6;
+/**
+ * Month / week / day event calendar with drag to move and resize.
+ *
+ * `events` is an INPUT, never mutated: a drag emits `eventChange` describing
+ * where the event would land and stops there. Apply it to your own state and
+ * the calendar re-renders — so an unhandled output is a cancelled drag, an
+ * optimistic update is one `set`, and a rejected server write needs no rollback
+ * path inside the component.
+ *
+ * Every chip lives inside the `role="gridcell"` where it starts and reaches out
+ * with `calc()` widths or percentage heights. That is what keeps the ARIA grid
+ * valid — an events layer floating over the grid would leave rows owning
+ * something other than cells — and it means no pixel measurement anywhere.
+ *
+ * **Keyboard.** The grid is one tab stop with a roving cursor: arrows move by
+ * day (left / right) and by week or slot (up / down), `Home` / `End` jump to
+ * the ends of the row, `Enter` on an empty cell emits `slotClick`, and `Enter`
+ * on a cell holding events focuses the first chip (`Escape` returns). On a
+ * focused chip, `Alt` + arrows move the event — the keyboard equivalent of the
+ * drag, emitting the same `eventChange`.
+ *
+ * Date math and formatting go through {@link WrDateAdapter}; register one with
+ * `provideWrDateAdapter(...)` at bootstrap.
+ *
+ * @example
+ * ```html
+ * <wr-event-calendar
+ *   editable
+ *   [events]="events()"
+ *   [(view)]="view"
+ *   [(date)]="anchor"
+ *   (eventChange)="apply($event)"
+ *   (slotClick)="compose($event)"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/event-calendar
+ */
+class WrEventCalendar {
+    /** Everything to render. Never mutated — see `eventChange`. */
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    /** Which span is shown. Two-way bindable. @default 'month' */
+    view = model('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    /** Any date inside the shown span. Two-way bindable. */
+    date = model(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Which buttons the view switcher offers. Empty hides it. */
+    views = input(['month', 'week', 'day'], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
+    /** Allow dragging chips to move and resize them. @default false */
+    editable = input(false, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Minutes per row in the time views — also the drag snap. @default 30 */
+    slotMinutes = input(30, { ...(ngDevMode ? { debugName: "slotMinutes" } : /* istanbul ignore next */ {}), transform: numAttr(30) });
+    /** First hour the time views show. @default 0 */
+    dayStartHour = input(0, { ...(ngDevMode ? { debugName: "dayStartHour" } : /* istanbul ignore next */ {}), transform: numAttr(0) });
+    /** First hour they do NOT show, exclusive. @default 24 */
+    dayEndHour = input(24, { ...(ngDevMode ? { debugName: "dayEndHour" } : /* istanbul ignore next */ {}), transform: numAttr(24) });
+    /** Lanes a month cell shows before collapsing the rest into “+N more”. @default 3 */
+    maxLanes = input(3, { ...(ngDevMode ? { debugName: "maxLanes" } : /* istanbul ignore next */ {}), transform: numAttr(3) });
+    /** Hide the built-in header — supply your own navigation instead. @default false */
+    hideHeader = input(false, { ...(ngDevMode ? { debugName: "hideHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** A chip was activated. */
+    eventClick = output();
+    /** Empty space was activated — the slot the user pointed at. */
+    slotClick = output();
+    /** A drag or an `Alt` + arrow finished. Apply it yourself; nothing moves until you do. */
+    eventChange = output();
+    adapter = inject(WrDateAdapter);
+    document = inject(DOCUMENT);
+    chipTpl = contentChild(WrCalendarEventTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipTpl" }] : /* istanbul ignore next */ []));
+    todayLabel = readI18nText('eventCalendar.today', 'Today');
+    previousLabel = readI18nText('eventCalendar.previous', 'Previous');
+    nextLabel = readI18nText('eventCalendar.next', 'Next');
+    allDayLabel = readI18nText('eventCalendar.allDay', 'All day');
+    timeLabel = readI18nText('eventCalendar.time', 'Time');
+    moreLabel = useI18nFormatter('eventCalendar.more', '+{{count}} more');
+    viewLabels = {
+        month: readI18nText('eventCalendar.month', 'Month'),
+        week: readI18nText('eventCalendar.week', 'Week'),
+        day: readI18nText('eventCalendar.day', 'Day'),
+    };
+    /** Accessible name of the grid; overridable for a page with several. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = useI18nText(this.ariaLabel, 'eventCalendar.label', 'Calendar');
+    /**
+     * `[day, minutes]` of the roving cursor — `minutes === -1` means a month cell
+     * or the all-day band. Raw, so it survives a view switch; read
+     * {@link cursorCell}, which clamps it to what the current view actually has.
+     */
+    cursor = signal([0, -1], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
+    /**
+     * The cursor as the current view can honour it. Exactly one cell may carry
+     * `tabindex="0"`, so a stale coordinate — the 09:30 row after switching to
+     * month, day 34 after switching to week — must fall back to a real cell
+     * rather than leave the grid with no tab stop at all.
+     */
+    cursorCell = computed(() => {
+        const [day, minutes] = this.cursor();
+        const columns = Math.max(1, this.days().length);
+        const clamped = Math.min(columns - 1, Math.max(0, day));
+        if (this.view() === 'month')
+            return [clamped, -1];
+        if (minutes === -1 && this.hasAllDay())
+            return [clamped, -1];
+        const rows = this.rows();
+        const known = rows.some(row => row.minutes === minutes);
+        return [clamped, known ? minutes : (rows[0]?.minutes ?? 0)];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursorCell" }] : /* istanbul ignore next */ []));
+    /** Non-null only while a pointer is down on a chip. @internal */
+    drag = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    dragging = computed(() => this.drag()?.event.id ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    chipTemplate = computed(() => this.chipTpl()?.template ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipTemplate" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-event-calendar', `wr-event-calendar--${this.view()}`];
+        if (this.editable())
+            parts.push('wr-event-calendar--editable');
+        if (this.drag())
+            parts.push('wr-event-calendar--dragging');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    // ---------------------------------------------------------------- ranges
+    /** Inclusive-exclusive window the current view covers. */
+    range = computed(() => {
+        const anchor = this.startOfDay(this.date());
+        switch (this.view()) {
+            case 'day':
+                return [anchor, this.adapter.addDays(anchor, 1)];
+            case 'week': {
+                const start = this.startOfWeek(anchor);
+                return [start, this.adapter.addDays(start, DAYS_PER_WEEK)];
+            }
+            default: {
+                const first = this.adapter.createDate(this.adapter.getYear(anchor), this.adapter.getMonth(anchor), 1);
+                const start = this.startOfWeek(first);
+                return [start, this.adapter.addDays(start, MONTH_ROWS * DAYS_PER_WEEK)];
+            }
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Every day the view shows, left to right. */
+    days = computed(() => {
+        const [start, end] = this.range();
+        const count = Math.round((end.getTime() - start.getTime()) / (MINUTES_PER_DAY * 60_000));
+        return Array.from({ length: count }, (_, i) => this.adapter.addDays(start, i));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "days" }] : /* istanbul ignore next */ []));
+    /** Only what overlaps the window — everything downstream works off this. */
+    visible = computed(() => {
+        const [start, end] = this.range();
+        return [...this.events()]
+            .filter(e => e.end.getTime() > start.getTime() && e.start.getTime() < end.getTime())
+            .sort((a, b) => {
+            const byStart = a.start.getTime() - b.start.getTime();
+            // Ties go to the longer event, so a week-long band claims its lane
+            // before the one-day events sitting alongside it.
+            return byStart !== 0 ? byStart : b.end.getTime() - a.end.getTime();
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    title = computed(() => {
+        const anchor = this.date();
+        const months = this.adapter.getMonthNames('long');
+        switch (this.view()) {
+            case 'day':
+                return this.adapter.format(anchor, 'longDate');
+            case 'week': {
+                const [start] = this.range();
+                const last = this.adapter.addDays(start, DAYS_PER_WEEK - 1);
+                return `${this.adapter.format(start, 'mediumDate')} – ${this.adapter.format(last, 'mediumDate')}`;
+            }
+            default:
+                return `${months[this.adapter.getMonth(anchor)]} ${this.adapter.getYear(anchor)}`;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    weekdayNames = computed(() => {
+        const names = this.adapter.getDayOfWeekNames('short');
+        const first = this.adapter.getFirstDayOfWeek();
+        return Array.from({ length: DAYS_PER_WEEK }, (_, i) => names[(first + i) % DAYS_PER_WEEK]);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayNames" }] : /* istanbul ignore next */ []));
+    switcher = computed(() => this.views().map(view => ({ view, label: this.viewLabels[view] })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "switcher" }] : /* istanbul ignore next */ []));
+    // ----------------------------------------------------------- month model
+    weeks = computed(() => {
+        const days = this.days();
+        const events = this.visible();
+        const weeks = [];
+        const month = this.adapter.getMonth(this.date());
+        for (let w = 0; w * DAYS_PER_WEEK < days.length; w++) {
+            const row = days.slice(w * DAYS_PER_WEEK, (w + 1) * DAYS_PER_WEEK);
+            const { chips, hidden } = this.bandLayout(events, row, this.maxLanes());
+            weeks.push({
+                key: this.iso(row[0]),
+                days: row.map((date, col) => ({
+                    date,
+                    key: this.iso(date),
+                    day: String(this.adapter.getDate(date)),
+                    label: this.adapter.format(date, 'longDate'),
+                    inMonth: this.adapter.getMonth(date) === month,
+                    isToday: this.adapter.isSameDay(date, this.adapter.today()),
+                    bands: chips.filter(chip => chip.column === col),
+                    hidden: hidden[col],
+                })),
+            });
+        }
+        return weeks;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    // ------------------------------------------------------------ time model
+    columns = computed(() => {
+        const weekdays = this.adapter.getDayOfWeekNames('short');
+        return this.days().map(date => ({
+            key: this.iso(date),
+            date,
+            weekday: weekdays[this.adapter.getDayOfWeek(date)],
+            day: String(this.adapter.getDate(date)),
+            label: this.adapter.format(date, 'longDate'),
+            isToday: this.adapter.isSameDay(date, this.adapter.today()),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** The all-day band above the time grid — same layout as a month week. */
+    allDayBands = computed(() => {
+        const days = this.days();
+        const events = this.visible().filter(e => e.allDay === true || this.spansWholeDay(e));
+        return this.bandLayout(events, days, Number.POSITIVE_INFINITY).chips;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allDayBands" }] : /* istanbul ignore next */ []));
+    allDayCells = computed(() => {
+        const days = this.days();
+        const chips = this.allDayBands();
+        return days.map((date, col) => ({
+            key: this.iso(date),
+            date,
+            label: `${this.allDayLabel} — ${this.adapter.format(date, 'longDate')}`,
+            bands: chips.filter(chip => chip.column === col),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allDayCells" }] : /* istanbul ignore next */ []));
+    hasAllDay = computed(() => this.allDayBands().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAllDay" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const slot = Math.max(5, this.slotMinutes());
+        const from = Math.max(0, Math.min(23, this.dayStartHour())) * 60;
+        const to = Math.max(from + slot, Math.min(24, this.dayEndHour()) * 60);
+        const days = this.days();
+        const placed = this.timeLayout(days, slot);
+        const rows = [];
+        for (let minutes = from; minutes < to; minutes += slot) {
+            rows.push({
+                key: String(minutes),
+                minutes,
+                major: minutes % 60 === 0,
+                label: minutes % 60 === 0 ? this.clock(minutes) : '',
+                cells: days.map((date, col) => ({
+                    key: `${this.iso(date)}:${minutes}`,
+                    date,
+                    label: `${this.clock(minutes)} — ${this.adapter.format(date, 'longDate')}`,
+                    chips: placed[col].filter(chip => chip.slotMinutes === minutes).map(chip => chip.chip),
+                })),
+            });
+        }
+        return rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    // ------------------------------------------------------------------ nav
+    step(direction) {
+        const anchor = this.date();
+        switch (this.view()) {
+            case 'day':
+                this.date.set(this.adapter.addDays(anchor, direction));
+                break;
+            case 'week':
+                this.date.set(this.adapter.addDays(anchor, direction * DAYS_PER_WEEK));
+                break;
+            default:
+                this.date.set(this.adapter.addMonths(anchor, direction));
+        }
+    }
+    goToday() {
+        this.date.set(this.adapter.today());
+    }
+    setView(view) {
+        this.view.set(view);
+    }
+    /** “+N more” opens that day — the overflow is only ever a month-view problem. */
+    openDay(date) {
+        this.date.set(date);
+        this.view.set('day');
+    }
+    // -------------------------------------------------------------- pointer
+    onChipPointerDown(event, chipEvent, kind) {
+        if (!this.canDrag(chipEvent) || event.button !== 0)
+            return;
+        const cell = this.cellUnder(event.clientX, event.clientY);
+        if (!cell)
+            return;
+        // The chip must stop swallowing hit-tests, or `elementFromPoint` reports
+        // the chip itself for the whole drag and the target never changes.
+        try {
+            event.target.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            // Capture is an optimisation — it keeps the release on this element even
+            // when the pointer leaves it. A pointer that is already gone throws here,
+            // and losing capture is not a reason to lose the drag.
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.drag.set({
+            event: chipEvent,
+            kind,
+            originDate: cell.date,
+            originMinutes: cell.minutes,
+            pointerId: event.pointerId,
+        });
+    }
+    onPointerUp(event) {
+        const state = this.drag();
+        this.drag.set(null);
+        if (state?.pointerId !== event.pointerId)
+            return;
+        const cell = this.cellUnder(event.clientX, event.clientY);
+        if (!cell)
+            return;
+        const dayDelta = this.daysBetween(state.originDate, cell.date);
+        const minuteDelta = cell.minutes < 0 || state.originMinutes < 0 ? 0 : cell.minutes - state.originMinutes;
+        if (dayDelta === 0 && minuteDelta === 0)
+            return;
+        const { event: source, kind } = state;
+        if (kind === 'resize') {
+            const end = this.shift(source.end, dayDelta, minuteDelta);
+            // A resize that would end at or before the start is a no-op, not an
+            // inverted event.
+            if (end.getTime() <= source.start.getTime())
+                return;
+            this.eventChange.emit({ event: source, start: source.start, end, kind });
+            return;
+        }
+        this.eventChange.emit({
+            event: source,
+            start: this.shift(source.start, dayDelta, minuteDelta),
+            end: this.shift(source.end, dayDelta, minuteDelta),
+            kind,
+        });
+    }
+    onChipClick(event) {
+        this.eventClick.emit(event);
+    }
+    onCellClick(date, minutes) {
+        this.slotClick.emit(this.slotAt(date, minutes));
+    }
+    // ------------------------------------------------------------- keyboard
+    onChipKeyDown(event, chipEvent) {
+        if (event.key === 'Escape') {
+            this.focusCell(event);
+            return;
+        }
+        if (!event.altKey || !this.canDrag(chipEvent))
+            return;
+        const slot = Math.max(5, this.slotMinutes());
+        const inTime = this.view() !== 'month';
+        let days = 0;
+        let minutes = 0;
+        switch (event.key) {
+            case 'ArrowLeft':
+                days = -1;
+                break;
+            case 'ArrowRight':
+                days = 1;
+                break;
+            case 'ArrowUp':
+                if (inTime)
+                    minutes = -slot;
+                else
+                    days = -DAYS_PER_WEEK;
+                break;
+            case 'ArrowDown':
+                if (inTime)
+                    minutes = slot;
+                else
+                    days = DAYS_PER_WEEK;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.eventChange.emit({
+            event: chipEvent,
+            start: this.shift(chipEvent.start, days, minutes),
+            end: this.shift(chipEvent.end, days, minutes),
+            kind: 'move',
+        });
+    }
+    onGridKeyDown(event) {
+        // Handled per cell, not on the grid: the element carrying the keyboard
+        // should be the one that actually holds focus. Chips sit inside cells and
+        // own their keys, so let anything originating in one bubble straight past.
+        if (event.target !== event.currentTarget)
+            return;
+        const [day, minutes] = this.cursorCell();
+        const columns = this.days().length;
+        const rows = this.rows();
+        const inTime = this.view() !== 'month';
+        let next;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = [Math.max(0, day - 1), minutes];
+                break;
+            case 'ArrowRight':
+                next = [Math.min(columns - 1, day + 1), minutes];
+                break;
+            case 'ArrowUp':
+                next = inTime ? [day, this.stepRow(minutes, -1, rows)] : [Math.max(0, day - DAYS_PER_WEEK), minutes];
+                break;
+            case 'ArrowDown':
+                next = inTime
+                    ? [day, this.stepRow(minutes, 1, rows)]
+                    : [day + DAYS_PER_WEEK < columns ? day + DAYS_PER_WEEK : day, minutes];
+                break;
+            case 'Home':
+                next = [day - (day % DAYS_PER_WEEK), minutes];
+                break;
+            case 'End':
+                next = [Math.min(columns - 1, day - (day % DAYS_PER_WEEK) + DAYS_PER_WEEK - 1), minutes];
+                break;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const cell = event.target;
+                const chip = cell.querySelector('.wr-event-calendar__chip');
+                if (chip)
+                    chip.focus();
+                else
+                    this.onCellClick(this.days()[day], minutes);
+                return;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.cursor.set(next);
+        this.focusCursor(event.currentTarget);
+    }
+    isCursor(day, minutes) {
+        const [d, m] = this.cursorCell();
+        return d === day && m === minutes;
+    }
+    // --------------------------------------------------------------- layout
+    /**
+     * Greedy lane packing for day-spanning chips. Sorted by start then by length,
+     * each segment takes the first lane its columns are free in — the classic
+     * interval-graph colouring, and the reason a long event keeps one lane across
+     * the whole week instead of stair-stepping.
+     *
+     * `limit` caps the visible lanes; anything past it is reported per column so
+     * the cell can say how much it is hiding.
+     */
+    bandLayout(events, days, limit) {
+        const first = days[0];
+        const last = this.adapter.addDays(days[days.length - 1], 1);
+        const lanes = [];
+        const chips = [];
+        const hidden = days.map(() => 0);
+        for (const event of events) {
+            if (event.end.getTime() <= first.getTime() || event.start.getTime() >= last.getTime())
+                continue;
+            const from = Math.max(0, this.daysBetween(first, this.startOfDay(event.start)));
+            // An exclusive end landing exactly on midnight belongs to the previous
+            // day — otherwise every all-day event paints one column too wide.
+            const endDay = this.startOfDay(new Date(event.end.getTime() - 1));
+            const to = Math.min(days.length - 1, this.daysBetween(first, endDay));
+            if (to < from)
+                continue;
+            let lane = lanes.findIndex(taken => taken.every(col => col < from || col > to));
+            if (lane === -1) {
+                lane = lanes.length;
+                lanes.push([]);
+            }
+            for (let col = from; col <= to; col++)
+                lanes[lane].push(col);
+            if (lane >= limit) {
+                for (let col = from; col <= to; col++)
+                    hidden[col]++;
+                continue;
+            }
+            chips.push({
+                key: `${String(event.id)}:${from}`,
+                event,
+                column: from,
+                span: to - from + 1,
+                lane,
+                continuesBefore: event.start.getTime() < first.getTime(),
+                continuesAfter: event.end.getTime() > last.getTime(),
+            });
+        }
+        return { chips, hidden };
+    }
+    /**
+     * Column layout inside one day: events that overlap in time share the width.
+     * Clusters are built by a running high-water mark — a new cluster starts the
+     * moment an event begins after everything before it has ended.
+     */
+    timeLayout(days, slot) {
+        const from = Math.max(0, Math.min(23, this.dayStartHour())) * 60;
+        const to = Math.max(from + slot, Math.min(24, this.dayEndHour()) * 60);
+        const timed = this.visible().filter(e => !e.allDay && !this.spansWholeDay(e));
+        return days.map(day => {
+            const dayStart = this.startOfDay(day);
+            const windowStart = dayStart.getTime() + from * 60_000;
+            const windowEnd = dayStart.getTime() + to * 60_000;
+            const onDay = timed
+                .filter(e => e.end.getTime() > windowStart && e.start.getTime() < windowEnd)
+                .map(event => ({
+                event,
+                from: Math.max(windowStart, event.start.getTime()),
+                to: Math.min(windowEnd, event.end.getTime()),
+            }))
+                .sort((a, b) => {
+                const byStart = a.from - b.from;
+                return byStart !== 0 ? byStart : b.to - a.to;
+            });
+            const out = [];
+            let cluster = [];
+            let highWater = -1;
+            const flush = () => {
+                for (const [index, item] of cluster.entries()) {
+                    const minutes = Math.floor((item.from - dayStart.getTime()) / 60_000);
+                    const slotStart = from + Math.floor((minutes - from) / slot) * slot;
+                    const length = (item.to - item.from) / 60_000;
+                    out.push({
+                        slotMinutes: slotStart,
+                        chip: {
+                            key: `${String(item.event.id)}:${minutes}`,
+                            event: item.event,
+                            top: ((minutes - slotStart) / slot) * 100,
+                            height: (length / slot) * 100,
+                            left: (index / cluster.length) * 100,
+                            width: (1 / cluster.length) * 100,
+                            continuesBefore: item.event.start.getTime() < windowStart,
+                            continuesAfter: item.event.end.getTime() > windowEnd,
+                        },
+                    });
+                }
+                cluster = [];
+            };
+            for (const item of onDay) {
+                if (cluster.length > 0 && item.from >= highWater)
+                    flush();
+                cluster.push(item);
+                highWater = Math.max(highWater, item.to);
+            }
+            flush();
+            return out;
+        });
+    }
+    // --------------------------------------------------------------- chrome
+    chipLabel(event) {
+        const time = event.allDay ? this.allDayLabel : this.adapter.format(event.start, 'time');
+        return `${event.title}, ${time}`;
+    }
+    chipTime(event) {
+        return event.allDay ? this.allDayLabel : this.adapter.format(event.start, 'time');
+    }
+    canDrag(event) {
+        return this.editable() && event.editable !== false;
+    }
+    // --------------------------------------------------------------- helpers
+    slotAt(date, minutes) {
+        if (minutes < 0) {
+            const start = this.startOfDay(date);
+            return { start, end: this.adapter.addDays(start, 1), allDay: true };
+        }
+        const start = new Date(this.startOfDay(date).getTime() + minutes * 60_000);
+        return { start, end: new Date(start.getTime() + Math.max(5, this.slotMinutes()) * 60_000), allDay: false };
+    }
+    /** The `[data-cell]` under the pointer, or `null` outside the grid. */
+    cellUnder(x, y) {
+        const el = this.document.elementFromPoint(x, y)?.closest('[data-cell-date]');
+        if (!el)
+            return null;
+        // Epoch millis rather than a formatted date: `new Date('2026-08-08')` is
+        // parsed as UTC and lands on the previous day west of Greenwich.
+        const stamp = Number(el.dataset['cellDate']);
+        if (!Number.isFinite(stamp))
+            return null;
+        return { date: new Date(stamp), minutes: Number(el.dataset['cellMinutes'] ?? -1) };
+    }
+    /** Value of a cell's `data-cell-date`. @internal */
+    stamp(date) {
+        return this.startOfDay(date).getTime();
+    }
+    focusCursor(from) {
+        const [day, minutes] = this.cursorCell();
+        from.closest('[role="grid"]')?.querySelector(`[data-cell-index="${day}:${minutes}"]`)?.focus();
+    }
+    focusCell(event) {
+        event.preventDefault();
+        event.target.closest('[data-cell-date]')?.focus();
+    }
+    /**
+     * Move one time row, treating the all-day band as the row above the first —
+     * otherwise the band is mouse-only, which is the kind of gap that makes a
+     * keyboard user give up on the whole grid.
+     */
+    stepRow(minutes, direction, rows) {
+        if (minutes === -1)
+            return direction === 1 ? (rows[0]?.minutes ?? -1) : -1;
+        const index = rows.findIndex(row => row.minutes === minutes);
+        if (index === -1)
+            return rows[0]?.minutes ?? -1;
+        if (index === 0 && direction === -1)
+            return this.hasAllDay() ? -1 : minutes;
+        return rows[Math.min(rows.length - 1, index + direction)].minutes;
+    }
+    shift(date, days, minutes) {
+        return new Date(this.adapter.addDays(date, days).getTime() + minutes * 60_000);
+    }
+    startOfDay(date) {
+        return this.adapter.setTime(date, 0, 0, 0);
+    }
+    startOfWeek(date) {
+        const first = this.adapter.getFirstDayOfWeek();
+        const offset = (this.adapter.getDayOfWeek(date) - first + DAYS_PER_WEEK) % DAYS_PER_WEEK;
+        return this.startOfDay(this.adapter.addDays(date, -offset));
+    }
+    /** Whole days apart — computed on the day floor, so DST cannot round it off. */
+    daysBetween(from, to) {
+        const a = this.startOfDay(from);
+        const b = this.startOfDay(to);
+        return Math.round((b.getTime() - a.getTime()) / (MINUTES_PER_DAY * 60_000));
+    }
+    spansWholeDay(event) {
+        return event.end.getTime() - event.start.getTime() >= MINUTES_PER_DAY * 60_000;
+    }
+    clock(minutes) {
+        const date = this.adapter.setTime(this.adapter.today(), Math.floor(minutes / 60), minutes % 60, 0);
+        return this.adapter.format(date, 'time');
+    }
+    iso(date) {
+        return `${this.adapter.getYear(date)}-${this.adapter.getMonth(date) + 1}-${this.adapter.getDate(date)}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: WrEventCalendar, isStandalone: true, selector: "wr-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 }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, slotMinutes: { classPropertyName: "slotMinutes", publicName: "slotMinutes", isSignal: true, isRequired: false, transformFunction: null }, dayStartHour: { classPropertyName: "dayStartHour", publicName: "dayStartHour", isSignal: true, isRequired: false, transformFunction: null }, dayEndHour: { classPropertyName: "dayEndHour", publicName: "dayEndHour", isSignal: true, isRequired: false, transformFunction: null }, maxLanes: { classPropertyName: "maxLanes", publicName: "maxLanes", isSignal: true, isRequired: false, transformFunction: null }, hideHeader: { classPropertyName: "hideHeader", publicName: "hideHeader", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", date: "dateChange", eventClick: "eventClick", slotClick: "slotClick", eventChange: "eventChange" }, host: { listeners: { "pointerup": "onPointerUp($event)", "pointercancel": "drag.set(null)" }, properties: { "class": "classes()" } }, queries: [{ propertyName: "chipTpl", first: true, predicate: WrCalendarEventTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Two grids, one rule: a chip always lives inside the `role=\"gridcell\"` where it\n  STARTS, and reaches out from there \u2014 `calc()` widths for day-spanning bands,\n  percentage heights for timed chips. A floating events layer would read better\n  in the template and would leave `role=\"row\"` owning something other than\n  cells, which is exactly what the axe gate rejects.\n-->\n@if (!hideHeader()) {\n  <div class=\"wr-event-calendar__header\">\n    <div class=\"wr-event-calendar__nav\">\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step\"\n        [attr.aria-label]=\"previousLabel\"\n        (click)=\"step(-1)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m15 18-6-6 6-6\" />\n        </svg>\n      </button>\n      <button wr-btn type=\"button\" size=\"sm\" outlined (click)=\"goToday()\">{{ todayLabel }}</button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step\"\n        [attr.aria-label]=\"nextLabel\"\n        (click)=\"step(1)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n    </div>\n\n    <h2 class=\"wr-event-calendar__title\">{{ title() }}</h2>\n\n    @if (switcher().length > 1) {\n      <wr-btn-group>\n        @for (item of switcher(); track item.view) {\n          <button\n            wr-btn\n            type=\"button\"\n            size=\"sm\"\n            [outlined]=\"view() !== item.view\"\n            [color]=\"view() === item.view ? 'primary' : null\"\n            [attr.aria-pressed]=\"view() === item.view\"\n            (click)=\"setView(item.view)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      </wr-btn-group>\n    }\n  </div>\n}\n\n@if (view() === 'month') {\n  <div\n    role=\"grid\"\n    class=\"wr-event-calendar__grid wr-event-calendar__grid--month\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <div role=\"row\" class=\"wr-event-calendar__row\">\n      @for (name of weekdayNames(); track $index) {\n        <div role=\"columnheader\" class=\"wr-event-calendar__weekday\">{{ name }}</div>\n      }\n    </div>\n\n    @for (week of weeks(); track week.key; let w = $index) {\n      <div role=\"row\" class=\"wr-event-calendar__row\">\n        @for (cell of week.days; track cell.key; let c = $index) {\n          @let index = w * 7 + c;\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--day\"\n            [class.wr-event-calendar__cell--muted]=\"!cell.inMonth\"\n            [class.wr-event-calendar__cell--today]=\"cell.isToday\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(index, -1) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"-1\"\n            [attr.data-cell-index]=\"`${index}:-1`\"\n            (click)=\"onCellClick(cell.date, -1)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            <span class=\"wr-event-calendar__daynum\" aria-hidden=\"true\">{{ cell.day }}</span>\n\n            @for (chip of cell.bands; track chip.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"band\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip, offset: '1.75rem' }\"\n              />\n            }\n\n            @if (cell.hidden > 0) {\n              <button\n                type=\"button\"\n                class=\"wr-event-calendar__more\"\n                [style.--wr-event-calendar-lane]=\"maxLanes()\"\n                (click)=\"openDay(cell.date); $event.stopPropagation()\"\n              >\n                {{ moreLabel({ count: cell.hidden }) }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    role=\"grid\"\n    class=\"wr-event-calendar__grid wr-event-calendar__grid--time\"\n    [style.--wr-event-calendar-cols]=\"columns().length\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <div role=\"row\" class=\"wr-event-calendar__row\">\n      <div role=\"columnheader\" class=\"wr-event-calendar__gutter\" [attr.aria-label]=\"timeLabel\"></div>\n      @for (column of columns(); track column.key) {\n        <div\n          role=\"columnheader\"\n          class=\"wr-event-calendar__colhead\"\n          [class.wr-event-calendar__colhead--today]=\"column.isToday\"\n        >\n          <span class=\"wr-event-calendar__colhead-weekday\">{{ column.weekday }}</span>\n          <span class=\"wr-event-calendar__colhead-day\">{{ column.day }}</span>\n        </div>\n      }\n    </div>\n\n    @if (hasAllDay()) {\n      <div role=\"row\" class=\"wr-event-calendar__row wr-event-calendar__row--allday\">\n        <div role=\"rowheader\" class=\"wr-event-calendar__gutter\">{{ allDayLabel }}</div>\n        @for (cell of allDayCells(); track cell.key; let c = $index) {\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--allday\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(c, -1) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"-1\"\n            [attr.data-cell-index]=\"`${c}:-1`\"\n            (click)=\"onCellClick(cell.date, -1)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            @for (chip of cell.bands; track chip.key) {\n              <ng-container [ngTemplateOutlet]=\"band\" [ngTemplateOutletContext]=\"{ $implicit: chip, offset: '0rem' }\" />\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @for (row of rows(); track row.key) {\n      <div role=\"row\" class=\"wr-event-calendar__row\" [class.wr-event-calendar__row--major]=\"row.major\">\n        <div role=\"rowheader\" class=\"wr-event-calendar__gutter\">{{ row.label }}</div>\n        @for (cell of row.cells; track cell.key; let c = $index) {\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--slot\"\n            [class.wr-event-calendar__cell--major]=\"row.major\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(c, row.minutes) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"row.minutes\"\n            [attr.data-cell-index]=\"`${c}:${row.minutes}`\"\n            (click)=\"onCellClick(cell.date, row.minutes)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            @for (chip of cell.chips; track chip.key) {\n              <button\n                type=\"button\"\n                class=\"wr-event-calendar__chip wr-event-calendar__chip--time\"\n                [class.wr-event-calendar__chip--dragging]=\"dragging() === chip.event.id\"\n                [class.wr-event-calendar__chip--continues-before]=\"chip.continuesBefore\"\n                [class.wr-event-calendar__chip--continues-after]=\"chip.continuesAfter\"\n                [style.--wr-event-calendar-color]=\"`var(--wr-color-${chip.event.color ?? 'primary'})`\"\n                [style.top.%]=\"chip.top\"\n                [style.height.%]=\"chip.height\"\n                [style.left.%]=\"chip.left\"\n                [style.width.%]=\"chip.width\"\n                [attr.aria-label]=\"chipLabel(chip.event)\"\n                (click)=\"onChipClick(chip.event); $event.stopPropagation()\"\n                (keydown)=\"onChipKeyDown($event, chip.event)\"\n                (pointerdown)=\"onChipPointerDown($event, chip.event, 'move')\"\n              >\n                <span class=\"wr-event-calendar__chip-time\" aria-hidden=\"true\">{{ chipTime(chip.event) }}</span>\n                @if (chipTemplate(); as tpl) {\n                  <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: chip.event }\" />\n                } @else {\n                  <span class=\"wr-event-calendar__chip-title\" aria-hidden=\"true\">{{ chip.event.title }}</span>\n                }\n\n                @if (canDrag(chip.event) && !chip.continuesAfter) {\n                  <!--\n                    A grab area, not a control: the same resize is on the keyboard\n                    as `Alt` + arrows on the chip itself, so exposing a second\n                    focusable thing here would add a tab stop that leads nowhere.\n                  -->\n                  <span\n                    class=\"wr-event-calendar__resize\"\n                    aria-hidden=\"true\"\n                    (pointerdown)=\"onChipPointerDown($event, chip.event, 'resize')\"\n                  ></span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- One chip shape for both day-spanning cases: month cells and the all-day band. -->\n<ng-template #band let-chip let-offset=\"offset\">\n  <button\n    type=\"button\"\n    class=\"wr-event-calendar__chip wr-event-calendar__chip--band\"\n    [class.wr-event-calendar__chip--dragging]=\"dragging() === chip.event.id\"\n    [class.wr-event-calendar__chip--continues-before]=\"chip.continuesBefore\"\n    [class.wr-event-calendar__chip--continues-after]=\"chip.continuesAfter\"\n    [style.--wr-event-calendar-color]=\"`var(--wr-color-${chip.event.color ?? 'primary'})`\"\n    [style.--wr-event-calendar-span]=\"chip.span\"\n    [style.--wr-event-calendar-lane]=\"chip.lane\"\n    [style.--wr-event-calendar-offset]=\"offset\"\n    [attr.aria-label]=\"chipLabel(chip.event)\"\n    (click)=\"onChipClick(chip.event); $event.stopPropagation()\"\n    (keydown)=\"onChipKeyDown($event, chip.event)\"\n    (pointerdown)=\"onChipPointerDown($event, chip.event, 'move')\"\n  >\n    @if (chipTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: chip.event }\" />\n    } @else {\n      <span class=\"wr-event-calendar__chip-title\" aria-hidden=\"true\">{{ chip.event.title }}</span>\n    }\n  </button>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WrButton, selector: "wr-btn, button[wr-btn], a[wr-btn]", inputs: ["color", "size", "shape", "icon", "iconPosition", "disabled", "outlined", "block", "loading", "isDisabledWhenLoading"] }, { kind: "component", type: WrButtonGroup, selector: "wr-btn-group", inputs: ["shape"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrEventCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-event-calendar', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        // A drag has to end wherever the pointer is released, including outside the
+                        // chip it started on — so the host owns the release, not the chip.
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'drag.set(null)',
+                    }, imports: [NgTemplateOutlet, WrButton, WrButtonGroup], template: "<!--\n  Two grids, one rule: a chip always lives inside the `role=\"gridcell\"` where it\n  STARTS, and reaches out from there \u2014 `calc()` widths for day-spanning bands,\n  percentage heights for timed chips. A floating events layer would read better\n  in the template and would leave `role=\"row\"` owning something other than\n  cells, which is exactly what the axe gate rejects.\n-->\n@if (!hideHeader()) {\n  <div class=\"wr-event-calendar__header\">\n    <div class=\"wr-event-calendar__nav\">\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step\"\n        [attr.aria-label]=\"previousLabel\"\n        (click)=\"step(-1)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m15 18-6-6 6-6\" />\n        </svg>\n      </button>\n      <button wr-btn type=\"button\" size=\"sm\" outlined (click)=\"goToday()\">{{ todayLabel }}</button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step\"\n        [attr.aria-label]=\"nextLabel\"\n        (click)=\"step(1)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m9 18 6-6-6-6\" />\n        </svg>\n      </button>\n    </div>\n\n    <h2 class=\"wr-event-calendar__title\">{{ title() }}</h2>\n\n    @if (switcher().length > 1) {\n      <wr-btn-group>\n        @for (item of switcher(); track item.view) {\n          <button\n            wr-btn\n            type=\"button\"\n            size=\"sm\"\n            [outlined]=\"view() !== item.view\"\n            [color]=\"view() === item.view ? 'primary' : null\"\n            [attr.aria-pressed]=\"view() === item.view\"\n            (click)=\"setView(item.view)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      </wr-btn-group>\n    }\n  </div>\n}\n\n@if (view() === 'month') {\n  <div\n    role=\"grid\"\n    class=\"wr-event-calendar__grid wr-event-calendar__grid--month\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <div role=\"row\" class=\"wr-event-calendar__row\">\n      @for (name of weekdayNames(); track $index) {\n        <div role=\"columnheader\" class=\"wr-event-calendar__weekday\">{{ name }}</div>\n      }\n    </div>\n\n    @for (week of weeks(); track week.key; let w = $index) {\n      <div role=\"row\" class=\"wr-event-calendar__row\">\n        @for (cell of week.days; track cell.key; let c = $index) {\n          @let index = w * 7 + c;\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--day\"\n            [class.wr-event-calendar__cell--muted]=\"!cell.inMonth\"\n            [class.wr-event-calendar__cell--today]=\"cell.isToday\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(index, -1) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"-1\"\n            [attr.data-cell-index]=\"`${index}:-1`\"\n            (click)=\"onCellClick(cell.date, -1)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            <span class=\"wr-event-calendar__daynum\" aria-hidden=\"true\">{{ cell.day }}</span>\n\n            @for (chip of cell.bands; track chip.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"band\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip, offset: '1.75rem' }\"\n              />\n            }\n\n            @if (cell.hidden > 0) {\n              <button\n                type=\"button\"\n                class=\"wr-event-calendar__more\"\n                [style.--wr-event-calendar-lane]=\"maxLanes()\"\n                (click)=\"openDay(cell.date); $event.stopPropagation()\"\n              >\n                {{ moreLabel({ count: cell.hidden }) }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    role=\"grid\"\n    class=\"wr-event-calendar__grid wr-event-calendar__grid--time\"\n    [style.--wr-event-calendar-cols]=\"columns().length\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\n  >\n    <div role=\"row\" class=\"wr-event-calendar__row\">\n      <div role=\"columnheader\" class=\"wr-event-calendar__gutter\" [attr.aria-label]=\"timeLabel\"></div>\n      @for (column of columns(); track column.key) {\n        <div\n          role=\"columnheader\"\n          class=\"wr-event-calendar__colhead\"\n          [class.wr-event-calendar__colhead--today]=\"column.isToday\"\n        >\n          <span class=\"wr-event-calendar__colhead-weekday\">{{ column.weekday }}</span>\n          <span class=\"wr-event-calendar__colhead-day\">{{ column.day }}</span>\n        </div>\n      }\n    </div>\n\n    @if (hasAllDay()) {\n      <div role=\"row\" class=\"wr-event-calendar__row wr-event-calendar__row--allday\">\n        <div role=\"rowheader\" class=\"wr-event-calendar__gutter\">{{ allDayLabel }}</div>\n        @for (cell of allDayCells(); track cell.key; let c = $index) {\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--allday\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(c, -1) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"-1\"\n            [attr.data-cell-index]=\"`${c}:-1`\"\n            (click)=\"onCellClick(cell.date, -1)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            @for (chip of cell.bands; track chip.key) {\n              <ng-container [ngTemplateOutlet]=\"band\" [ngTemplateOutletContext]=\"{ $implicit: chip, offset: '0rem' }\" />\n            }\n          </div>\n        }\n      </div>\n    }\n\n    @for (row of rows(); track row.key) {\n      <div role=\"row\" class=\"wr-event-calendar__row\" [class.wr-event-calendar__row--major]=\"row.major\">\n        <div role=\"rowheader\" class=\"wr-event-calendar__gutter\">{{ row.label }}</div>\n        @for (cell of row.cells; track cell.key; let c = $index) {\n          <div\n            role=\"gridcell\"\n            class=\"wr-event-calendar__cell wr-event-calendar__cell--slot\"\n            [class.wr-event-calendar__cell--major]=\"row.major\"\n            [attr.aria-label]=\"cell.label\"\n            [attr.tabindex]=\"isCursor(c, row.minutes) ? 0 : -1\"\n            [attr.data-cell-date]=\"stamp(cell.date)\"\n            [attr.data-cell-minutes]=\"row.minutes\"\n            [attr.data-cell-index]=\"`${c}:${row.minutes}`\"\n            (click)=\"onCellClick(cell.date, row.minutes)\"\n            (keydown)=\"onGridKeyDown($event)\"\n          >\n            @for (chip of cell.chips; track chip.key) {\n              <button\n                type=\"button\"\n                class=\"wr-event-calendar__chip wr-event-calendar__chip--time\"\n                [class.wr-event-calendar__chip--dragging]=\"dragging() === chip.event.id\"\n                [class.wr-event-calendar__chip--continues-before]=\"chip.continuesBefore\"\n                [class.wr-event-calendar__chip--continues-after]=\"chip.continuesAfter\"\n                [style.--wr-event-calendar-color]=\"`var(--wr-color-${chip.event.color ?? 'primary'})`\"\n                [style.top.%]=\"chip.top\"\n                [style.height.%]=\"chip.height\"\n                [style.left.%]=\"chip.left\"\n                [style.width.%]=\"chip.width\"\n                [attr.aria-label]=\"chipLabel(chip.event)\"\n                (click)=\"onChipClick(chip.event); $event.stopPropagation()\"\n                (keydown)=\"onChipKeyDown($event, chip.event)\"\n                (pointerdown)=\"onChipPointerDown($event, chip.event, 'move')\"\n              >\n                <span class=\"wr-event-calendar__chip-time\" aria-hidden=\"true\">{{ chipTime(chip.event) }}</span>\n                @if (chipTemplate(); as tpl) {\n                  <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: chip.event }\" />\n                } @else {\n                  <span class=\"wr-event-calendar__chip-title\" aria-hidden=\"true\">{{ chip.event.title }}</span>\n                }\n\n                @if (canDrag(chip.event) && !chip.continuesAfter) {\n                  <!--\n                    A grab area, not a control: the same resize is on the keyboard\n                    as `Alt` + arrows on the chip itself, so exposing a second\n                    focusable thing here would add a tab stop that leads nowhere.\n                  -->\n                  <span\n                    class=\"wr-event-calendar__resize\"\n                    aria-hidden=\"true\"\n                    (pointerdown)=\"onChipPointerDown($event, chip.event, 'resize')\"\n                  ></span>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- One chip shape for both day-spanning cases: month cells and the all-day band. -->\n<ng-template #band let-chip let-offset=\"offset\">\n  <button\n    type=\"button\"\n    class=\"wr-event-calendar__chip wr-event-calendar__chip--band\"\n    [class.wr-event-calendar__chip--dragging]=\"dragging() === chip.event.id\"\n    [class.wr-event-calendar__chip--continues-before]=\"chip.continuesBefore\"\n    [class.wr-event-calendar__chip--continues-after]=\"chip.continuesAfter\"\n    [style.--wr-event-calendar-color]=\"`var(--wr-color-${chip.event.color ?? 'primary'})`\"\n    [style.--wr-event-calendar-span]=\"chip.span\"\n    [style.--wr-event-calendar-lane]=\"chip.lane\"\n    [style.--wr-event-calendar-offset]=\"offset\"\n    [attr.aria-label]=\"chipLabel(chip.event)\"\n    (click)=\"onChipClick(chip.event); $event.stopPropagation()\"\n    (keydown)=\"onChipKeyDown($event, chip.event)\"\n    (pointerdown)=\"onChipPointerDown($event, chip.event, 'move')\"\n  >\n    @if (chipTemplate(); as tpl) {\n      <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: chip.event }\" />\n    } @else {\n      <span class=\"wr-event-calendar__chip-title\" aria-hidden=\"true\">{{ chip.event.title }}</span>\n    }\n  </button>\n</ng-template>\n" }]
+        }], 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"] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], slotMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotMinutes", required: false }] }], dayStartHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayStartHour", required: false }] }], dayEndHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "dayEndHour", required: false }] }], maxLanes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLanes", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], slotClick: [{ type: i0.Output, args: ["slotClick"] }], eventChange: [{ type: i0.Output, args: ["eventChange"] }], chipTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => WrCalendarEventTemplate), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCalendarEventTemplate, WrEventCalendar };
+//# sourceMappingURL=ngwr-event-calendar.mjs.map