ngwr 11.0.0 → 11.2.0

package/fesm2022/ngwr-calendar-testing.mjs

@@ -0,0 +1,368 @@
+import { ComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+
+/**
+ * @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
+ */
+/**
+ * Test harness for one day cell of a `<wr-calendar>` grid.
+ *
+ * The cell belongs to the calendar, and a date-picker's popup is a calendar in an
+ * overlay — so this is the harness for both, re-exported from
+ * `ngwr/date-picker/testing` under the name it shipped as
+ * (`WrDatePickerDayHarness`). Reach it through `WrCalendarHarness.getDays()`, or
+ * through `WrDatePickerHarness.getDay()` / `getDays()`, which scope it to ONE
+ * picker's panel — those cells are in the shared overlay container, so a bare query
+ * would answer with whichever picker opened first.
+ *
+ * State is read the way a screen reader reads it (`role`, `aria-selected`,
+ * `aria-disabled`) with the `.wr-calendar__day--*` modifiers filling in what
+ * ARIA has no word for: today, the spill days of the neighbouring months, and
+ * the interior of a picked range.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCalendarDayHarness extends ComponentHarness {
+    static hostSelector = '.wr-calendar__day';
+    /** Build a predicate that narrows the query. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCalendarDayHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('selected', options.selected, async (harness, selected) => (await harness.isSelected()) === selected)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled)
+            .addOption('inRange', options.inRange, async (harness, inRange) => (await harness.isInRange()) === inRange);
+    }
+    /** The day number as rendered. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** The day number as a number, for mapping a list of cells to dates. */
+    async getDayOfMonth() {
+        return Number(await this.getText());
+    }
+    /** `'gridcell'` — the cell is a button, and the grid semantics are what a spec should assert. */
+    async getRole() {
+        return (await this.host()).getAttribute('role');
+    }
+    /** Whether this day is (one end of) the current selection. */
+    async isSelected() {
+        return (await (await this.host()).getAttribute('aria-selected')) === 'true';
+    }
+    /**
+     * Whether the day refuses selection — `min` / `max` or `dateFilter` ruled it
+     * out, or the whole calendar is disabled.
+     */
+    async isDisabled() {
+        return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
+    }
+    /** Whether the cell is today's date. */
+    async isToday() {
+        return (await this.host()).hasClass('wr-calendar__day--today');
+    }
+    /**
+     * Whether the cell belongs to a neighbouring month. The grid is always 6x7, so
+     * every month is padded with days that are selectable but not "in" the month —
+     * which is why `WrDatePickerHarness.getDay` and {@link WrCalendarHarness.getDay} skip them.
+     */
+    async isOutOfMonth() {
+        return (await this.host()).hasClass('wr-calendar__day--out-of-month');
+    }
+    /** Whether the day lies strictly between the two ends of a picked range. */
+    async isInRange() {
+        return (await this.host()).hasClass('wr-calendar__day--in-range');
+    }
+    /**
+     * Whether this is the roving cell — the grid's single tab stop, and where the
+     * arrow keys move from.
+     *
+     * At most ONE cell answers `true`, and it is not always one: the calendar's
+     * roving date does not follow `next()` / `previous()`, so a grid navigated away
+     * from that month has no active cell (and, deliberately or not, no tab stop)
+     * until a cell is clicked or the arrows move it.
+     */
+    async isActive() {
+        return (await this.host()).hasClass('wr-calendar__day--focused');
+    }
+    /** Click the cell. A disabled cell swallows the click — assert, do not assume. */
+    async click() {
+        return (await this.host()).click();
+    }
+}
+
+/**
+ * @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 ARROWS = {
+    left: TestKey.LEFT_ARROW,
+    right: TestKey.RIGHT_ARROW,
+    up: TestKey.UP_ARROW,
+    down: TestKey.DOWN_ARROW,
+};
+/**
+ * Test harness for `<wr-calendar>` — the standalone month grid, and the one
+ * `<wr-date-picker>` puts in an overlay.
+ *
+ * **It is three views behind one header.** Clicking the header label walks
+ * `day → month → year`, and each view renders something different: a
+ * `role="grid"` of day cells, or a `role="listbox"` of chips. Every day method
+ * throws off the day view rather than answering `[]`, which would read as "this
+ * month has no days".
+ *
+ * **The roving cell is not the selection.** The grid has one tab stop and the
+ * arrows move it; it starts on the selected date, or on today when nothing is
+ * picked. And it does NOT follow {@link next} / {@link previous} — a grid paged
+ * away from the roving month has no active cell at all, and so no tab stop, until
+ * a key or a click puts one back. That is the component's behaviour, and
+ * {@link getActiveDay} is how a spec sees it.
+ *
+ * **Keys go to the host, not to a cell.** The component listens on its own element,
+ * so {@link pressArrow} works whether or not jsdom managed to put real focus
+ * anywhere — which it often does not, since the calendar moves focus in an
+ * `afterNextRender` and a disabled cell cannot take it.
+ *
+ * @example
+ * ```ts
+ * const calendar = await loader.getHarness(WrCalendarHarness);
+ *
+ * expect(await calendar.getHeaderLabel()).toBe('March 2026');
+ * await (await calendar.getDay(14)).click();
+ * expect(await calendar.getSelectedDayNumbers()).toEqual([14]);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCalendarHarness extends ComponentHarness {
+    static hostSelector = 'wr-calendar';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCalendarHarness, options)
+            .addOption('headerLabel', options.headerLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getHeaderLabel(), label))
+            .addOption('mode', options.mode, async (harness, mode) => (await harness.getMode()) === mode)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    header = this.locatorFor('.wr-calendar__label');
+    prevButton = this.locatorFor('.wr-calendar__nav--prev');
+    nextButton = this.locatorFor('.wr-calendar__nav--next');
+    /** Which sub-view is showing. */
+    async getView() {
+        if ((await this.locatorForOptional('.wr-calendar__months')()) !== null)
+            return 'month';
+        if ((await this.locatorForOptional('.wr-calendar__years')()) !== null)
+            return 'year';
+        return 'day';
+    }
+    /** Single- or range-selection, from the host modifier. */
+    async getMode() {
+        return (await (await this.host()).hasClass('wr-calendar--range')) ? 'range' : 'single';
+    }
+    /** Whether the whole calendar refuses interaction. */
+    async isDisabled() {
+        return (await this.host()).hasClass('wr-calendar--disabled');
+    }
+    /** The header text — `March 2026`, `2026`, or `2016 – 2027` depending on the view. */
+    async getHeaderLabel() {
+        return (await this.header()).text();
+    }
+    /**
+     * Click the header — stepping `day → month → year`.
+     *
+     * The year view is the end of the walk: the header is disabled there, so this
+     * throws rather than clicking a button the DOM would ignore.
+     */
+    async clickHeader() {
+        const header = await this.header();
+        if (await header.getProperty('disabled')) {
+            throw new Error(`WrCalendarHarness.clickHeader(): the header is disabled — the calendar is on the ` +
+                `${await this.getView()} view, which is where the walk stops (or the whole calendar is disabled).`);
+        }
+        await header.click();
+    }
+    /**
+     * Step back — a month, a year or twelve years, depending on the view.
+     *
+     * The roving day cell does NOT come along: paging is a view change, not a
+     * navigation, and the tab stop stays on the month it was in.
+     */
+    async previous() {
+        await (await this.prevButton()).click();
+    }
+    /** Step forward — a month, a year or twelve years, depending on the view. */
+    async next() {
+        await (await this.nextButton()).click();
+    }
+    /**
+     * The back arrow's accessible name, which changes with the view — the arrows are
+     * icon-only, so this is the only name they have.
+     */
+    async getPreviousLabel() {
+        return (await this.prevButton()).getAttribute('aria-label');
+    }
+    /** The forward arrow's accessible name. */
+    async getNextLabel() {
+        return (await this.nextButton()).getAttribute('aria-label');
+    }
+    /** The weekday column headers, in the order the adapter's first day of week puts them. */
+    async getWeekdayNames() {
+        await this.requireView('day', 'getWeekdayNames');
+        const names = await this.locatorForAll('.wr-calendar__weekday')();
+        return Promise.all(names.map(name => name.text()));
+    }
+    /**
+     * Every day cell, in DOM order — 42 of them, since the grid is always six weeks.
+     *
+     * That includes the spill days of the neighbouring months, which are selectable
+     * and not "in" the month; {@link getDay} skips them, and
+     * `WrCalendarDayHarness.isOutOfMonth()` tells them apart.
+     */
+    async getDays(filters = {}) {
+        await this.requireView('day', 'getDays');
+        return this.locatorForAll(WrCalendarDayHarness.with(filters))();
+    }
+    /**
+     * The cell for a day of THIS month.
+     *
+     * The number alone is ambiguous — a 42-cell grid shows most numbers twice — so
+     * the spill days are skipped rather than matched, which is what "the 3rd" means
+     * to someone reading the calendar.
+     */
+    async getDay(dayOfMonth) {
+        for (const day of await this.getDays({ text: String(dayOfMonth) })) {
+            if (!(await day.isOutOfMonth()))
+                return day;
+        }
+        throw new Error(`WrCalendarHarness.getDay(${dayOfMonth}): no such day in ${await this.getHeaderLabel()}. Only cells of ` +
+            'the displayed month count — the grid spills into its neighbours, and those are skipped.');
+    }
+    /** The day numbers currently selected — one in single mode, both ends in range mode. */
+    async getSelectedDayNumbers() {
+        const selected = await this.getDays({ selected: true });
+        return Promise.all(selected.map(day => day.getDayOfMonth()));
+    }
+    /** The day numbers strictly inside a picked range — never the ends. */
+    async getInRangeDayNumbers() {
+        const inRange = await this.getDays({ inRange: true });
+        return Promise.all(inRange.map(day => day.getDayOfMonth()));
+    }
+    /**
+     * The day number holding the roving tab stop, or `null` when the grid has none.
+     *
+     * `null` is a real answer, not a failure: paging with {@link next} leaves the
+     * roving date behind in another month, and the grid then has no `tabindex="0"`
+     * at all until a key or a click puts one back.
+     */
+    async getActiveDayNumber() {
+        for (const day of await this.getDays()) {
+            if (await day.isActive())
+                return day.getDayOfMonth();
+        }
+        return null;
+    }
+    /** The month chips, with their state. Throws off the month view. */
+    async getMonths() {
+        await this.requireView('month', 'getMonths');
+        return this.readChips();
+    }
+    /** The year chips, with their state. Throws off the year view. */
+    async getYears() {
+        await this.requireView('year', 'getYears');
+        return this.readChips();
+    }
+    /**
+     * Click a month or year chip by its printed label — which drops the calendar back
+     * one view, the way clicking the header climbed up.
+     *
+     * Throws on the day view, where there are no chips, and on a label the view does
+     * not offer, naming what it does.
+     */
+    async selectChip(label) {
+        const view = await this.getView();
+        if (view === 'day') {
+            throw new Error('WrCalendarHarness.selectChip(): the calendar is on the day view, which has no chips. Click the ' +
+                'header first — it walks day → month → year.');
+        }
+        for (const chip of await this.locatorForAll('.wr-calendar__chip')()) {
+            if ((await chip.text()) === label) {
+                await chip.click();
+                return;
+            }
+        }
+        const offered = (await this.readChips()).map(chip => chip.label);
+        throw new Error(`WrCalendarHarness.selectChip("${label}"): the ${view} view offers: ${offered.join(', ')}.`);
+    }
+    /**
+     * Press an arrow key — one day left or right, one WEEK up or down.
+     *
+     * Sent to the host, where the component listens, so this does not depend on jsdom
+     * having managed to focus a cell. Under `dir="rtl"` the horizontal pair mirrors:
+     * ArrowRight goes back a day, because the grid itself is mirrored.
+     */
+    async pressArrow(arrow) {
+        await (await this.host()).sendKeys(ARROWS[arrow]);
+    }
+    /** Press Home — the first day of the roving cell's week, not of the month. */
+    async pressHome() {
+        await (await this.host()).sendKeys(TestKey.HOME);
+    }
+    /** Press End — the last day of the roving cell's week. */
+    async pressEnd() {
+        await (await this.host()).sendKeys(TestKey.END);
+    }
+    /** Press PageUp — a month back, or a YEAR back with `shift`. */
+    async pressPageUp(options = {}) {
+        const host = await this.host();
+        await (options.shift ? host.sendKeys({ shift: true }, TestKey.PAGE_UP) : host.sendKeys(TestKey.PAGE_UP));
+    }
+    /** Press PageDown — a month on, or a YEAR on with `shift`. */
+    async pressPageDown(options = {}) {
+        const host = await this.host();
+        await (options.shift ? host.sendKeys({ shift: true }, TestKey.PAGE_DOWN) : host.sendKeys(TestKey.PAGE_DOWN));
+    }
+    /** Press Enter — picking the roving day, exactly as clicking it would. */
+    async pressEnter() {
+        await (await this.host()).sendKeys(TestKey.ENTER);
+    }
+    /**
+     * The role of the element that owns the day rows.
+     *
+     * Worth asserting rather than assuming: the grid is NOT the host. The host also
+     * holds the nav header, and a `role="grid"` may only own rows — so the role sits
+     * on the body, and the weekday strip is a row inside it rather than a sibling.
+     */
+    async getGridRole() {
+        const body = await this.locatorForOptional('.wr-calendar__body')();
+        return body ? body.getAttribute('role') : null;
+    }
+    /** How many week rows the grid renders — always six, which is what keeps it from reflowing. */
+    async getWeekCount() {
+        await this.requireView('day', 'getWeekCount');
+        return (await this.locatorForAll('.wr-calendar__week')()).length;
+    }
+    async readChips() {
+        const chips = await this.locatorForAll('.wr-calendar__chip')();
+        return Promise.all(chips.map(async (chip) => ({
+            label: await chip.text(),
+            selected: (await chip.getAttribute('aria-selected')) === 'true',
+            current: await chip.hasClass('wr-calendar__chip--current'),
+            disabled: (await chip.getAttribute('aria-disabled')) === 'true',
+        })));
+    }
+    async requireView(view, method) {
+        const current = await this.getView();
+        if (current === view)
+            return;
+        throw new Error(`WrCalendarHarness.${method}(): the calendar is showing the ${current} view, not the ${view} one — those ` +
+            'elements are not rendered at all. The header walks day → month → year; clicking a chip walks back down.');
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCalendarDayHarness, WrCalendarHarness };
+//# sourceMappingURL=ngwr-calendar-testing.mjs.map

