@nanahoshi/mona-ui 0.19.0 → 0.20.1

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

@@ -11,7 +11,7 @@ import { themeRaisedBackdropClasses, createElementControlId, rxTimeout } from '@
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
-import { MonaI18nService, injectComponentDirection, gregorianDateTime, formatGregorianDateToLocaleString, gregorianDateTimeFromObject } from '@nanahoshi/mona-ui/i18n';
+import { MonaI18nService, injectComponentDirection, gregorianDateTime, formatGregorianDateToLocaleString, getLocaleFirstDayOfWeek, gregorianDateTimeFromObject, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 const CALENDAR_DEFAULT_MESSAGES = {
@@ -496,6 +496,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: true }] }], monthName: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthName", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }] } });
 
+const FIRST_DAY_OF_WEEK_TO_ISO = {
+    monday: 1,
+    tuesday: 2,
+    wednesday: 3,
+    thursday: 4,
+    friday: 5,
+    saturday: 6,
+    sunday: 7
+};
 class CalendarComponent {
     #calendarService;
     #destroyRef;
@@ -510,30 +519,16 @@ class CalendarComponent {
         this.#direction = injectComponentDirection();
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
-        this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
         this.#monthDict = computed(() => {
             const day = this.navigatedDate();
             const firstDayOfMonth = gregorianDateTime(day, this.#i18n.localeId()).startOf("month");
             const lastDayOfMonth = gregorianDateTime(day, this.#i18n.localeId()).endOf("month");
-            const firstDayOfWeek = this.firstDay() === "monday" ? 1 : 0;
-            let firstDayOfCalendar;
-            const monthStartWeekday = firstDayOfMonth.weekday;
-            if (firstDayOfWeek === 0) {
-                const daysToSubtract = monthStartWeekday === 7 ? 0 : monthStartWeekday;
-                firstDayOfCalendar = firstDayOfMonth.minus({ days: daysToSubtract });
-            }
-            else {
-                firstDayOfCalendar = firstDayOfMonth.startOf("week");
-            }
-            let lastDayOfCalendar;
-            const monthEndWeekday = lastDayOfMonth.weekday;
-            if (firstDayOfWeek === 0) {
-                const daysToAdd = monthEndWeekday === 7 ? 6 : 6 - monthEndWeekday;
-                lastDayOfCalendar = lastDayOfMonth.plus({ days: daysToAdd });
-            }
-            else {
-                lastDayOfCalendar = lastDayOfMonth.endOf("week");
-            }
+            const firstDayIso = FIRST_DAY_OF_WEEK_TO_ISO[this.effectiveFirstDay()];
+            const daysToSubtract = (firstDayOfMonth.weekday - firstDayIso + 7) % 7;
+            const firstDayOfCalendar = firstDayOfMonth.minus({ days: daysToSubtract });
+            const lastDayOfWeekIso = ((firstDayIso + 5) % 7) + 1;
+            const daysToAdd = (lastDayOfWeekIso - lastDayOfMonth.weekday + 7) % 7;
+            const lastDayOfCalendar = lastDayOfMonth.plus({ days: daysToAdd });
             const dictionary = new Dictionary();
             for (let i = firstDayOfCalendar; i <= lastDayOfCalendar; i = i.plus({ days: 1 })) {
                 dictionary.add(i.toJSDate(), i.day);
@@ -613,13 +608,33 @@ class CalendarComponent {
                 .toArray();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+        this.effectiveFirstDay = computed(() => {
+            return this.firstDay() ?? getLocaleFirstDayOfWeek(this.#i18n.localeId());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveFirstDay" }] : /* istanbul ignore next */ []));
         this.gridId = createElementControlId();
         this.headerClass = computed(() => {
             return calendarHeaderThemeVariants({});
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.headerMonthYear = computed(() => {
+            const locale = this.#i18n.localeId();
+            return formatGregorianDateToLocaleString(this.navigatedDate(), locale, {
+                year: "numeric",
+                month: "long"
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerMonthYear" }] : /* istanbul ignore next */ []));
+        this.headerYear = computed(() => {
+            const locale = this.#i18n.localeId();
+            return formatGregorianDateToLocaleString(this.navigatedDate(), locale, {
+                year: "numeric"
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerYear" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && this.isEmptyValue())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
         this.monthBounds = computed(() => {
             const navigatedDate = this.navigatedDate();
             const firstDayOfMonth = gregorianDateTime(navigatedDate, this.#i18n.localeId()).startOf("month");
@@ -645,21 +660,6 @@ class CalendarComponent {
             return calendarMonthViewGridHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthGridHeaderClass" }] : /* istanbul ignore next */ []));
-        this.headerMonthYear = computed(() => {
-            const locale = this.#i18n.localeId();
-            return formatGregorianDateToLocaleString(this.navigatedDate(), locale, {
-                year: "numeric",
-                month: "long"
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerMonthYear" }] : /* istanbul ignore next */ []));
-        this.headerYear = computed(() => {
-            const locale = this.#i18n.localeId();
-            return formatGregorianDateToLocaleString(this.navigatedDate(), locale, {
-                year: "numeric"
-            });
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerYear" }] : /* istanbul ignore next */ []));
         this.months = computed(() => {
             const locale = this.#i18n.localeId();
             const names = range(1, 12)
@@ -686,6 +686,8 @@ class CalendarComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
+        this.pendingRangeStart = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pendingRangeStart" }] : /* istanbul ignore next */ []));
         this.prevButtonLabel = computed(() => {
             const view = this.calendarView();
             const messages = this.messages();
@@ -699,8 +701,6 @@ class CalendarComponent {
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : /* istanbul ignore next */ []));
-        this.pendingRangeStart = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pendingRangeStart" }] : /* istanbul ignore next */ []));
         this.rangePreviewDate = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rangePreviewDate" }] : /* istanbul ignore next */ []));
         this.rangePreviewDates = computed(() => {
@@ -760,19 +760,26 @@ class CalendarComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewSwitchButtonLabel" }] : /* istanbul ignore next */ []));
         this.weekdays = computed(() => {
-            const firstDayOfWeek = this.firstDay();
+            const firstDayIso = FIRST_DAY_OF_WEEK_TO_ISO[this.effectiveFirstDay()];
             const locale = this.#i18n.localeId();
-            // 2024-01-07 was a Sunday
+            // 2024-01-01 was a Monday (ISO 1)
             const days = range(0, 7)
                 .select(i => {
-                const dt = gregorianDateTimeFromObject({ year: 2024, month: 1, day: 7 + i }, locale);
+                const dt = gregorianDateTimeFromObject({ year: 2024, month: 1, day: 1 + i }, locale);
+                const short = dt.toFormat("ccc");
+                const full = dt.toFormat("cccc");
+                const narrow = dt.toFormat("ccccc");
+                const display = short.length > 4 || (short === full && short.length > 3) ? narrow : short;
                 return {
-                    short: dt.toFormat("ccc"),
-                    full: dt.toFormat("cccc")
+                    display,
+                    short,
+                    narrow,
+                    full
                 };
             })
                 .toArray();
-            return firstDayOfWeek === "monday" ? [...days.slice(1), days[0]] : days;
+            const startIndex = firstDayIso - 1;
+            return [...days.slice(startIndex), ...days.slice(0, startIndex)];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
         this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
@@ -793,10 +800,10 @@ class CalendarComponent {
         this.disabledDates = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the first day of the week.
-         * @default "monday"
+         * @description Sets the first day of the week. If not specified, derives from the active locale.
+         * @default null
          */
-        this.firstDay = input("monday", /* @ts-ignore */
+        this.firstDay = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
         /**
          * @description Marks the calendar as invalid. When bound to a signal form field via `[formField]`,
@@ -821,6 +828,13 @@ class CalendarComponent {
          */
         this.readonly = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the calendar is required. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the border radius of the calendar.
          * @default "medium"
@@ -838,13 +852,6 @@ class CalendarComponent {
          * The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
-        /**
-         * @description Sets whether the calendar is required. When bound to a signal form field via `[formField]`,
-         * this is written by the `FormField` directive.
-         * @default false
-         */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the touched state of the calendar. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
@@ -901,6 +908,21 @@ class CalendarComponent {
             .pipe(skip(1))
             .subscribe(() => this.focusActiveCell());
     }
+    formatInteger(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 0,
+            useGrouping: false
+        });
+    }
+    getWeekNumber(date) {
+        const dt = gregorianDateTime(date, this.#i18n.localeId());
+        const firstDayIso = FIRST_DAY_OF_WEEK_TO_ISO[this.effectiveFirstDay()];
+        const daysToThursday = (4 - firstDayIso + 7) % 7;
+        return dt.plus({ days: daysToThursday }).weekNumber;
+    }
     onDayClick(date, event) {
         event.preventDefault();
         if (this.disabled() || this.readonly()) {
@@ -955,15 +977,6 @@ class CalendarComponent {
         }
         this.navigatedDate.set(direction === "prev" ? date.minus(unit).toJSDate() : date.plus(unit).toJSDate());
     }
-    getWeekNumber(date) {
-        let dt = gregorianDateTime(date, this.#i18n.localeId());
-        if (this.firstDay() === "sunday") {
-            // In Sunday-first calendar, date is Sunday (day 0 of [Sun..Sat] row).
-            // Thursday (day 4 of row) represents the majority of the row and defines its ISO 8601 week number.
-            dt = dt.plus({ days: 4 });
-        }
-        return dt.weekNumber;
-    }
     onTodayButtonClick() {
         if (this.disabled() || this.readonly()) {
             return;
@@ -987,6 +1000,14 @@ class CalendarComponent {
         this.navigatedDate.set(DateTime.fromJSDate(this.navigatedDate()).set({ year }).toJSDate());
         this.calendarView.set("year");
     }
+    clearPendingRange() {
+        this.pendingRangeStart.set(null);
+        this.rangePreviewDate.set(null);
+    }
+    commitUserSelection() {
+        this.value.set(this.#outputValue());
+        this.touch.emit();
+    }
     extendSelection(offset) {
         const currentDate = this.navigatedDate();
         const newDate = DateTime.fromJSDate(currentDate).plus({ days: offset }).toJSDate();
@@ -1001,14 +1022,6 @@ class CalendarComponent {
         }
         this.navigatedDate.set(newDate);
     }
-    clearPendingRange() {
-        this.pendingRangeStart.set(null);
-        this.rangePreviewDate.set(null);
-    }
-    commitUserSelection() {
-        this.value.set(this.#outputValue());
-        this.touch.emit();
-    }
     focusActiveCell() {
         rxTimeout(this.#destroyRef, () => {
             const calendarView = this.calendarView();
@@ -1256,6 +1269,20 @@ class CalendarComponent {
             this.setCurrentDate(date);
         }
     }
+    horizontalCellDelta(key) {
+        const isRtl = this.#direction() === "rtl";
+        if (key === "ArrowLeft") {
+            return isRtl ? 1 : -1;
+        }
+        return isRtl ? -1 : 1;
+    }
+    horizontalPeriodDirection(key) {
+        const isRtl = this.#direction() === "rtl";
+        if (key === "ArrowLeft") {
+            return isRtl ? "next" : "prev";
+        }
+        return isRtl ? "prev" : "next";
+    }
     isDateDisabled(date) {
         const disabledDates = this.disabledDates();
         const max = this.maxDate();
@@ -1273,20 +1300,6 @@ class CalendarComponent {
         const value = this.value();
         return value == null || (Array.isArray(value) && value.length === 0);
     }
-    horizontalCellDelta(key) {
-        const isRtl = this.#direction() === "rtl";
-        if (key === "ArrowLeft") {
-            return isRtl ? 1 : -1;
-        }
-        return isRtl ? -1 : 1;
-    }
-    horizontalPeriodDirection(key) {
-        const isRtl = this.#direction() === "rtl";
-        if (key === "ArrowLeft") {
-            return isRtl ? "next" : "prev";
-        }
-        return isRtl ? "prev" : "next";
-    }
     navigateByDaysOrCells(offset, view) {
         const currentDate = this.navigatedDate();
         const dateTime = DateTime.fromJSDate(currentDate);
@@ -1369,11 +1382,14 @@ class CalendarComponent {
         const dateTime = DateTime.fromJSDate(currentDate);
         let newDate;
         switch (view) {
-            case "month":
-                newDate = dateTime.endOf("month").toJSDate();
+            case "month": {
+                const firstDayIso = FIRST_DAY_OF_WEEK_TO_ISO[this.effectiveFirstDay()];
+                const lastDayOfWeekIso = ((firstDayIso + 5) % 7) + 1;
+                const daysToAdd = (lastDayOfWeekIso - dateTime.weekday + 7) % 7;
+                newDate = dateTime.plus({ days: daysToAdd }).toJSDate();
                 if (this.isDateDisabled(newDate)) {
-                    for (let i = newDate.getDate() - 1; i >= 1; i--) {
-                        const testDate = dateTime.set({ day: i }).toJSDate();
+                    for (let i = 1; i <= 6; i++) {
+                        const testDate = DateTime.fromJSDate(newDate).minus({ days: i }).toJSDate();
                         if (!this.isDateDisabled(testDate)) {
                             newDate = testDate;
                             break;
@@ -1381,13 +1397,15 @@ class CalendarComponent {
                     }
                 }
                 break;
+            }
             case "year":
                 newDate = dateTime.set({ month: 12 }).toJSDate();
                 break;
-            case "decade":
+            case "decade": {
                 const yearEnd = this.decadeEnd();
                 newDate = dateTime.set({ year: yearEnd }).toJSDate();
                 break;
+            }
         }
         this.rangePreviewDate.set(null);
         this.navigatedDate.set(newDate);
@@ -1397,12 +1415,13 @@ class CalendarComponent {
         const dateTime = DateTime.fromJSDate(currentDate);
         let newDate;
         switch (view) {
-            case "month":
-                newDate = dateTime.startOf("month").toJSDate();
+            case "month": {
+                const firstDayIso = FIRST_DAY_OF_WEEK_TO_ISO[this.effectiveFirstDay()];
+                const daysToSubtract = (dateTime.weekday - firstDayIso + 7) % 7;
+                newDate = dateTime.minus({ days: daysToSubtract }).toJSDate();
                 if (this.isDateDisabled(newDate)) {
-                    const daysInMonth = dateTime.daysInMonth ?? 31;
-                    for (let i = 2; i <= daysInMonth; i++) {
-                        const testDate = dateTime.set({ day: i }).toJSDate();
+                    for (let i = 1; i <= 6; i++) {
+                        const testDate = DateTime.fromJSDate(newDate).plus({ days: i }).toJSDate();
                         if (!this.isDateDisabled(testDate)) {
                             newDate = testDate;
                             break;
@@ -1410,13 +1429,15 @@ class CalendarComponent {
                     }
                 }
                 break;
+            }
             case "year":
                 newDate = dateTime.set({ month: 1 }).toJSDate();
                 break;
-            case "decade":
+            case "decade": {
                 const yearStart = this.decadeStart();
                 newDate = dateTime.set({ year: yearStart }).toJSDate();
                 break;
+            }
         }
         this.rangePreviewDate.set(null);
         this.navigatedDate.set(newDate);
@@ -1511,7 +1532,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()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().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                    headerMonthYear()\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                    headerYear()\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 class=\"rtl:rotate-180\"></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 class=\"rtl:rotate-180\"></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 = getWeekNumber(firstEntry.key);\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", "type", "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: 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 }, required: { classPropertyName: "required", publicName: "required", 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 }, 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>{{ messages().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                    headerMonthYear()\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                    headerYear()\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                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(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 class=\"rtl:rotate-180\"></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 class=\"rtl:rotate-180\"></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.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </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 = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(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>{{ formatInteger(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>{{ formatInteger(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", "type", "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: TakeFirstPipe, name: "monaTakeFirst" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -1532,8 +1553,8 @@ 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()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>{{ messages().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                    headerMonthYear()\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                    headerYear()\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 class=\"rtl:rotate-180\"></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 class=\"rtl:rotate-180\"></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 = getWeekNumber(firstEntry.key);\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 }] }] } });
+                    }, 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>{{ messages().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                    headerMonthYear()\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                    headerYear()\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                    >{{ formatInteger(decadeStart()) }} - {{ formatInteger(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 class=\"rtl:rotate-180\"></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 class=\"rtl:rotate-180\"></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.full) {\n            <div>\n                <span aria-hidden=\"true\">{{ day.display }}</span>\n                <span class=\"sr-only\">{{ day.full }}</span>\n            </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 = getWeekNumber(firstEntry.key);\n                    <div>{{ formatInteger(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>{{ formatInteger(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>{{ formatInteger(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 }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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"] }], 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 }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/calendar