@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-calendar.mjs

@@ -3,12 +3,11 @@ import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, input, output, DestroyRef, ElementRef, signal, contentChild, linkedSignal, model, afterNextRender, effect, untracked, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
 import { CalendarService } from '@nanahoshi/mona-ui/date-input';
-import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
+import { themeRaisedBackdropClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -56,17 +55,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const calendarBaseVariants = cva(`
-        flex flex-col gap-2 p-2 min-w-64
-        bg-background text-foreground
-        border border-input-border
-        shadow-sm select-none
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const calendarBaseThemeVariants = cva(`
+        flex min-w-64 flex-col gap-2 p-2
+        select-none
+        bg-(--mona-calendar-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border shadow-(--mona-calendar-shadow)
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed opacity-50"
         },
         readonly: {
             true: "pointer-events-none"
@@ -80,31 +79,32 @@ const calendarBaseVariants = cva(`
         }
     }
 });
-const calendarHeaderVariants = cva(`
-        flex items-center justify-center
-        [&>button+button]:not-focus:border-s-0
-        [&>button:nth-of-type(2)]:flex-1
-        [&>button:nth-of-type(3)]:rounded-se-none
-        [&>button:nth-of-type(3)]:rounded-ee-none
-        [&>button:nth-of-type(4)]:rounded-ss-none
-        [&>button:nth-of-type(4)]:rounded-es-none
-        [&>button]:outline-none
+const calendarHeaderThemeVariants = cva(`
+        flex items-center justify-center
+        [&>button+button]:not-focus:border-s-0
+        [&>button:nth-of-type(2)]:flex-1
+        [&>button:nth-of-type(3)]:rounded-se-none
+        [&>button:nth-of-type(3)]:rounded-ee-none
+        [&>button:nth-of-type(4)]:rounded-ss-none
+        [&>button:nth-of-type(4)]:rounded-es-none
+        [&>button]:outline-none
     `);
-const calendarMonthViewDayVariants = cva(`
-        hover:bg-hover cursor-pointer
+const calendarMonthViewDayThemeVariants = cva(`
+        cursor-pointer
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none"
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground"
         },
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         outside: {
-            true: "opacity-50"
+            true: "text-muted-foreground"
         },
         rangePreview: {
-            true: "bg-primary/20 hover:bg-primary/30"
+            true: "bg-active hover:bg-active"
         },
         rounded: {
             none: "rounded-none",
@@ -117,7 +117,7 @@ const calendarMonthViewDayVariants = cva(`
             true: "bg-primary text-primary-foreground hover:bg-primary-hover"
         },
         today: {
-            true: "font-bold text-primary"
+            true: "font-bold text-foreground"
         }
     },
     compoundVariants: [
@@ -131,35 +131,31 @@ const calendarMonthViewDayVariants = cva(`
         rounded: "medium"
     }
 });
-const calendarMonthViewGridVariants = cva(`
-        grid gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:aspect-square
+const calendarMonthViewGridThemeVariants = cva(`
+        grid justify-center gap-0.5
+        [&>div]:aspect-square
+        [&>div]:flex [&>div]:h-full
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarMonthViewGridHeaderVariants = cva(`
-        grid justify-center
-        gap-0.5 font-semibold text-sm
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:aspect-square
+const calendarMonthViewGridHeaderThemeVariants = cva(`
+        grid justify-center gap-0.5
+        text-sm font-semibold text-muted-foreground
+        [&>div]:aspect-square
+        [&>div]:flex [&>div]:h-full
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarYearViewGridVariants = cva(`
-        grid grid-cols-3 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
+const calendarYearViewGridThemeVariants = cva(`
+        grid grid-cols-3 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarYearViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarYearViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -170,21 +166,18 @@ const calendarYearViewCellVariants = cva(`
         }
     }
 });
-const calendarDecadeViewGridVariants = cva(`
-        grid grid-cols-4 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
+const calendarDecadeViewGridThemeVariants = cva(`
+        grid grid-cols-4 justify-center gap-0.5
+        [&>div]:flex [&>div]:h-12
+        [&>div]:items-center [&>div]:justify-center
     `);
-const calendarDecadeViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarDecadeViewCellThemeVariants = cva(`
+        cursor-pointer py-2
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         focused: {
-            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+            true: "bg-hover outline-none ring-2 ring-inset ring-focus-indicator/35"
         },
         rounded: {
             none: "rounded-none",
@@ -196,89 +189,14 @@ const calendarDecadeViewCellVariants = cva(`
     }
 });
 
-const calendarBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarBaseVariants;
-        default:
-            return calendarBaseVariants;
-    }
-};
-const calendarHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarHeaderVariants;
-        default:
-            return calendarHeaderVariants;
-    }
-};
-const calendarDecadeViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewGridVariants;
-        default:
-            return calendarDecadeViewGridVariants;
-    }
-};
-const calendarDecadeViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarDecadeViewCellVariants;
-        default:
-            return calendarDecadeViewCellVariants;
-    }
-};
-const calendarMonthViewDayThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewDayVariants;
-        default:
-            return calendarMonthViewDayVariants;
-    }
-};
-const calendarMonthViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridVariants;
-        default:
-            return calendarMonthViewGridVariants;
-    }
-};
-const calendarMonthViewGridHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarMonthViewGridHeaderVariants;
-        default:
-            return calendarMonthViewGridHeaderVariants;
-    }
-};
-const calendarYearViewGridThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewGridVariants;
-        default:
-            return calendarYearViewGridVariants;
-    }
-};
-const calendarYearViewCellThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return calendarYearViewCellVariants;
-        default:
-            return calendarYearViewCellVariants;
-    }
-};
-
 class DecadeYearDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => `Year ${this.year()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarDecadeViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarDecadeViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -307,7 +225,6 @@ class DecadeYearDirective {
         this.year = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -369,9 +286,7 @@ const compareDates = (date1, date2, operator) => {
 
 class MonthDayDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.dayDisabled();
             const focused = this.focused();
             const outside = this.outside();
@@ -379,7 +294,7 @@ class MonthDayDirective {
             const rounded = this.rounded();
             const selected = this.selected();
             const today = this.isToday();
-            return calendarMonthViewDayThemeVariants(theme)({
+            return calendarMonthViewDayThemeVariants({
                 disabled,
                 focused,
                 outside,
@@ -462,7 +377,6 @@ class MonthDayDirective {
         this.value = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     onClick(event) {
         if (this.dayDisabled()) {
             return;
@@ -477,7 +391,7 @@ class MonthDayDirective {
         this.dayPointerEnter.emit(this.entry().key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-pressed": "selected() ? 'true' : 'false'", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, decorators: [{
             type: Directive,
@@ -485,30 +399,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: "[monaMonthDay]",
                     host: {
                         "[attr.tabindex]": "focused() ? 0 : -1",
-                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[attr.aria-pressed]": "selected() ? 'true' : 'false'",
                         "[attr.aria-current]": "isToday() ? 'date' : null",
                         "[attr.aria-disabled]": "dayDisabled() ? 'true' : null",
                         "[attr.data-range-preview]": "rangePreviewed() ? 'true' : null",
                         "[class]": "baseClass()",
                         "(click)": "onClick($event)",
-                        "(pointerenter)": "onPointerEnter()"
+                        "(pointerenter)": "onPointerEnter()",
+                        role: "button"
                     }
                 }]
         }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreview", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class YearMonthDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const monthName = this.monthName();
             return `${monthName} ${this.navigatedDate().getFullYear()}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.focused();
             const rounded = this.rounded();
