ngwr 11.1.0 → 12.0.0

package/fesm2022/ngwr-event-calendar.mjs

@@ -2,10 +2,10 @@ import { Directionality } from '@angular/cdk/bidi';
 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 { inject, TemplateRef, Directive, signal, input, model, output, DOCUMENT, contentChild, 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 { WrDateAdapter } from 'ngwr/date';
+import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { numAttr } from 'ngwr/utils';
 
 /**
@@ -30,10 +30,10 @@ import { numAttr } from 'ngwr/utils';
  */
 class WrCalendarEventTemplate {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCalendarEventTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: WrCalendarEventTemplate, isStandalone: true, selector: "ng-template[wrCalendarEvent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrCalendarEventTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: WrCalendarEventTemplate, isStandalone: true, selector: "ng-template[wrCalendarEvent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCalendarEventTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrCalendarEventTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[wrCalendarEvent]',
@@ -46,6 +46,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * 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
  */
+/**
+ * Stands in for the consumer input `useI18nText` expects — the header strings take no
+ * label inputs of their own.
+ */
+const NO_OVERRIDE = signal(null).asReadonly();
 const MINUTES_PER_DAY = 24 * 60;
 const DAYS_PER_WEEK = 7;
 const MONTH_ROWS = 6;
@@ -123,17 +128,24 @@ class WrEventCalendar {
     dir = inject(Directionality, { optional: true });
     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');
+    // Reactive: a calendar is as long-lived as the page it sits on, so a catalog that
+    // finishes loading after construction — or a locale switch — has to reach these.
+    // Resolved once, as they were, they froze the English defaults in place.
+    todayLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.today', 'Today');
+    previousLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.previous', 'Previous');
+    nextLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.next', 'Next');
+    allDayLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.allDay', 'All day');
+    timeLabel = useI18nText(NO_OVERRIDE, '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'),
-    };
+    monthLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.month', 'Month');
+    weekLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.week', 'Week');
+    dayLabel = useI18nText(NO_OVERRIDE, 'eventCalendar.day', 'Day');
+    viewLabels = computed(() => ({
+        month: this.monthLabel(),
+        week: this.weekLabel(),
+        day: this.dayLabel(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewLabels" }] : /* istanbul ignore next */ []));
     /** Accessible name of the grid; overridable for a page with several. */
     ariaLabel = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -243,7 +255,7 @@ class WrEventCalendar {
      */
     weekdayNames = computed(() => this.adapter.getDayOfWeekNames('short'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weekdayNames" }] : /* istanbul ignore next */ []));
-    switcher = computed(() => this.views().map(view => ({ view, label: this.viewLabels[view] })), /* @ts-ignore */
+    switcher = computed(() => this.views().map(view => ({ view, label: this.viewLabels()[view] })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "switcher" }] : /* istanbul ignore next */ []));
     // ----------------------------------------------------------- month model
     weeks = computed(() => {
@@ -300,7 +312,7 @@ class WrEventCalendar {
         return days.map((date, col) => ({
             key: this.iso(date),
             date,
-            label: `${this.allDayLabel} — ${this.adapter.format(date, 'longDate')}`,
+            label: `${this.allDayLabel()} — ${this.adapter.format(date, 'longDate')}`,
             bands: chips.filter(chip => chip.column === col),
         }));
     }, /* @ts-ignore */
@@ -314,16 +326,23 @@ class WrEventCalendar {
         const days = this.days();
         const placed = this.timeLayout(days, slot);
         const rows = [];
+        // Each half of a cell's name is invariant along one axis: the day reads the
+        // same down a column, the clock the same across a row. Formatting per CELL
+        // asked the adapter for 336 of each on a default week (48 slots × 7 days)
+        // where 48 clocks and 7 dates say the same thing, and
+        // `WrNativeDateAdapter.format` builds a fresh `Intl.DateTimeFormat` per call.
+        const dayLabels = days.map(date => this.adapter.format(date, 'longDate'));
         for (let minutes = from; minutes < to; minutes += slot) {
+            const clock = this.clock(minutes);
             rows.push({
                 key: String(minutes),
                 minutes,
                 major: minutes % 60 === 0,
-                label: minutes % 60 === 0 ? this.clock(minutes) : '',
+                label: minutes % 60 === 0 ? clock : '',
                 cells: days.map((date, col) => ({
                     key: `${this.iso(date)}:${minutes}`,
                     date,
-                    label: `${this.clock(minutes)} — ${this.adapter.format(date, 'longDate')}`,
+                    label: `${clock} — ${dayLabels[col]}`,
                     chips: placed[col].filter(chip => chip.slotMinutes === minutes).map(chip => chip.chip),
                 })),
             });
@@ -463,6 +482,19 @@ class WrEventCalendar {
                 return;
         }
         event.preventDefault();
+        // `Shift` turns the same gesture into a resize, moving the END alone. Without it
+        // the keyboard could move an event and never re-length one — and the resize grab
+        // area is `aria-hidden` and unfocusable precisely BECAUSE this exists, so its
+        // absence left the operation on the mouse only.
+        if (event.shiftKey) {
+            const end = this.shift(chipEvent.end, days, minutes);
+            // Same rule as the pointer path: a resize that would end at or before the
+            // start is a no-op rather than an inverted event.
+            if (end.getTime() <= chipEvent.start.getTime())
+                return;
+            this.eventChange.emit({ event: chipEvent, start: chipEvent.start, end, kind: 'resize' });
+            return;
+        }
         this.eventChange.emit({
             event: chipEvent,
             start: this.shift(chipEvent.start, days, minutes),
@@ -489,7 +521,13 @@ class WrEventCalendar {
                 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];
+                // Hold position at the top row, the way ArrowDown does at the bottom. A
+                // `Math.max(0, …)` clamp reads as the same thing and is not: from the
+                // Wednesday of the first week it lands on 0, so the cursor jumps
+                // SIDEWAYS to Sunday instead of staying put.
+                next = inTime
+                    ? [day, this.stepRow(minutes, -1, rows)]
+                    : [day - DAYS_PER_WEEK >= 0 ? day - DAYS_PER_WEEK : day, minutes];
                 break;
             case 'ArrowDown':
                 next = inTime
@@ -626,7 +664,7 @@ class WrEventCalendar {
                             event: item.event,
                             top: ((minutes - slotStart) / slot) * 100,
                             height: (length / slot) * 100,
-                            left: (index / cluster.length) * 100,
+                            inlineStart: (index / cluster.length) * 100,
                             width: (1 / cluster.length) * 100,
                             continuesBefore: item.event.start.getTime() < windowStart,
                             continuesAfter: item.event.end.getTime() > windowEnd,
@@ -647,11 +685,11 @@ class WrEventCalendar {
     }
     // --------------------------------------------------------------- chrome
     chipLabel(event) {
-        const time = event.allDay ? this.allDayLabel : this.adapter.format(event.start, 'time');
+        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');
+        return event.allDay ? this.allDayLabel() : this.adapter.format(event.start, 'time');
     }
     canDrag(event) {
         return this.editable() && event.editable !== false;
@@ -748,10 +786,10 @@ class WrEventCalendar {
             return 'ArrowRight';
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrEventCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 wr-event-calendar__step--prev\"\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 class=\"wr-event-calendar__today\" (click)=\"goToday()\">\n        {{ todayLabel() }}\n      </button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step wr-event-calendar__step--next\"\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            class=\"wr-event-calendar__view\"\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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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.inset-inline-start.%]=\"chip.inlineStart\"\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 as\n                    `Alt` + `Shift` + 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.1", ngImport: i0, type: WrEventCalendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: WrEventCalendar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-event-calendar', encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'classes()',
@@ -759,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // 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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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" }]
+                    }, 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 wr-event-calendar__step--prev\"\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 class=\"wr-event-calendar__today\" (click)=\"goToday()\">\n        {{ todayLabel() }}\n      </button>\n      <button\n        wr-btn\n        type=\"button\"\n        size=\"sm\"\n        outlined\n        class=\"wr-event-calendar__step wr-event-calendar__step--next\"\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            class=\"wr-event-calendar__view\"\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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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            (focusin)=\"onCellFocus(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.inset-inline-start.%]=\"chip.inlineStart\"\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 as\n                    `Alt` + `Shift` + 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 }] }] } });
 
 /**