@nanahoshi/mona-ui 0.18.5 → 0.19.0

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

@@ -1,4 +1,4 @@
-import { NgTemplateOutlet, DatePipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 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';
@@ -11,8 +11,27 @@ 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 { cva } from 'class-variance-authority';
 
+const CALENDAR_DEFAULT_MESSAGES = {
+    calendarLabel: (formattedMonthAndYear) => `Calendar, ${formattedMonthAndYear}`,
+    yearViewLabel: (year) => `Year view, ${year}`,
+    decadeViewLabel: (start, end) => `Decade view, ${start} - ${end}`,
+    nextMonth: "Next month",
+    nextYear: "Next year",
+    nextDecade: "Next decade",
+    previousMonth: "Previous month",
+    previousYear: "Previous year",
+    previousDecade: "Previous decade",
+    today: "Today",
+    goToToday: (formattedDate) => `Go to today, ${formattedDate}`,
+    switchToYearView: (currentMonthAndYear) => `Switch to year view, currently ${currentMonthAndYear}`,
+    switchToDecadeView: (currentYear) => `Switch to decade view, currently ${currentYear}`,
+    decadeRange: (start, end) => `${start} to ${end}`,
+    yearCellLabel: (year) => `Year ${year}`
+};
+
 class CalendarDecadeCellTemplateDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
@@ -191,7 +210,9 @@ const calendarDecadeViewCellThemeVariants = cva(`
 
 class DecadeYearDirective {
     constructor() {
-        this.ariaLabel = computed(() => `Year ${this.year()}`, /* @ts-ignore */
+        this.#i18n = inject(MonaI18nService);
+        this.messages = this.#i18n.componentMessages("calendar", CALENDAR_DEFAULT_MESSAGES);
+        this.ariaLabel = computed(() => this.messages().yearCellLabel(this.year()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
             const focused = this.focused();
@@ -225,6 +246,7 @@ class DecadeYearDirective {
         this.year = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
     }
+    #i18n;
     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 }); }
 }
@@ -477,17 +499,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 class CalendarComponent {
     #calendarService;
     #destroyRef;
+    #direction;
     #hostElementRef;
+    #i18n;
     #monthDict;
     #outputValue;
     constructor() {
         this.#calendarService = inject(CalendarService, { optional: true });
         this.#destroyRef = inject(DestroyRef);
+        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 = DateTime.fromJSDate(day).startOf("month");
-            const lastDayOfMonth = DateTime.fromJSDate(day).endOf("month");
+            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;
@@ -511,11 +538,6 @@ class CalendarComponent {
             for (let i = firstDayOfCalendar; i <= lastDayOfCalendar; i = i.plus({ days: 1 })) {
                 dictionary.add(i.toJSDate(), i.day);
             }
-            if (monthEndWeekday === 7) {
-                for (let i = 0; i < 7; i++) {
-                    dictionary.add(lastDayOfMonth.plus({ days: i + 1 }).toJSDate(), lastDayOfMonth.plus({ days: i + 1 }).day);
-                }
-            }
             return dictionary.toImmutableDictionary(e => e.key, e => e.value);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#monthDict" }] : /* istanbul ignore next */ []));
@@ -543,14 +565,15 @@ class CalendarComponent {
         this.ariaLabel = computed(() => {
             const view = this.calendarView();
             const navigatedDate = this.navigatedDate();
-            const date = DateTime.fromJSDate(navigatedDate);
+            const locale = this.#i18n.localeId();
+            const messages = this.messages();
             switch (view) {
                 case "month":
-                    return `Calendar, ${date.toFormat("MMMM yyyy")}`;
+                    return messages.calendarLabel(formatGregorianDateToLocaleString(navigatedDate, locale, { year: "numeric", month: "long" }));
                 case "year":
-                    return `Year view, ${date.toFormat("yyyy")}`;
+                    return messages.yearViewLabel(formatGregorianDateToLocaleString(navigatedDate, locale, { year: "numeric" }));
                 case "decade":
-                    return `Decade view, ${this.decadeStart()} - ${this.decadeEnd()}`;
+                    return messages.decadeViewLabel(this.decadeStart(), this.decadeEnd());
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -577,7 +600,7 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "decadeGridClass" }] : /* istanbul ignore next */ []));
         this.decadeStart = computed(() => {
             const navigatedDate = this.navigatedDate();
-            const date = DateTime.fromJSDate(navigatedDate);
+            const date = gregorianDateTime(navigatedDate, this.#i18n.localeId());
             const year = date.year;
             return year - (year % 10);
         }, /* @ts-ignore */
@@ -599,8 +622,8 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.monthBounds = computed(() => {
             const navigatedDate = this.navigatedDate();
-            const firstDayOfMonth = DateTime.fromJSDate(navigatedDate).startOf("month");
-            const lastDayOfMonth = DateTime.fromJSDate(navigatedDate).endOf("month");
+            const firstDayOfMonth = gregorianDateTime(navigatedDate, this.#i18n.localeId()).startOf("month");
+            const lastDayOfMonth = gregorianDateTime(navigatedDate, this.#i18n.localeId()).endOf("month");
             return { start: firstDayOfMonth.toJSDate(), end: lastDayOfMonth.toJSDate() };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthBounds" }] : /* istanbul ignore next */ []));
@@ -622,8 +645,26 @@ 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 names = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+            const locale = this.#i18n.localeId();
+            const names = range(1, 12)
+                .select(m => gregorianDateTimeFromObject({ year: 2024, month: m, day: 1 }, locale).toFormat("LLL"))
+                .toArray();
             return index(names)
                 .chunk(3)
                 .select(e => e.select(m => [m[0] + 1, m[1]]).toImmutableSet())
@@ -634,25 +675,27 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.nextButtonLabel = computed(() => {
             const view = this.calendarView();
+            const messages = this.messages();
             switch (view) {
                 case "month":
-                    return "Next month";
+                    return messages.nextMonth;
                 case "year":
-                    return "Next year";
+                    return messages.nextYear;
                 case "decade":
-                    return "Next decade";
+                    return messages.nextDecade;
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
         this.prevButtonLabel = computed(() => {
             const view = this.calendarView();
+            const messages = this.messages();
             switch (view) {
                 case "month":
-                    return "Previous month";
+                    return messages.previousMonth;
                 case "year":
-                    return "Previous year";
+                    return messages.previousYear;
                 case "decade":
-                    return "Previous decade";
+                    return messages.previousDecade;
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "prevButtonLabel" }] : /* istanbul ignore next */ []));
@@ -692,34 +735,43 @@ class CalendarComponent {
         ...(ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []));
         this.timezone = DateTime.local().zoneName ?? undefined;
         this.todayButtonLabel = computed(() => {
-            const today = DateTime.now();
-            return `Go to today, ${today.toFormat("MMMM d, yyyy")}`;
+            const locale = this.#i18n.localeId();
+            const todayStr = formatGregorianDateToLocaleString(new Date(), locale, {
+                year: "numeric",
+                month: "long",
+                day: "numeric"
+            });
+            return this.messages().goToToday(todayStr);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "todayButtonLabel" }] : /* istanbul ignore next */ []));
         this.viewSwitchButtonLabel = computed(() => {
             const view = this.calendarView();
-            const date = DateTime.fromJSDate(this.navigatedDate());
+            const locale = this.#i18n.localeId();
+            const navigatedDate = this.navigatedDate();
+            const messages = this.messages();
             switch (view) {
                 case "month":
-                    return `Switch to year view, currently ${date.toFormat("MMMM yyyy")}`;
+                    return messages.switchToYearView(formatGregorianDateToLocaleString(navigatedDate, locale, { year: "numeric", month: "long" }));
                 case "year":
-                    return `Switch to decade view, currently ${date.toFormat("yyyy")}`;
+                    return messages.switchToDecadeView(formatGregorianDateToLocaleString(navigatedDate, locale, { year: "numeric" }));
                 case "decade":
-                    return `${this.decadeStart()} to ${this.decadeEnd()}`;
+                    return messages.decadeRange(this.decadeStart(), this.decadeEnd());
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewSwitchButtonLabel" }] : /* istanbul ignore next */ []));
         this.weekdays = computed(() => {
             const firstDayOfWeek = this.firstDay();
-            const days = [
-                { short: "Sun", full: "Sunday" },
-                { short: "Mon", full: "Monday" },
-                { short: "Tue", full: "Tuesday" },
-                { short: "Wed", full: "Wednesday" },
-                { short: "Thu", full: "Thursday" },
-                { short: "Fri", full: "Friday" },
-                { short: "Sat", full: "Saturday" }
-            ];
+            const locale = this.#i18n.localeId();
+            // 2024-01-07 was a Sunday
+            const days = range(0, 7)
+                .select(i => {
+                const dt = gregorianDateTimeFromObject({ year: 2024, month: 1, day: 7 + i }, locale);
+                return {
+                    short: dt.toFormat("ccc"),
+                    full: dt.toFormat("cccc")
+                };
+            })
+                .toArray();
             return firstDayOfWeek === "monday" ? [...days.slice(1), days[0]] : days;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
@@ -903,6 +955,15 @@ 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;
@@ -1030,20 +1091,20 @@ class CalendarComponent {
             case "ArrowLeft":
                 event.preventDefault();
                 if (isCtrlOrCmd) {
-                    this.navigatePeriodKeyboard("prev");
+                    this.navigatePeriodKeyboard(this.horizontalPeriodDirection("ArrowLeft"));
                 }
                 else {
-                    this.navigateByDaysOrCells(-1, view);
+                    this.navigateByDaysOrCells(this.horizontalCellDelta("ArrowLeft"), view);
                 }
                 shouldFocusCell = true;
                 break;
             case "ArrowRight":
                 event.preventDefault();
                 if (isCtrlOrCmd) {
-                    this.navigatePeriodKeyboard("next");
+                    this.navigatePeriodKeyboard(this.horizontalPeriodDirection("ArrowRight"));
                 }
                 else {
-                    this.navigateByDaysOrCells(1, view);
+                    this.navigateByDaysOrCells(this.horizontalCellDelta("ArrowRight"), view);
                 }
                 shouldFocusCell = true;
                 break;
@@ -1148,11 +1209,11 @@ class CalendarComponent {
             switch (event.key) {
                 case "ArrowLeft":
                     event.preventDefault();
-                    this.extendSelection(-1);
+                    this.extendSelection(this.horizontalCellDelta("ArrowLeft"));
                     return true;
                 case "ArrowRight":
                     event.preventDefault();
-                    this.extendSelection(1);
+                    this.extendSelection(this.horizontalCellDelta("ArrowRight"));
                     return true;
                 case "ArrowUp":
                     event.preventDefault();
@@ -1212,6 +1273,20 @@ 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);
@@ -1436,13 +1511,12 @@ 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>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", "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: 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>{{ 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-calendar", imports: [
                         ButtonDirective,
-                        DatePipe,
                         MonthDayDirective,
                         DecadeYearDirective,
                         YearMonthDirective,
@@ -1458,7 +1532,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()\">\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" }]
+                    }, 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 }] }] } });
 
 /*
@@ -1469,5 +1543,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CalendarComponent, CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective };
+export { CALENDAR_DEFAULT_MESSAGES, CalendarComponent, CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-calendar.mjs.map

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

@@ -2,6 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, signal, Service, computed, contentChild, input, Component, viewChild, afterRenderEffect, DestroyRef, contentChildren } from '@angular/core';
 import { classInputToClass } from '@nanahoshi/mona-ui/common';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { twMerge } from 'tailwind-merge';
 import { themeRaisedBackdropClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { cva } from 'class-variance-authority';
@@ -20,6 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const CARD_DEFAULT_MESSAGES = {
+    actionsLabel: "Card actions"
+};
+
 class CardService {
     constructor() {
         this.actionTemplate = signal([], /* @ts-ignore */
@@ -50,19 +55,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 const roundedTopVariants = {
-    small: "rounded-tl-sm rounded-tr-sm",
-    medium: "rounded-tl-md rounded-tr-md",
-    large: "rounded-tl-lg rounded-tr-lg",
-    xlarge: "rounded-tl-xl rounded-tr-xl",
-    xxlarge: "rounded-tl-2xl rounded-tr-2xl",
+    small: "rounded-t-sm",
+    medium: "rounded-t-md",
+    large: "rounded-t-lg",
+    xlarge: "rounded-t-xl",
+    xxlarge: "rounded-t-2xl",
     none: "rounded-none"
 };
 const roundedBottomVariants = {
-    small: "rounded-bl-sm rounded-br-sm",
-    medium: "rounded-bl-md rounded-br-md",
-    large: "rounded-bl-lg rounded-br-lg",
-    xlarge: "rounded-bl-xl rounded-br-xl",
-    xxlarge: "rounded-bl-2xl rounded-br-2xl",
+    small: "rounded-b-sm",
+    medium: "rounded-b-md",
+    large: "rounded-b-lg",
+    xlarge: "rounded-b-xl",
+    xxlarge: "rounded-b-2xl",
     none: "rounded-none"
 };
 const roundedAllVariants = {
@@ -119,8 +124,9 @@ const cardHeaderActionsThemeVariants = cva(`col-start-2 row-start-1 row-span-2 s
 class CardComponent {
     constructor() {
         this.#cardService = inject(CardService);
-        this.actionsCellClass = cardHeaderActionsThemeVariants();
+        this.#i18n = inject(MonaI18nService);
         this.actionTemplate = this.#cardService.actionTemplate.asReadonly();
+        this.actionsCellClass = cardHeaderActionsThemeVariants();
         this.baseClass = computed(() => {
             const rounded = this.rounded();
             const hasHeader = !!this.headerTemplate();
@@ -151,6 +157,7 @@ class CardComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerTemplate = this.#cardService.headerTemplate.asReadonly();
+        this.messages = this.#i18n.componentMessages("card", CARD_DEFAULT_MESSAGES);
         this.titleCellClass = cardHeaderTitleThemeVariants();
         this.titleId = this.#cardService.titleId.asReadonly();
         this.titleTemplate = this.#cardService.titleTemplate.asReadonly();
@@ -167,8 +174,9 @@ class CardComponent {
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
     #cardService;
+    #i18n;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CardComponent, isStandalone: true, selector: "mona-card", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()", "attr.aria-labelledby": "titleId()", "attr.aria-describedby": "descriptionId()" } }, providers: [CardService], queries: [{ propertyName: "contentDirective", first: true, predicate: CardContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" [attr.aria-label]=\"messages().actionsLabel\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -176,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[class]": "baseClass()",
                         "[attr.aria-labelledby]": "titleId()",
                         "[attr.aria-describedby]": "descriptionId()"
-                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" aria-label=\"Card actions\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
+                    }, providers: [CardService], template: "@if (headerTemplate()) {\n    <div [class]=\"headerClass()\">\n        @if (titleTemplate()) {\n            <div [class]=\"titleCellClass\">\n                <ng-container [ngTemplateOutlet]=\"titleTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: titleId() }\" />\n            </div>\n        }\n        @if (descriptionTemplate()) {\n            <div [class]=\"descriptionCellClass\">\n                <ng-container\n                    [ngTemplateOutlet]=\"descriptionTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: descriptionId() }\"\n                />\n            </div>\n        }\n        @if (actionTemplate().length > 0) {\n            <div [class]=\"actionsCellClass\" role=\"group\" [attr.aria-label]=\"messages().actionsLabel\">\n                @for (template of actionTemplate(); track template) {\n                    <ng-container [ngTemplateOutlet]=\"template\" />\n                }\n            </div>\n        }\n    </div>\n}\n<ng-container [ngTemplateOutlet]=\"contentDirective()?.templateRef ?? null\" />\n@if (footerTemplate()) {\n    <div [class]=\"footerClass()\">\n        <ng-container [ngTemplateOutlet]=\"footerTemplate()\" />\n    </div>\n}\n" }]
         }], propDecorators: { contentDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CardContentDirective), { isSignal: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CardFooterComponent {
@@ -303,5 +311,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
+export { CARD_DEFAULT_MESSAGES, CardActionDirective, CardComponent, CardContentDirective, CardDescriptionDirective, CardFooterComponent, CardHeaderComponent, CardTitleDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-card.mjs.map