-            return calendarYearViewCellThemeVariants(theme)({ focused, rounded });
+            return calendarYearViewCellThemeVariants({ focused, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => {
@@ -543,7 +456,6 @@ class YearMonthDirective {
         this.selectedDate = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthName: { classPropertyName: "monthName", publicName: "monthName", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
 }
@@ -568,7 +480,6 @@ class CalendarComponent {
     #hostElementRef;
     #monthDict;
     #outputValue;
-    #themeService;
     constructor() {
         this.#calendarService = inject(CalendarService, { optional: true });
         this.#destroyRef = inject(DestroyRef);
@@ -629,7 +540,6 @@ class CalendarComponent {
             return [];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#outputValue" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.ariaLabel = computed(() => {
             const view = this.calendarView();
             const navigatedDate = this.navigatedDate();
@@ -645,11 +555,10 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
             const readonly = this.readonly();
             const rounded = this.rounded() === "full" ? "large" : this.rounded();
-            const variantClass = calendarBaseThemeVariants(theme)({ disabled, readonly, rounded });
+            const variantClass = calendarBaseThemeVariants({ disabled, readonly, rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -663,8 +572,7 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeEnd" }] : /* istanbul ignore next */ []));
         this.decadeGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarDecadeViewGridThemeVariants(theme)();
+            return calendarDecadeViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeGridClass" }] : /* istanbul ignore next */ []));
         this.decadeStart = computed(() => {
@@ -684,8 +592,7 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
         this.gridId = createElementControlId();
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarHeaderThemeVariants(theme)({});
+            return calendarHeaderThemeVariants({});
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.isEmptyValue()), /* @ts-ignore */
@@ -708,13 +615,11 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthDictChunked" }] : /* istanbul ignore next */ []));
         this.monthGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridThemeVariants(theme)();
+            return calendarMonthViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridClass" }] : /* istanbul ignore next */ []));
         this.monthGridHeaderClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarMonthViewGridHeaderThemeVariants(theme)();
+            return calendarMonthViewGridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridHeaderClass" }] : /* istanbul ignore next */ []));
         this.months = computed(() => {
@@ -821,8 +726,7 @@ class CalendarComponent {
         this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
         this.yearGridClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return calendarYearViewGridThemeVariants(theme)();
+            return calendarYearViewGridThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearGridClass" }] : /* istanbul ignore next */ []));
         /**
@@ -1532,7 +1436,7 @@ class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>Today</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.short) {\n            <div>{{ day.short }}</div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = firstEntry.key | date: \"w\";\n                    <div>{{ week }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ entry.value }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ year }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -1554,7 +1458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-required]": "required() || null",
                         "[attr.tabindex]": "disabled() ? -1 : 0",
                         "[class]": "baseClass()"
-                    }, template: "<div [class]=\"headerClass()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n" }]
+                    }, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>Today</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.short) {\n            <div>{{ day.short }}</div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = firstEntry.key | date: \"w\";\n                    <div>{{ week }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ entry.value }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ year }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*