package/fesm2022/ngwr-calendar-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-calendar-testing.mjs","sources":["../../../projects/lib/calendar/testing/wr-calendar-day-harness.ts","../../../projects/lib/calendar/testing/wr-calendar-harness.ts","../../../projects/lib/calendar/testing/ngwr-calendar-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrCalendarDayHarnessFilters } from './interfaces';\n\n/**\n * Test harness for one day cell of a `<wr-calendar>` grid.\n *\n * The cell belongs to the calendar, and a date-picker's popup is a calendar in an\n * overlay — so this is the harness for both, re-exported from\n * `ngwr/date-picker/testing` under the name it shipped as\n * (`WrDatePickerDayHarness`). Reach it through `WrCalendarHarness.getDays()`, or\n * through `WrDatePickerHarness.getDay()` / `getDays()`, which scope it to ONE\n * picker's panel — those cells are in the shared overlay container, so a bare query\n * would answer with whichever picker opened first.\n *\n * State is read the way a screen reader reads it (`role`, `aria-selected`,\n * `aria-disabled`) with the `.wr-calendar__day--*` modifiers filling in what\n * ARIA has no word for: today, the spill days of the neighbouring months, and\n * the interior of a picked range.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCalendarDayHarness extends ComponentHarness {\n  static hostSelector = '.wr-calendar__day';\n\n  /** Build a predicate that narrows the query. */\n  static with(options: WrCalendarDayHarnessFilters = {}): HarnessPredicate<WrCalendarDayHarness> {\n    return new HarnessPredicate(WrCalendarDayHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption('selected', options.selected, async (harness, selected) => (await harness.isSelected()) === selected)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled)\n      .addOption('inRange', options.inRange, async (harness, inRange) => (await harness.isInRange()) === inRange);\n  }\n\n  /** The day number as rendered. */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** The day number as a number, for mapping a list of cells to dates. */\n  async getDayOfMonth(): Promise<number> {\n    return Number(await this.getText());\n  }\n\n  /** `'gridcell'` — the cell is a button, and the grid semantics are what a spec should assert. */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /** Whether this day is (one end of) the current selection. */\n  async isSelected(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-selected')) === 'true';\n  }\n\n  /**\n   * Whether the day refuses selection — `min` / `max` or `dateFilter` ruled it\n   * out, or the whole calendar is disabled.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Whether the cell is today's date. */\n  async isToday(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-calendar__day--today');\n  }\n\n  /**\n   * Whether the cell belongs to a neighbouring month. The grid is always 6x7, so\n   * every month is padded with days that are selectable but not \"in\" the month —\n   * which is why `WrDatePickerHarness.getDay` and {@link WrCalendarHarness.getDay} skip them.\n   */\n  async isOutOfMonth(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-calendar__day--out-of-month');\n  }\n\n  /** Whether the day lies strictly between the two ends of a picked range. */\n  async isInRange(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-calendar__day--in-range');\n  }\n\n  /**\n   * Whether this is the roving cell — the grid's single tab stop, and where the\n   * arrow keys move from.\n   *\n   * At most ONE cell answers `true`, and it is not always one: the calendar's\n   * roving date does not follow `next()` / `previous()`, so a grid navigated away\n   * from that month has no active cell (and, deliberately or not, no tab stop)\n   * until a cell is clicked or the arrows move it.\n   */\n  async isActive(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-calendar__day--focused');\n  }\n\n  /** Click the cell. A disabled cell swallows the click — assert, do not assume. */\n  async click(): Promise<void> {\n    return (await this.host()).click();\n  }\n}\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, TestKey, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrCalendarMode } from 'ngwr/calendar';\n\nimport type {\n  WrCalendarChip,\n  WrCalendarDayHarnessFilters,\n  WrCalendarHarnessFilters,\n  WrCalendarView,\n} from './interfaces';\nimport { WrCalendarDayHarness } from './wr-calendar-day-harness';\n\n/** The arrow keys, by the direction a user would say out loud. */\ntype Arrow = 'left' | 'right' | 'up' | 'down';\n\nconst ARROWS: Record<Arrow, TestKey> = {\n  left: TestKey.LEFT_ARROW,\n  right: TestKey.RIGHT_ARROW,\n  up: TestKey.UP_ARROW,\n  down: TestKey.DOWN_ARROW,\n};\n\n/**\n * Test harness for `<wr-calendar>` — the standalone month grid, and the one\n * `<wr-date-picker>` puts in an overlay.\n *\n * **It is three views behind one header.** Clicking the header label walks\n * `day → month → year`, and each view renders something different: a\n * `role=\"grid\"` of day cells, or a `role=\"listbox\"` of chips. Every day method\n * throws off the day view rather than answering `[]`, which would read as \"this\n * month has no days\".\n *\n * **The roving cell is not the selection.** The grid has one tab stop and the\n * arrows move it; it starts on the selected date, or on today when nothing is\n * picked. And it does NOT follow {@link next} / {@link previous} — a grid paged\n * away from the roving month has no active cell at all, and so no tab stop, until\n * a key or a click puts one back. That is the component's behaviour, and\n * {@link getActiveDay} is how a spec sees it.\n *\n * **Keys go to the host, not to a cell.** The component listens on its own element,\n * so {@link pressArrow} works whether or not jsdom managed to put real focus\n * anywhere — which it often does not, since the calendar moves focus in an\n * `afterNextRender` and a disabled cell cannot take it.\n *\n * @example\n * ```ts\n * const calendar = await loader.getHarness(WrCalendarHarness);\n *\n * expect(await calendar.getHeaderLabel()).toBe('March 2026');\n * await (await calendar.getDay(14)).click();\n * expect(await calendar.getSelectedDayNumbers()).toEqual([14]);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCalendarHarness extends ComponentHarness {\n  static hostSelector = 'wr-calendar';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCalendarHarnessFilters = {}): HarnessPredicate<WrCalendarHarness> {\n    return new HarnessPredicate(WrCalendarHarness, options)\n      .addOption('headerLabel', options.headerLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getHeaderLabel(), label)\n      )\n      .addOption('mode', options.mode, async (harness, mode) => (await harness.getMode()) === mode)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly header = this.locatorFor('.wr-calendar__label');\n  private readonly prevButton = this.locatorFor('.wr-calendar__nav--prev');\n  private readonly nextButton = this.locatorFor('.wr-calendar__nav--next');\n\n  /** Which sub-view is showing. */\n  async getView(): Promise<WrCalendarView> {\n    if ((await this.locatorForOptional('.wr-calendar__months')()) !== null) return 'month';\n    if ((await this.locatorForOptional('.wr-calendar__years')()) !== null) return 'year';\n    return 'day';\n  }\n\n  /** Single- or range-selection, from the host modifier. */\n  async getMode(): Promise<WrCalendarMode> {\n    return (await (await this.host()).hasClass('wr-calendar--range')) ? 'range' : 'single';\n  }\n\n  /** Whether the whole calendar refuses interaction. */\n  async isDisabled(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-calendar--disabled');\n  }\n\n  /** The header text — `March 2026`, `2026`, or `2016 – 2027` depending on the view. */\n  async getHeaderLabel(): Promise<string> {\n    return (await this.header()).text();\n  }\n\n  /**\n   * Click the header — stepping `day → month → year`.\n   *\n   * The year view is the end of the walk: the header is disabled there, so this\n   * throws rather than clicking a button the DOM would ignore.\n   */\n  async clickHeader(): Promise<void> {\n    const header = await this.header();\n    if (await header.getProperty<boolean>('disabled')) {\n      throw new Error(\n        `WrCalendarHarness.clickHeader(): the header is disabled — the calendar is on the ` +\n          `${await this.getView()} view, which is where the walk stops (or the whole calendar is disabled).`\n      );\n    }\n    await header.click();\n  }\n\n  /**\n   * Step back — a month, a year or twelve years, depending on the view.\n   *\n   * The roving day cell does NOT come along: paging is a view change, not a\n   * navigation, and the tab stop stays on the month it was in.\n   */\n  async previous(): Promise<void> {\n    await (await this.prevButton()).click();\n  }\n\n  /** Step forward — a month, a year or twelve years, depending on the view. */\n  async next(): Promise<void> {\n    await (await this.nextButton()).click();\n  }\n\n  /**\n   * The back arrow's accessible name, which changes with the view — the arrows are\n   * icon-only, so this is the only name they have.\n   */\n  async getPreviousLabel(): Promise<string | null> {\n    return (await this.prevButton()).getAttribute('aria-label');\n  }\n\n  /** The forward arrow's accessible name. */\n  async getNextLabel(): Promise<string | null> {\n    return (await this.nextButton()).getAttribute('aria-label');\n  }\n\n  /** The weekday column headers, in the order the adapter's first day of week puts them. */\n  async getWeekdayNames(): Promise<string[]> {\n    await this.requireView('day', 'getWeekdayNames');\n    const names = await this.locatorForAll('.wr-calendar__weekday')();\n    return Promise.all(names.map(name => name.text()));\n  }\n\n  /**\n   * Every day cell, in DOM order — 42 of them, since the grid is always six weeks.\n   *\n   * That includes the spill days of the neighbouring months, which are selectable\n   * and not \"in\" the month; {@link getDay} skips them, and\n   * `WrCalendarDayHarness.isOutOfMonth()` tells them apart.\n   */\n  async getDays(filters: WrCalendarDayHarnessFilters = {}): Promise<WrCalendarDayHarness[]> {\n    await this.requireView('day', 'getDays');\n    return this.locatorForAll(WrCalendarDayHarness.with(filters))();\n  }\n\n  /**\n   * The cell for a day of THIS month.\n   *\n   * The number alone is ambiguous — a 42-cell grid shows most numbers twice — so\n   * the spill days are skipped rather than matched, which is what \"the 3rd\" means\n   * to someone reading the calendar.\n   */\n  async getDay(dayOfMonth: number): Promise<WrCalendarDayHarness> {\n    for (const day of await this.getDays({ text: String(dayOfMonth) })) {\n      if (!(await day.isOutOfMonth())) return day;\n    }\n    throw new Error(\n      `WrCalendarHarness.getDay(${dayOfMonth}): no such day in ${await this.getHeaderLabel()}. Only cells of ` +\n        'the displayed month count — the grid spills into its neighbours, and those are skipped.'\n    );\n  }\n\n  /** The day numbers currently selected — one in single mode, both ends in range mode. */\n  async getSelectedDayNumbers(): Promise<number[]> {\n    const selected = await this.getDays({ selected: true });\n    return Promise.all(selected.map(day => day.getDayOfMonth()));\n  }\n\n  /** The day numbers strictly inside a picked range — never the ends. */\n  async getInRangeDayNumbers(): Promise<number[]> {\n    const inRange = await this.getDays({ inRange: true });\n    return Promise.all(inRange.map(day => day.getDayOfMonth()));\n  }\n\n  /**\n   * The day number holding the roving tab stop, or `null` when the grid has none.\n   *\n   * `null` is a real answer, not a failure: paging with {@link next} leaves the\n   * roving date behind in another month, and the grid then has no `tabindex=\"0\"`\n   * at all until a key or a click puts one back.\n   */\n  async getActiveDayNumber(): Promise<number | null> {\n    for (const day of await this.getDays()) {\n      if (await day.isActive()) return day.getDayOfMonth();\n    }\n    return null;\n  }\n\n  /** The month chips, with their state. Throws off the month view. */\n  async getMonths(): Promise<WrCalendarChip[]> {\n    await this.requireView('month', 'getMonths');\n    return this.readChips();\n  }\n\n  /** The year chips, with their state. Throws off the year view. */\n  async getYears(): Promise<WrCalendarChip[]> {\n    await this.requireView('year', 'getYears');\n    return this.readChips();\n  }\n\n  /**\n   * Click a month or year chip by its printed label — which drops the calendar back\n   * one view, the way clicking the header climbed up.\n   *\n   * Throws on the day view, where there are no chips, and on a label the view does\n   * not offer, naming what it does.\n   */\n  async selectChip(label: string): Promise<void> {\n    const view = await this.getView();\n    if (view === 'day') {\n      throw new Error(\n        'WrCalendarHarness.selectChip(): the calendar is on the day view, which has no chips. Click the ' +\n          'header first — it walks day → month → year.'\n      );\n    }\n\n    for (const chip of await this.locatorForAll('.wr-calendar__chip')()) {\n      if ((await chip.text()) === label) {\n        await chip.click();\n        return;\n      }\n    }\n\n    const offered = (await this.readChips()).map(chip => chip.label);\n    throw new Error(`WrCalendarHarness.selectChip(\"${label}\"): the ${view} view offers: ${offered.join(', ')}.`);\n  }\n\n  /**\n   * Press an arrow key — one day left or right, one WEEK up or down.\n   *\n   * Sent to the host, where the component listens, so this does not depend on jsdom\n   * having managed to focus a cell. Under `dir=\"rtl\"` the horizontal pair mirrors:\n   * ArrowRight goes back a day, because the grid itself is mirrored.\n   */\n  async pressArrow(arrow: Arrow): Promise<void> {\n    await (await this.host()).sendKeys(ARROWS[arrow]);\n  }\n\n  /** Press Home — the first day of the roving cell's week, not of the month. */\n  async pressHome(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.HOME);\n  }\n\n  /** Press End — the last day of the roving cell's week. */\n  async pressEnd(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.END);\n  }\n\n  /** Press PageUp — a month back, or a YEAR back with `shift`. */\n  async pressPageUp(options: { shift?: boolean } = {}): Promise<void> {\n    const host = await this.host();\n    await (options.shift ? host.sendKeys({ shift: true }, TestKey.PAGE_UP) : host.sendKeys(TestKey.PAGE_UP));\n  }\n\n  /** Press PageDown — a month on, or a YEAR on with `shift`. */\n  async pressPageDown(options: { shift?: boolean } = {}): Promise<void> {\n    const host = await this.host();\n    await (options.shift ? host.sendKeys({ shift: true }, TestKey.PAGE_DOWN) : host.sendKeys(TestKey.PAGE_DOWN));\n  }\n\n  /** Press Enter — picking the roving day, exactly as clicking it would. */\n  async pressEnter(): Promise<void> {\n    await (await this.host()).sendKeys(TestKey.ENTER);\n  }\n\n  /**\n   * The role of the element that owns the day rows.\n   *\n   * Worth asserting rather than assuming: the grid is NOT the host. The host also\n   * holds the nav header, and a `role=\"grid\"` may only own rows — so the role sits\n   * on the body, and the weekday strip is a row inside it rather than a sibling.\n   */\n  async getGridRole(): Promise<string | null> {\n    const body = await this.locatorForOptional('.wr-calendar__body')();\n    return body ? body.getAttribute('role') : null;\n  }\n\n  /** How many week rows the grid renders — always six, which is what keeps it from reflowing. */\n  async getWeekCount(): Promise<number> {\n    await this.requireView('day', 'getWeekCount');\n    return (await this.locatorForAll('.wr-calendar__week')()).length;\n  }\n\n  private async readChips(): Promise<WrCalendarChip[]> {\n    const chips = await this.locatorForAll('.wr-calendar__chip')();\n\n    return Promise.all(\n      chips.map(async (chip: TestElement) => ({\n        label: await chip.text(),\n        selected: (await chip.getAttribute('aria-selected')) === 'true',\n        current: await chip.hasClass('wr-calendar__chip--current'),\n        disabled: (await chip.getAttribute('aria-disabled')) === 'true',\n      }))\n    );\n  }\n\n  private async requireView(view: WrCalendarView, method: string): Promise<void> {\n    const current = await this.getView();\n    if (current === view) return;\n\n    throw new Error(\n      `WrCalendarHarness.${method}(): the calendar is showing the ${current} view, not the ${view} one — those ` +\n        'elements are not rendered at all. The header walks day → month → year; clicking a chip walks back down.'\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-calendar.mjs

@@ -1,8 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, model, inject, ElementRef, Injector, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
+import { signal, input, model, inject, ElementRef, Injector, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
 import { WrDateAdapter } from 'ngwr/date-adapter';
+import { useI18nText } from 'ngwr/i18n';
 
 /**
  * @license
@@ -10,6 +11,11 @@ import { WrDateAdapter } from 'ngwr/date-adapter';
  * 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, for labels the calendar
+ * exposes no input for. Constant and read-only, so one instance is safe to share.
+ */
+const NO_OVERRIDE = signal(null).asReadonly();
 const ROWS = 6;
 const COLS = 7;
 /**
@@ -75,6 +81,40 @@ class WrCalendar {
     /** Which sub-view is currently shown. Cycles `day → month → year` on header click. */
     viewMode = signal('day', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    // The four month/year strings have been in both catalogs since they were written
+    // and nothing read them: the template hard-coded the same English beside them, so a
+    // localized app announced its calendar's arrows in English. `nullSignal()` is the
+    // shim for exactly this — a label with no consumer input to forward.
+    prevMonthLabel = useI18nText(NO_OVERRIDE, 'calendar.prevMonth', 'Previous month');
+    nextMonthLabel = useI18nText(NO_OVERRIDE, 'calendar.nextMonth', 'Next month');
+    prevYearLabel = useI18nText(NO_OVERRIDE, 'calendar.prevYear', 'Previous year');
+    nextYearLabel = useI18nText(NO_OVERRIDE, 'calendar.nextYear', 'Next year');
+    prevYearsLabel = useI18nText(NO_OVERRIDE, 'calendar.prevYears', 'Previous 12 years');
+    nextYearsLabel = useI18nText(NO_OVERRIDE, 'calendar.nextYears', 'Next 12 years');
+    /** What the ← button does from here — a month, a year, or a 12-year page. */
+    prevLabel = computed(() => {
+        switch (this.viewMode()) {
+            case 'year':
+                return this.prevYearsLabel();
+            case 'month':
+                return this.prevYearLabel();
+            default:
+                return this.prevMonthLabel();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
+    /** What the → button does from here. */
+    nextLabel = computed(() => {
+        switch (this.viewMode()) {
+            case 'year':
+                return this.nextYearsLabel();
+            case 'month':
+                return this.nextYearLabel();
+            default:
+                return this.nextMonthLabel();
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
     today = computed(() => this.adapter.today(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
     weekdayNames = computed(() => this.adapter.getDayOfWeekNames('short'), /* @ts-ignore */
@@ -482,7 +522,7 @@ class WrCalendar {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrCalendar, isStandalone: true, selector: "wr-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", range: "rangeChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--prev\"\n    [attr.aria-label]=\"\n      viewMode() === 'year' ? 'Previous 12 years' : viewMode() === 'month' ? 'Previous year' : 'Previous month'\n    \"\n    [disabled]=\"disabled()\"\n    (click)=\"prev()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    [disabled]=\"disabled() || viewMode() === 'year'\"\n    (click)=\"onLabelClick()\"\n  >\n    {{ headerLabel() }}\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--next\"\n    [attr.aria-label]=\"viewMode() === 'year' ? 'Next 12 years' : viewMode() === 'month' ? 'Next year' : 'Next month'\"\n    [disabled]=\"disabled()\"\n    (click)=\"next()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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@switch (viewMode()) {\n  @case ('day') {\n    <!--\n      The weekday strip and the week rows are one grid, so they share a wrapper:\n      `role=\"grid\"` may only own rows, and as siblings the header row had no grid\n      parent at all. `.wr-calendar__body` repeats the host's column gap, so the\n      rendered spacing is unchanged.\n    -->\n    <div class=\"wr-calendar__body\" role=\"grid\">\n      <div class=\"wr-calendar__weekdays\" role=\"row\">\n        @for (name of weekdayNames(); track name) {\n          <span class=\"wr-calendar__weekday\" role=\"columnheader\">{{ name }}</span>\n        }\n      </div>\n\n      <div class=\"wr-calendar__grid\" role=\"rowgroup\" (mouseleave)=\"onCellLeave()\">\n        @for (week of weeks(); track $index) {\n          <div class=\"wr-calendar__week\" role=\"row\">\n            @for (day of week; track trackByTime($index, day)) {\n              <button\n                type=\"button\"\n                class=\"wr-calendar__day\"\n                role=\"gridcell\"\n                [class.wr-calendar__day--today]=\"isToday(day)\"\n                [class.wr-calendar__day--out-of-month]=\"isOutOfMonth(day)\"\n                [class.wr-calendar__day--selected]=\"isSelected(day)\"\n                [class.wr-calendar__day--in-range]=\"isInRange(day)\"\n                [class.wr-calendar__day--range-preview]=\"isInRangePreview(day)\"\n                [class.wr-calendar__day--focused]=\"isFocused(day)\"\n                [disabled]=\"isDisabled(day)\"\n                [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDisabled(day)\"\n                (click)=\"onCellClick(day)\"\n                (mouseenter)=\"onCellEnter(day)\"\n              >\n                {{ day.getDate() }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"listbox\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isMonthCurrent($index)\"\n          [class.wr-calendar__chip--selected]=\"isMonthSelected($index)\"\n          [disabled]=\"isMonthDisabled($index)\"\n          [attr.aria-selected]=\"isMonthSelected($index)\"\n          [attr.aria-disabled]=\"isMonthDisabled($index)\"\n          (click)=\"onMonthSelect($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n\n  @case ('year') {\n    <div class=\"wr-calendar__years\" role=\"listbox\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isYearCurrent(year)\"\n          [class.wr-calendar__chip--selected]=\"isYearSelected(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          [attr.aria-selected]=\"isYearSelected(year)\"\n          [attr.aria-disabled]=\"isYearDisabled(year)\"\n          (click)=\"onYearSelect(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: WrCalendar, isStandalone: true, selector: "wr-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", range: "rangeChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "classes()" } }, ngImport: i0, template: "<div class=\"wr-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--prev\"\n    [attr.aria-label]=\"prevLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"prev()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    [disabled]=\"disabled() || viewMode() === 'year'\"\n    (click)=\"onLabelClick()\"\n  >\n    {{ headerLabel() }}\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--next\"\n    [attr.aria-label]=\"nextLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"next()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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@switch (viewMode()) {\n  @case ('day') {\n    <!--\n      The weekday strip and the week rows are one grid, so they share a wrapper:\n      `role=\"grid\"` may only own rows, and as siblings the header row had no grid\n      parent at all. `.wr-calendar__body` repeats the host's column gap, so the\n      rendered spacing is unchanged.\n    -->\n    <div class=\"wr-calendar__body\" role=\"grid\">\n      <div class=\"wr-calendar__weekdays\" role=\"row\">\n        @for (name of weekdayNames(); track name) {\n          <span class=\"wr-calendar__weekday\" role=\"columnheader\">{{ name }}</span>\n        }\n      </div>\n\n      <div class=\"wr-calendar__grid\" role=\"rowgroup\" (mouseleave)=\"onCellLeave()\">\n        @for (week of weeks(); track $index) {\n          <div class=\"wr-calendar__week\" role=\"row\">\n            @for (day of week; track trackByTime($index, day)) {\n              <button\n                type=\"button\"\n                class=\"wr-calendar__day\"\n                role=\"gridcell\"\n                [class.wr-calendar__day--today]=\"isToday(day)\"\n                [class.wr-calendar__day--out-of-month]=\"isOutOfMonth(day)\"\n                [class.wr-calendar__day--selected]=\"isSelected(day)\"\n                [class.wr-calendar__day--in-range]=\"isInRange(day)\"\n                [class.wr-calendar__day--range-preview]=\"isInRangePreview(day)\"\n                [class.wr-calendar__day--focused]=\"isFocused(day)\"\n                [disabled]=\"isDisabled(day)\"\n                [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDisabled(day)\"\n                (click)=\"onCellClick(day)\"\n                (mouseenter)=\"onCellEnter(day)\"\n              >\n                {{ day.getDate() }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"listbox\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isMonthCurrent($index)\"\n          [class.wr-calendar__chip--selected]=\"isMonthSelected($index)\"\n          [disabled]=\"isMonthDisabled($index)\"\n          [attr.aria-selected]=\"isMonthSelected($index)\"\n          [attr.aria-disabled]=\"isMonthDisabled($index)\"\n          (click)=\"onMonthSelect($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n\n  @case ('year') {\n    <div class=\"wr-calendar__years\" role=\"listbox\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isYearCurrent(year)\"\n          [class.wr-calendar__chip--selected]=\"isYearSelected(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          [attr.aria-selected]=\"isYearSelected(year)\"\n          [attr.aria-disabled]=\"isYearDisabled(year)\"\n          (click)=\"onYearSelect(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCalendar, decorators: [{
             type: Component,
@@ -492,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // only own rows. The role sits on `.wr-calendar__body`, which is the day
                         // matrix and nothing else.
                         '(keydown)': 'onKeyDown($event)',
-                    }, template: "<div class=\"wr-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--prev\"\n    [attr.aria-label]=\"\n      viewMode() === 'year' ? 'Previous 12 years' : viewMode() === 'month' ? 'Previous year' : 'Previous month'\n    \"\n    [disabled]=\"disabled()\"\n    (click)=\"prev()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    [disabled]=\"disabled() || viewMode() === 'year'\"\n    (click)=\"onLabelClick()\"\n  >\n    {{ headerLabel() }}\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--next\"\n    [attr.aria-label]=\"viewMode() === 'year' ? 'Next 12 years' : viewMode() === 'month' ? 'Next year' : 'Next month'\"\n    [disabled]=\"disabled()\"\n    (click)=\"next()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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@switch (viewMode()) {\n  @case ('day') {\n    <!--\n      The weekday strip and the week rows are one grid, so they share a wrapper:\n      `role=\"grid\"` may only own rows, and as siblings the header row had no grid\n      parent at all. `.wr-calendar__body` repeats the host's column gap, so the\n      rendered spacing is unchanged.\n    -->\n    <div class=\"wr-calendar__body\" role=\"grid\">\n      <div class=\"wr-calendar__weekdays\" role=\"row\">\n        @for (name of weekdayNames(); track name) {\n          <span class=\"wr-calendar__weekday\" role=\"columnheader\">{{ name }}</span>\n        }\n      </div>\n\n      <div class=\"wr-calendar__grid\" role=\"rowgroup\" (mouseleave)=\"onCellLeave()\">\n        @for (week of weeks(); track $index) {\n          <div class=\"wr-calendar__week\" role=\"row\">\n            @for (day of week; track trackByTime($index, day)) {\n              <button\n                type=\"button\"\n                class=\"wr-calendar__day\"\n                role=\"gridcell\"\n                [class.wr-calendar__day--today]=\"isToday(day)\"\n                [class.wr-calendar__day--out-of-month]=\"isOutOfMonth(day)\"\n                [class.wr-calendar__day--selected]=\"isSelected(day)\"\n                [class.wr-calendar__day--in-range]=\"isInRange(day)\"\n                [class.wr-calendar__day--range-preview]=\"isInRangePreview(day)\"\n                [class.wr-calendar__day--focused]=\"isFocused(day)\"\n                [disabled]=\"isDisabled(day)\"\n                [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDisabled(day)\"\n                (click)=\"onCellClick(day)\"\n                (mouseenter)=\"onCellEnter(day)\"\n              >\n                {{ day.getDate() }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"listbox\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isMonthCurrent($index)\"\n          [class.wr-calendar__chip--selected]=\"isMonthSelected($index)\"\n          [disabled]=\"isMonthDisabled($index)\"\n          [attr.aria-selected]=\"isMonthSelected($index)\"\n          [attr.aria-disabled]=\"isMonthDisabled($index)\"\n          (click)=\"onMonthSelect($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n\n  @case ('year') {\n    <div class=\"wr-calendar__years\" role=\"listbox\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isYearCurrent(year)\"\n          [class.wr-calendar__chip--selected]=\"isYearSelected(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          [attr.aria-selected]=\"isYearSelected(year)\"\n          [attr.aria-disabled]=\"isYearDisabled(year)\"\n          (click)=\"onYearSelect(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n" }]
+                    }, template: "<div class=\"wr-calendar__header\">\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--prev\"\n    [attr.aria-label]=\"prevLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"prev()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    [disabled]=\"disabled() || viewMode() === 'year'\"\n    (click)=\"onLabelClick()\"\n  >\n    {{ headerLabel() }}\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__nav wr-calendar__nav--next\"\n    [attr.aria-label]=\"nextLabel()\"\n    [disabled]=\"disabled()\"\n    (click)=\"next()\"\n  >\n    <svg\n      width=\"18\"\n      height=\"18\"\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@switch (viewMode()) {\n  @case ('day') {\n    <!--\n      The weekday strip and the week rows are one grid, so they share a wrapper:\n      `role=\"grid\"` may only own rows, and as siblings the header row had no grid\n      parent at all. `.wr-calendar__body` repeats the host's column gap, so the\n      rendered spacing is unchanged.\n    -->\n    <div class=\"wr-calendar__body\" role=\"grid\">\n      <div class=\"wr-calendar__weekdays\" role=\"row\">\n        @for (name of weekdayNames(); track name) {\n          <span class=\"wr-calendar__weekday\" role=\"columnheader\">{{ name }}</span>\n        }\n      </div>\n\n      <div class=\"wr-calendar__grid\" role=\"rowgroup\" (mouseleave)=\"onCellLeave()\">\n        @for (week of weeks(); track $index) {\n          <div class=\"wr-calendar__week\" role=\"row\">\n            @for (day of week; track trackByTime($index, day)) {\n              <button\n                type=\"button\"\n                class=\"wr-calendar__day\"\n                role=\"gridcell\"\n                [class.wr-calendar__day--today]=\"isToday(day)\"\n                [class.wr-calendar__day--out-of-month]=\"isOutOfMonth(day)\"\n                [class.wr-calendar__day--selected]=\"isSelected(day)\"\n                [class.wr-calendar__day--in-range]=\"isInRange(day)\"\n                [class.wr-calendar__day--range-preview]=\"isInRangePreview(day)\"\n                [class.wr-calendar__day--focused]=\"isFocused(day)\"\n                [disabled]=\"isDisabled(day)\"\n                [attr.tabindex]=\"isFocused(day) ? 0 : -1\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDisabled(day)\"\n                (click)=\"onCellClick(day)\"\n                (mouseenter)=\"onCellEnter(day)\"\n              >\n                {{ day.getDate() }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"listbox\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isMonthCurrent($index)\"\n          [class.wr-calendar__chip--selected]=\"isMonthSelected($index)\"\n          [disabled]=\"isMonthDisabled($index)\"\n          [attr.aria-selected]=\"isMonthSelected($index)\"\n          [attr.aria-disabled]=\"isMonthDisabled($index)\"\n          (click)=\"onMonthSelect($index)\"\n        >\n          {{ name }}\n        </button>\n      }\n    </div>\n  }\n\n  @case ('year') {\n    <div class=\"wr-calendar__years\" role=\"listbox\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"option\"\n          [class.wr-calendar__chip--current]=\"isYearCurrent(year)\"\n          [class.wr-calendar__chip--selected]=\"isYearSelected(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          [attr.aria-selected]=\"isYearSelected(year)\"\n          [attr.aria-disabled]=\"isYearDisabled(year)\"\n          (click)=\"onYearSelect(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**