ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-calendar-heatmap.mjs

@@ -0,0 +1,145 @@
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * @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
+ */
+function toIso(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+function parseInput(value) {
+    return value instanceof Date ? new Date(value) : new Date(`${value}T00:00:00`);
+}
+const WEEKDAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/**
+ * GitHub-style year-grid heatmap. One column per ISO week, one row per
+ * weekday — cells coloured by `value` relative to the data set's max.
+ *
+ * @example
+ * ```html
+ * <wr-calendar-heatmap [data]="contributions" />
+ * <wr-calendar-heatmap [data]="data" [endDate]="today" [weeks]="26" color="#10b981" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/calendar-heatmap
+ */
+class WrCalendarHeatmap {
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Last day to render. @default today */
+    endDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+    /** Number of weeks (columns) to render. @default 53 */
+    weeks = input(53, { ...(ngDevMode ? { debugName: "weeks" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(4, coerceNumberProperty(v, 53)) });
+    /** Cell side in CSS pixels. @default 11 */
+    cellSize = input(11, { ...(ngDevMode ? { debugName: "cellSize" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(4, coerceNumberProperty(v, 11)) });
+    /** Pixel gap between cells. @default 2 */
+    cellGap = input(2, { ...(ngDevMode ? { debugName: "cellGap" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 2)) });
+    /** Cell fill colour at full intensity. @default primary */
+    color = input('var(--wr-color-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Background colour for zero-value days. @default light tint */
+    emptyColor = input('rgba(var(--wr-color-light-rgb), 0.5)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyColor" }] : /* istanbul ignore next */ []));
+    /** Show the weekday + month labels around the grid. @default true */
+    showLabels = input(true, { ...(ngDevMode ? { debugName: "showLabels" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    weekdayLabels = WEEKDAY_LABELS;
+    cells = computed(() => {
+        const end = this.endDate() ? parseInput(this.endDate()) : new Date();
+        end.setHours(0, 0, 0, 0);
+        const weeks = this.weeks();
+        const totalDays = weeks * 7;
+        // Build value lookup.
+        const map = new Map();
+        for (const d of this.data()) {
+            const iso = toIso(parseInput(d.date));
+            map.set(iso, (map.get(iso) ?? 0) + d.value);
+        }
+        const max = [...map.values()].reduce((a, b) => Math.max(a, b), 0);
+        // Walk backwards from end day; arrange into columns by week, rows by weekday.
+        const out = [];
+        const start = new Date(end);
+        start.setDate(end.getDate() - totalDays + 1);
+        // Align start so column 0 begins on a Sunday (matches GitHub).
+        start.setDate(start.getDate() - start.getDay());
+        const cursor = new Date(start);
+        let column = 0;
+        while (cursor <= end) {
+            for (let row = 0; row < 7; row++) {
+                const iso = toIso(cursor);
+                const value = map.get(iso) ?? 0;
+                const intensity = max > 0 ? Math.min(1, value / max) : 0;
+                out.push({ iso, value, intensity, week: column, day: row });
+                cursor.setDate(cursor.getDate() + 1);
+            }
+            column++;
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
+    monthLabels = computed(() => {
+        // Pull the first cell of each visible month → render a label centered
+        // over its column.
+        const cells = this.cells();
+        const seen = new Set();
+        return cells
+            .filter(cell => {
+            const date = new Date(`${cell.iso}T00:00:00`);
+            if (date.getDate() !== 1)
+                return false;
+            const key = `${date.getFullYear()}-${date.getMonth()}`;
+            if (seen.has(key))
+                return false;
+            seen.add(key);
+            return true;
+        })
+            .map(cell => ({
+            label: MONTH_LABELS[new Date(`${cell.iso}T00:00:00`).getMonth()],
+            week: cell.week,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLabels" }] : /* istanbul ignore next */ []));
+    columnCount = computed(() => {
+        const cells = this.cells();
+        return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    colorFor(intensity) {
+        if (intensity === 0)
+            return this.emptyColor();
+        return this.color();
+    }
+    opacityFor(intensity) {
+        if (intensity === 0)
+            return 1;
+        // 4 levels — match the GitHub aesthetic.
+        if (intensity < 0.25)
+            return 0.25;
+        if (intensity < 0.5)
+            return 0.5;
+        if (intensity < 0.75)
+            return 0.75;
+        return 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrCalendarHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrCalendarHeatmap, isStandalone: true, selector: "wr-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, weeks: { classPropertyName: "weeks", publicName: "weeks", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, cellGap: { classPropertyName: "cellGap", publicName: "cellGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyColor: { classPropertyName: "emptyColor", publicName: "emptyColor", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-calendar-heatmap" }, ngImport: i0, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels; track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"`${cell.iso}: ${cell.value}`\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrCalendarHeatmap, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-calendar-heatmap', encapsulation: ViewEncapsulation.None, host: { class: 'wr-calendar-heatmap' }, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels; track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"`${cell.iso}: ${cell.value}`\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], weeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "weeks", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], cellGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColor", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCalendarHeatmap };
+//# sourceMappingURL=ngwr-calendar-heatmap.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-calendar-heatmap.mjs","sources":["../../../projects/lib/calendar-heatmap/calendar-heatmap.ts","../../../projects/lib/calendar-heatmap/calendar-heatmap.html","../../../projects/lib/calendar-heatmap/ngwr-calendar-heatmap.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 { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrHeatmapDatum } from './interfaces';\n\ninterface Cell {\n  readonly iso: string;\n  readonly value: number;\n  readonly intensity: number;\n  readonly week: number;\n  readonly day: number;\n}\n\nfunction toIso(d: Date): string {\n  const y = d.getFullYear();\n  const m = String(d.getMonth() + 1).padStart(2, '0');\n  const day = String(d.getDate()).padStart(2, '0');\n  return `${y}-${m}-${day}`;\n}\n\nfunction parseInput(value: string | Date): Date {\n  return value instanceof Date ? new Date(value) : new Date(`${value}T00:00:00`);\n}\n\nconst WEEKDAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', ''];\nconst MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n\n/**\n * GitHub-style year-grid heatmap. One column per ISO week, one row per\n * weekday — cells coloured by `value` relative to the data set's max.\n *\n * @example\n * ```html\n * <wr-calendar-heatmap [data]=\"contributions\" />\n * <wr-calendar-heatmap [data]=\"data\" [endDate]=\"today\" [weeks]=\"26\" color=\"#10b981\" />\n * ```\n *\n * @see https://ngwr.dev/components/calendar-heatmap\n */\n@Component({\n  selector: 'wr-calendar-heatmap',\n  templateUrl: './calendar-heatmap.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-calendar-heatmap' },\n})\nexport class WrCalendarHeatmap {\n  readonly data = input<readonly WrHeatmapDatum[]>([]);\n\n  /** Last day to render. @default today */\n  readonly endDate = input<string | Date | null>(null);\n\n  /** Number of weeks (columns) to render. @default 53 */\n  readonly weeks = input(53, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 53)) });\n\n  /** Cell side in CSS pixels. @default 11 */\n  readonly cellSize = input(11, { transform: (v: unknown): number => Math.max(4, coerceNumberProperty(v, 11)) });\n\n  /** Pixel gap between cells. @default 2 */\n  readonly cellGap = input(2, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 2)) });\n\n  /** Cell fill colour at full intensity. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Background colour for zero-value days. @default light tint */\n  readonly emptyColor = input<string>('rgba(var(--wr-color-light-rgb), 0.5)');\n\n  /** Show the weekday + month labels around the grid. @default true */\n  readonly showLabels = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly weekdayLabels = WEEKDAY_LABELS;\n\n  protected readonly cells = computed<readonly Cell[]>(() => {\n    const end = this.endDate() ? parseInput(this.endDate()!) : new Date();\n    end.setHours(0, 0, 0, 0);\n    const weeks = this.weeks();\n    const totalDays = weeks * 7;\n\n    // Build value lookup.\n    const map = new Map<string, number>();\n    for (const d of this.data()) {\n      const iso = toIso(parseInput(d.date));\n      map.set(iso, (map.get(iso) ?? 0) + d.value);\n    }\n    const max = [...map.values()].reduce((a, b) => Math.max(a, b), 0);\n\n    // Walk backwards from end day; arrange into columns by week, rows by weekday.\n    const out: Cell[] = [];\n    const start = new Date(end);\n    start.setDate(end.getDate() - totalDays + 1);\n    // Align start so column 0 begins on a Sunday (matches GitHub).\n    start.setDate(start.getDate() - start.getDay());\n\n    const cursor = new Date(start);\n    let column = 0;\n    while (cursor <= end) {\n      for (let row = 0; row < 7; row++) {\n        const iso = toIso(cursor);\n        const value = map.get(iso) ?? 0;\n        const intensity = max > 0 ? Math.min(1, value / max) : 0;\n        out.push({ iso, value, intensity, week: column, day: row });\n        cursor.setDate(cursor.getDate() + 1);\n      }\n      column++;\n    }\n    return out;\n  });\n\n  protected readonly monthLabels = computed(() => {\n    // Pull the first cell of each visible month → render a label centered\n    // over its column.\n    const cells = this.cells();\n    const seen = new Set<string>();\n    return cells\n      .filter(cell => {\n        const date = new Date(`${cell.iso}T00:00:00`);\n        if (date.getDate() !== 1) return false;\n        const key = `${date.getFullYear()}-${date.getMonth()}`;\n        if (seen.has(key)) return false;\n        seen.add(key);\n        return true;\n      })\n      .map(cell => ({\n        label: MONTH_LABELS[new Date(`${cell.iso}T00:00:00`).getMonth()],\n        week: cell.week,\n      }));\n  });\n\n  protected readonly columnCount = computed(() => {\n    const cells = this.cells();\n    return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;\n  });\n\n  protected colorFor(intensity: number): string {\n    if (intensity === 0) return this.emptyColor();\n    return this.color();\n  }\n\n  protected opacityFor(intensity: number): number {\n    if (intensity === 0) return 1;\n    // 4 levels — match the GitHub aesthetic.\n    if (intensity < 0.25) return 0.25;\n    if (intensity < 0.5) return 0.5;\n    if (intensity < 0.75) return 0.75;\n    return 1;\n  }\n}\n\nexport type { WrHeatmapDatum } from './interfaces';\n","<div\n  class=\"wr-calendar-heatmap__grid\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels; track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"`${cell.iso}: ${cell.value}`\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\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

@@ -0,0 +1,402 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, model, inject, ElementRef, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
+import { WrDateAdapter } from 'ngwr/date-adapter';
+
+/**
+ * @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 ROWS = 6;
+const COLS = 7;
+/**
+ * Month-view calendar. Supports single-date selection (`mode="single"`) or
+ * date-range selection (`mode="range"`). Reusable on its own; consumed by
+ * `<wr-date-picker>` inside an overlay.
+ *
+ * Uses {@link WrDateAdapter} for all date math and formatting — register
+ * one via {@link provideWrDateAdapter} at bootstrap.
+ *
+ * @example
+ * ```html
+ * <wr-calendar [(date)]="picked" [min]="minDate" />
+ *
+ * <wr-calendar mode="range" [(range)]="[start, end]" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/calendar
+ */
+class WrCalendar {
+    /** Selection mode. @default 'single' */
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable single value (used when `mode === 'single'`). */
+    date = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable `[start, end]` (used when `mode === 'range'`). */
+    range = model([null, null], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Min selectable date (inclusive). */
+    min = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Max selectable date (inclusive). */
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Predicate — return `false` to disable specific dates (e.g. weekends only). */
+    dateFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
+    /** Disable interaction entirely. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    adapter = inject(WrDateAdapter);
+    host = inject(ElementRef);
+    /** Currently displayed month (any date inside it). */
+    viewDate = signal(this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    /** Date currently focused by keyboard (single roving tabindex). */
+    focusedDate = signal(this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    /** Hovered date during range-mode end-pick — drives the preview highlight. */
+    hoverDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
+    /** Which sub-view is currently shown. Cycles `day → month → year` on header click. */
+    viewMode = signal('day', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+    today = computed(() => this.adapter.today(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "today" }] : /* istanbul ignore next */ []));
+    weekdayNames = computed(() => this.adapter.getDayOfWeekNames('short'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayNames" }] : /* istanbul ignore next */ []));
+    monthsView = computed(() => this.adapter.getMonthNames('short'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthsView" }] : /* istanbul ignore next */ []));
+    /** 12-year window centered on the floor-aligned decade containing `viewDate`. */
+    yearsView = computed(() => {
+        const y = this.adapter.getYear(this.viewDate());
+        const start = Math.floor(y / 12) * 12;
+        return Array.from({ length: 12 }, (_, i) => start + i);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearsView" }] : /* istanbul ignore next */ []));
+    headerLabel = computed(() => {
+        const v = this.viewDate();
+        switch (this.viewMode()) {
+            case 'day': {
+                const monthNames = this.adapter.getMonthNames('long');
+                return `${monthNames[this.adapter.getMonth(v)]} ${this.adapter.getYear(v)}`;
+            }
+            case 'month':
+                return `${this.adapter.getYear(v)}`;
+            case 'year': {
+                const years = this.yearsView();
+                return `${years[0]} – ${years[years.length - 1]}`;
+            }
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerLabel" }] : /* istanbul ignore next */ []));
+    /** 6×7 day grid covering the current month plus spillover. */
+    weeks = computed(() => {
+        const view = this.viewDate();
+        const year = this.adapter.getYear(view);
+        const month = this.adapter.getMonth(view);
+        const firstOfMonth = this.adapter.createDate(year, month, 1);
+        const firstWeekday = this.adapter.getDayOfWeek(firstOfMonth);
+        const firstDayOfWeek = this.adapter.getFirstDayOfWeek();
+        const lead = (firstWeekday - firstDayOfWeek + 7) % 7;
+        const gridStart = this.adapter.addDays(firstOfMonth, -lead);
+        const out = [];
+        for (let w = 0; w < ROWS; w++) {
+            const row = [];
+            for (let d = 0; d < COLS; d++) {
+                row.push(this.adapter.addDays(gridStart, w * COLS + d));
+            }
+            out.push(row);
+        }
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weeks" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-calendar', `wr-calendar--${this.mode()}`];
+        if (this.disabled())
+            parts.push('wr-calendar--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Initial focus: selected date if any, else today. Also snap viewDate to that month.
+        afterNextRender(() => {
+            const initial = this.date() ?? this.range()[0] ?? this.adapter.today();
+            this.focusedDate.set(initial);
+            this.viewDate.set(initial);
+        });
+        // Keep viewDate in sync when date / range changes externally to a
+        // different month. The viewDate read must stay untracked — otherwise
+        // the effect re-runs on every internal navigation (month stepping,
+        // year picking) and snaps the view back to the selected month.
+        effect(() => {
+            const candidate = this.mode() === 'single' ? this.date() : this.range()[0];
+            if (!candidate)
+                return;
+            untracked(() => {
+                if (!this.adapter.isSameMonth(candidate, this.viewDate())) {
+                    this.viewDate.set(candidate);
+                }
+            });
+        });
+    }
+    // Navigation
+    /** Header `‹` button — steps by month / year / decade based on the active view. */
+    prev() {
+        this.viewDate.set(this.stepViewDate(-1));
+    }
+    /** Header `›` button — steps by month / year / decade based on the active view. */
+    next() {
+        this.viewDate.set(this.stepViewDate(1));
+    }
+    /** Header label click — zooms out (`day → month → year`). No-op at year view. */
+    onLabelClick() {
+        if (this.disabled())
+            return;
+        if (this.viewMode() === 'day') {
+            this.viewMode.set('month');
+        }
+        else if (this.viewMode() === 'month') {
+            this.viewMode.set('year');
+        }
+    }
+    onMonthSelect(monthIdx) {
+        if (this.isMonthDisabled(monthIdx))
+            return;
+        const v = this.viewDate();
+        this.viewDate.set(this.adapter.createDate(this.adapter.getYear(v), monthIdx, 1));
+        this.viewMode.set('day');
+    }
+    onYearSelect(year) {
+        if (this.isYearDisabled(year))
+            return;
+        const v = this.viewDate();
+        this.viewDate.set(this.adapter.createDate(year, this.adapter.getMonth(v), 1));
+        this.viewMode.set('month');
+    }
+    stepViewDate(direction) {
+        const v = this.viewDate();
+        switch (this.viewMode()) {
+            case 'day':
+                return this.adapter.addMonths(v, direction);
+            case 'month':
+                return this.adapter.addYears(v, direction);
+            case 'year':
+                return this.adapter.addYears(v, direction * 12);
+        }
+    }
+    // Cell state predicates (used by template)
+    isToday(date) {
+        return this.adapter.isSameDay(date, this.today());
+    }
+    isOutOfMonth(date) {
+        return !this.adapter.isSameMonth(date, this.viewDate());
+    }
+    isSelected(date) {
+        if (this.mode() === 'single') {
+            const v = this.date();
+            return v ? this.adapter.isSameDay(date, v) : false;
+        }
+        const [start, end] = this.range();
+        if (start && this.adapter.isSameDay(date, start))
+            return true;
+        if (end && this.adapter.isSameDay(date, end))
+            return true;
+        return false;
+    }
+    isInRange(date) {
+        if (this.mode() !== 'range')
+            return false;
+        const [start, end] = this.range();
+        if (!start || !end)
+            return false;
+        return this.adapter.compareDate(date, start) > 0 && this.adapter.compareDate(date, end) < 0;
+    }
+    isInRangePreview(date) {
+        if (this.mode() !== 'range')
+            return false;
+        const [start, end] = this.range();
+        const hover = this.hoverDate();
+        if (!start || end || !hover)
+            return false;
+        const before = this.adapter.compareDate(start, hover) <= 0;
+        const lo = before ? start : hover;
+        const hi = before ? hover : start;
+        return this.adapter.compareDate(date, lo) > 0 && this.adapter.compareDate(date, hi) < 0;
+    }
+    isFocused(date) {
+        return this.adapter.isSameDay(date, this.focusedDate());
+    }
+    isDisabled(date) {
+        if (this.disabled())
+            return true;
+        const min = this.min();
+        if (min && this.adapter.compareDate(date, min) < 0)
+            return true;
+        const max = this.max();
+        if (max && this.adapter.compareDate(date, max) > 0)
+            return true;
+        const filter = this.dateFilter();
+        if (filter && !filter(date))
+            return true;
+        return false;
+    }
+    // Month / year view predicates
+    isMonthCurrent(monthIdx) {
+        return this.adapter.getMonth(this.viewDate()) === monthIdx;
+    }
+    isMonthSelected(monthIdx) {
+        const v = this.mode() === 'single' ? this.date() : this.range()[0];
+        if (!v)
+            return false;
+        return this.adapter.getYear(v) === this.adapter.getYear(this.viewDate()) && this.adapter.getMonth(v) === monthIdx;
+    }
+    isMonthDisabled(monthIdx) {
+        if (this.disabled())
+            return true;
+        const year = this.adapter.getYear(this.viewDate());
+        const monthStart = this.adapter.createDate(year, monthIdx, 1);
+        const monthEnd = this.adapter.createDate(year, monthIdx, this.adapter.getDaysInMonth(monthStart));
+        const min = this.min();
+        if (min && this.adapter.compareDate(monthEnd, min) < 0)
+            return true;
+        const max = this.max();
+        if (max && this.adapter.compareDate(monthStart, max) > 0)
+            return true;
+        return false;
+    }
+    isYearCurrent(year) {
+        return this.adapter.getYear(this.viewDate()) === year;
+    }
+    isYearSelected(year) {
+        const v = this.mode() === 'single' ? this.date() : this.range()[0];
+        return v ? this.adapter.getYear(v) === year : false;
+    }
+    isYearDisabled(year) {
+        if (this.disabled())
+            return true;
+        const min = this.min();
+        if (min && year < this.adapter.getYear(min))
+            return true;
+        const max = this.max();
+        if (max && year > this.adapter.getYear(max))
+            return true;
+        return false;
+    }
+    // Interaction
+    onCellClick(date) {
+        if (this.isDisabled(date))
+            return;
+        if (this.mode() === 'single') {
+            this.date.set(this.adapter.clone(date));
+        }
+        else {
+            this.applyRangeClick(date);
+        }
+        this.focusedDate.set(date);
+        if (!this.adapter.isSameMonth(date, this.viewDate())) {
+            this.viewDate.set(date);
+        }
+    }
+    onCellEnter(date) {
+        if (this.mode() === 'range')
+            this.hoverDate.set(date);
+    }
+    onCellLeave() {
+        if (this.mode() === 'range')
+            this.hoverDate.set(null);
+    }
+    applyRangeClick(date) {
+        const [start, end] = this.range();
+        if (!start || (start && end)) {
+            this.range.set([this.adapter.clone(date), null]);
+            return;
+        }
+        if (this.adapter.compareDate(date, start) < 0) {
+            this.range.set([this.adapter.clone(date), start]);
+        }
+        else {
+            this.range.set([start, this.adapter.clone(date)]);
+        }
+        this.hoverDate.set(null);
+    }
+    // Keyboard
+    onKeyDown(event) {
+        if (this.disabled())
+            return;
+        const current = this.focusedDate();
+        let next = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = this.adapter.addDays(current, -1);
+                break;
+            case 'ArrowRight':
+                next = this.adapter.addDays(current, 1);
+                break;
+            case 'ArrowUp':
+                next = this.adapter.addDays(current, -7);
+                break;
+            case 'ArrowDown':
+                next = this.adapter.addDays(current, 7);
+                break;
+            case 'Home': {
+                const dow = this.adapter.getDayOfWeek(current);
+                const first = this.adapter.getFirstDayOfWeek();
+                next = this.adapter.addDays(current, -((dow - first + 7) % 7));
+                break;
+            }
+            case 'End': {
+                const dow = this.adapter.getDayOfWeek(current);
+                const first = this.adapter.getFirstDayOfWeek();
+                next = this.adapter.addDays(current, 6 - ((dow - first + 7) % 7));
+                break;
+            }
+            case 'PageUp':
+                next = event.shiftKey ? this.adapter.addYears(current, -1) : this.adapter.addMonths(current, -1);
+                break;
+            case 'PageDown':
+                next = event.shiftKey ? this.adapter.addYears(current, 1) : this.adapter.addMonths(current, 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.onCellClick(current);
+                return;
+        }
+        if (!next)
+            return;
+        event.preventDefault();
+        this.focusedDate.set(next);
+        if (!this.adapter.isSameMonth(next, this.viewDate())) {
+            this.viewDate.set(next);
+        }
+        queueMicrotask(() => this.focusActiveCell());
+    }
+    focusActiveCell() {
+        const el = this.host.nativeElement.querySelector('.wr-calendar__day--focused');
+        el?.focus();
+    }
+    /** Used by the template's `track` expression. */
+    trackByTime(_, date) {
+        return date.getTime();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", range: "rangeChange" }, host: { attributes: { "role": "grid" }, 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    \u2039\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    aria-live=\"polite\"\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    \u203A\n  </button>\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\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\" (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  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"grid\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"gridcell\"\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=\"grid\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"gridcell\"\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.0.1", ngImport: i0, type: WrCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-calendar', encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'classes()',
+                        role: 'grid',
+                        '(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    \u2039\n  </button>\n  <button\n    type=\"button\"\n    class=\"wr-calendar__label\"\n    aria-live=\"polite\"\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    \u203A\n  </button>\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\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\" (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  }\n\n  @case ('month') {\n    <div class=\"wr-calendar__months\" role=\"grid\">\n      @for (name of monthsView(); track name) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"gridcell\"\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=\"grid\">\n      @for (year of yearsView(); track year) {\n        <button\n          type=\"button\"\n          class=\"wr-calendar__chip\"\n          role=\"gridcell\"\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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCalendar };
+//# sourceMappingURL=ngwr-calendar.mjs.map