@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,1569 @@
+import { NgTemplateOutlet, DatePipe } 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';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
+import { CalendarService } from '@nanahoshi/mona-ui/date-input';
+import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
+import { DateTime } from 'luxon';
+import { skip, fromEvent } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class CalendarDecadeCellTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarDecadeCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CalendarDecadeCellTemplateDirective, isStandalone: true, selector: "ng-template[monaCalendarDecadeCellTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarDecadeCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaCalendarDecadeCellTemplate]"
+                }]
+        }] });
+
+class CalendarMonthCellTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarMonthCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CalendarMonthCellTemplateDirective, isStandalone: true, selector: "ng-template[monaCalendarMonthCellTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarMonthCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaCalendarMonthCellTemplate]"
+                }]
+        }] });
+
+class CalendarYearCellTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarYearCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: CalendarYearCellTemplateDirective, isStandalone: true, selector: "ng-template[monaCalendarYearCellTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarYearCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaCalendarYearCellTemplate]"
+                }]
+        }] });
+
+const calendarBaseVariants = cva(`
+        flex flex-col gap-2 p-2 min-w-64
+        bg-background text-foreground
+        border border-input-border
+        shadow-sm select-none
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        disabled: {
+            true: "opacity-50 cursor-not-allowed pointer-events-none"
+        },
+        readonly: {
+            true: "pointer-events-none"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+const calendarHeaderVariants = cva(`
+        flex items-center justify-center
+        [&>button+button]:not-focus:border-s-0
+        [&>button:nth-of-type(2)]:flex-1
+        [&>button:nth-of-type(3)]:rounded-se-none
+        [&>button:nth-of-type(3)]:rounded-ee-none
+        [&>button:nth-of-type(4)]:rounded-ss-none
+        [&>button:nth-of-type(4)]:rounded-es-none
+        [&>button]:outline-none
+    `);
+const calendarMonthViewDayVariants = cva(`
+        hover:bg-hover cursor-pointer
+    `, {
+    variants: {
+        disabled: {
+            true: "opacity-50 cursor-not-allowed pointer-events-none"
+        },
+        focused: {
+            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+        },
+        outside: {
+            true: "opacity-50"
+        },
+        rangePreview: {
+            true: "bg-primary/20 hover:bg-primary/30"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        },
+        selected: {
+            true: "bg-primary text-primary-foreground hover:bg-primary-hover"
+        },
+        today: {
+            true: "font-bold text-primary"
+        }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            today: true,
+            class: "text-primary-foreground"
+        }
+    ],
+    defaultVariants: {
+        rounded: "medium"
+    }
+});
+const calendarMonthViewGridVariants = cva(`
+        grid gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:aspect-square
+    `);
+const calendarMonthViewGridHeaderVariants = cva(`
+        grid justify-center
+        gap-0.5 font-semibold text-sm
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:aspect-square
+    `);
+const calendarYearViewGridVariants = cva(`
+        grid grid-cols-3 gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:h-12
+    `);
+const calendarYearViewCellVariants = cva(`
+        py-2 cursor-pointer
+        hover:bg-hover
+        active:bg-active
+    `, {
+    variants: {
+        focused: {
+            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+const calendarDecadeViewGridVariants = cva(`
+        grid grid-cols-4 gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:h-12
+    `);
+const calendarDecadeViewCellVariants = cva(`
+        py-2 cursor-pointer
+        hover:bg-hover
+        active:bg-active
+    `, {
+    variants: {
+        focused: {
+            true: "ring-1 ring-inset ring-primary/40 bg-accent outline-none"
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+
+const calendarBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarBaseVariants;
+        default:
+            return calendarBaseVariants;
+    }
+};
+const calendarHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarHeaderVariants;
+        default:
+            return calendarHeaderVariants;
+    }
+};
+const calendarDecadeViewGridThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarDecadeViewGridVariants;
+        default:
+            return calendarDecadeViewGridVariants;
+    }
+};
+const calendarDecadeViewCellThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarDecadeViewCellVariants;
+        default:
+            return calendarDecadeViewCellVariants;
+    }
+};
+const calendarMonthViewDayThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarMonthViewDayVariants;
+        default:
+            return calendarMonthViewDayVariants;
+    }
+};
+const calendarMonthViewGridThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarMonthViewGridVariants;
+        default:
+            return calendarMonthViewGridVariants;
+    }
+};
+const calendarMonthViewGridHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarMonthViewGridHeaderVariants;
+        default:
+            return calendarMonthViewGridHeaderVariants;
+    }
+};
+const calendarYearViewGridThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarYearViewGridVariants;
+        default:
+            return calendarYearViewGridVariants;
+    }
+};
+const calendarYearViewCellThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return calendarYearViewCellVariants;
+        default:
+            return calendarYearViewCellVariants;
+    }
+};
+
+class DecadeYearDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.ariaLabel = computed(() => `Year ${this.year()}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const focused = this.focused();
+            const rounded = this.rounded();
+            return calendarDecadeViewCellThemeVariants(theme)({ focused, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.focused = computed(() => {
+            const navigatedYear = DateTime.fromJSDate(this.navigatedDate()).year;
+            return this.year() === navigatedYear;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.isCurrent = computed(() => {
+            return this.year() === DateTime.now().year;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const selectedDate = this.selectedDate();
+            if (!selectedDate) {
+                return false;
+            }
+            return this.year() === DateTime.fromJSDate(selectedDate).year;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.selectedDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+        this.year = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "year" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DecadeYearDirective, isStandalone: true, selector: "[monaDecadeYear]", inputs: { navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, year: { classPropertyName: "year", publicName: "year", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'true' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DecadeYearDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaDecadeYear]",
+                    host: {
+                        "[attr.tabindex]": "focused() ? 0 : -1",
+                        "[attr.aria-current]": "isCurrent() ? 'true' : null",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[class]": "baseClass()",
+                        role: "gridcell"
+                    }
+                }]
+        }], propDecorators: { 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 }] }], year: [{ type: i0.Input, args: [{ isSignal: true, alias: "year", required: true }] }] } });
+
+const compareDates = (date1, date2, operator) => {
+    if (!date1 || !date2) {
+        return false;
+    }
+    const valueDateParts = [date1.getFullYear(), date1.getMonth(), date1.getDate()];
+    const otherDateParts = [date2.getFullYear(), date2.getMonth(), date2.getDate()];
+    for (let i = 0; i < 3; i++) {
+        switch (operator) {
+            case "==":
+                if (valueDateParts[i] !== otherDateParts[i])
+                    return false;
+                break;
+            case "!=":
+                if (valueDateParts[i] !== otherDateParts[i])
+                    return true;
+                break;
+            case "<":
+            case "<=":
+                if (valueDateParts[i] < otherDateParts[i])
+                    return true;
+                if (valueDateParts[i] > otherDateParts[i])
+                    return false;
+                if (operator === "<=" && i === 2 && valueDateParts[i] === otherDateParts[i])
+                    return true;
+                break;
+            case ">":
+            case ">=":
+                if (valueDateParts[i] > otherDateParts[i])
+                    return true;
+                if (valueDateParts[i] < otherDateParts[i])
+                    return false;
+                if (operator === ">=" && i === 2 && valueDateParts[i] === otherDateParts[i])
+                    return true;
+                break;
+            default:
+                return false;
+        }
+    }
+    return operator === "==";
+};
+
+class MonthDayDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.dayDisabled();
+            const focused = this.focused();
+            const outside = this.outside();
+            const rangePreview = this.rangePreviewed();
+            const rounded = this.rounded();
+            const selected = this.selected();
+            const today = this.isToday();
+            return calendarMonthViewDayThemeVariants(theme)({
+                disabled,
+                focused,
+                outside,
+                rangePreview,
+                rounded,
+                selected,
+                today
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.dayDisabled = computed(() => {
+            const disabled = this.disabled();
+            const entry = this.entry();
+            const disabledDates = this.disabledDates();
+            const max = this.max();
+            const min = this.min();
+            let isDisabledByInput = false;
+            if (typeof disabledDates === "function") {
+                isDisabledByInput = disabledDates(entry.key);
+            }
+            else if (disabledDates) {
+                isDisabledByInput = any(disabledDates, d => compareDates(entry.key, d, "=="));
+            }
+            return disabled || isDisabledByInput || compareDates(entry.key, max, ">") || compareDates(entry.key, min, "<");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dayDisabled" }] : /* istanbul ignore next */ []));
+        this.focused = computed(() => {
+            const entry = this.entry();
+            const navigatedDate = this.navigatedDate();
+            return compareDates(entry.key, navigatedDate, "==");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.isToday = computed(() => {
+            const entry = this.entry();
+            const today = new Date();
+            return compareDates(entry.key, today, "==");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isToday" }] : /* istanbul ignore next */ []));
+        this.outside = computed(() => {
+            const entry = this.entry();
+            const monthStart = this.monthBounds()[0];
+            const monthEnd = this.monthBounds()[1];
+            return compareDates(entry.key, monthStart, "<") || compareDates(entry.key, monthEnd, ">");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "outside" }] : /* istanbul ignore next */ []));
+        this.rangePreviewed = computed(() => {
+            const entry = this.entry();
+            return !this.selected() && exactly(this.rangePreview(), 1, d => compareDates(entry.key, d, "=="));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangePreviewed" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const entry = this.entry();
+            const value = this.value();
+            if (Array.isArray(value)) {
+                return exactly(value, 1, d => compareDates(entry.key, d, "=="));
+            }
+            return compareDates(entry.key, value, "==");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.dayPointerEnter = output();
+        this.daySelect = output();
+        this.disabled = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabledDates = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+        this.entry = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+        this.max = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.min = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.monthBounds = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthBounds" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.rangePreview = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangePreview" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    onClick(event) {
+        if (this.dayDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.daySelect.emit({ date: this.entry().key, event });
+    }
+    onPointerEnter() {
+        if (this.dayDisabled()) {
+            return;
+        }
+        this.dayPointerEnter.emit(this.entry().key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: MonthDayDirective, isStandalone: true, selector: "[monaMonthDay]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: true, transformFunction: null }, entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, monthBounds: { classPropertyName: "monthBounds", publicName: "monthBounds", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rangePreview: { classPropertyName: "rangePreview", publicName: "rangePreview", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dayPointerEnter: "dayPointerEnter", daySelect: "daySelect" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-current": "isToday() ? 'date' : null", "attr.aria-disabled": "dayDisabled() ? 'true' : null", "attr.data-range-preview": "rangePreviewed() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MonthDayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaMonthDay]",
+                    host: {
+                        "[attr.tabindex]": "focused() ? 0 : -1",
+                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[attr.aria-current]": "isToday() ? 'date' : null",
+                        "[attr.aria-disabled]": "dayDisabled() ? 'true' : null",
+                        "[attr.data-range-preview]": "rangePreviewed() ? 'true' : null",
+                        "[class]": "baseClass()",
+                        "(click)": "onClick($event)",
+                        "(pointerenter)": "onPointerEnter()"
+                    }
+                }]
+        }], propDecorators: { dayPointerEnter: [{ type: i0.Output, args: ["dayPointerEnter"] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: true }] }], entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], monthBounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthBounds", required: true }] }], navigatedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigatedDate", required: true }] }], rangePreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangePreview", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class YearMonthDirective {
+    constructor() {
+        this.#themeService = inject(ThemeService);
+        this.ariaLabel = computed(() => {
+            const monthName = this.monthName();
+            return `${monthName} ${this.navigatedDate().getFullYear()}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const focused = this.focused();
+            const rounded = this.rounded();
+            return calendarYearViewCellThemeVariants(theme)({ focused, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.focused = computed(() => {
+            const navigatedMonth = DateTime.fromJSDate(this.navigatedDate()).month;
+            return this.month() === navigatedMonth;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.isCurrent = computed(() => {
+            const now = DateTime.now();
+            const navDate = DateTime.fromJSDate(this.navigatedDate());
+            return this.month() === now.month && navDate.year === now.year;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCurrent" }] : /* istanbul ignore next */ []));
+        this.selected = computed(() => {
+            const selectedDate = this.selectedDate();
+            if (!selectedDate) {
+                return false;
+            }
+            const navDate = DateTime.fromJSDate(this.navigatedDate());
+            const selDate = DateTime.fromJSDate(selectedDate);
+            return this.month() === selDate.month && navDate.year === selDate.year;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.month = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
+        this.monthName = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.selectedDate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    }
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: YearMonthDirective, isStandalone: true, selector: "[monaYearMonth]", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: true, transformFunction: null }, monthName: { classPropertyName: "monthName", publicName: "monthName", isSignal: true, isRequired: true, transformFunction: null }, navigatedDate: { classPropertyName: "navigatedDate", publicName: "navigatedDate", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.tabindex": "focused() ? 0 : -1", "attr.aria-current": "isCurrent() ? 'date' : null", "attr.aria-label": "ariaLabel()", "attr.aria-selected": "selected() ? 'true' : null", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: YearMonthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaYearMonth]",
+                    host: {
+                        "[attr.tabindex]": "focused() ? 0 : -1",
+                        "[attr.aria-current]": "isCurrent() ? 'date' : null",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-selected]": "selected() ? 'true' : null",
+                        "[class]": "baseClass()",
+                        role: "gridcell"
+                    }
+                }]
+        }], 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 }] }] } });
+
+class CalendarComponent {
+    #calendarService;
+    #destroyRef;
+    #hostElementRef;
+    #monthDict;
+    #outputValue;
+    #themeService;
+    constructor() {
+        this.#calendarService = inject(CalendarService, { optional: true });
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#monthDict = computed(() => {
+            const day = this.navigatedDate();
+            const firstDayOfMonth = DateTime.fromJSDate(day).startOf("month");
+            const lastDayOfMonth = DateTime.fromJSDate(day).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 dictionary = new Dictionary();
+            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 */ []));
+        this.#outputValue = computed(() => {
+            const selection = this.selection();
+            const selectedDates = this.selectedDates();
+            if (selection === "single") {
+                return lastOrDefault(selectedDates);
+            }
+            else if (selection === "multiple") {
+                return selectedDates;
+            }
+            else if (selection === "range") {
+                if (selectedDates.length === 1) {
+                    return [selectedDates[0], selectedDates[0]];
+                }
+                if (selectedDates.length > 1) {
+                    return [selectedDates[0], selectedDates[selectedDates.length - 1]];
+                }
+                return [];
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#outputValue" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.ariaLabel = computed(() => {
+            const view = this.calendarView();
+            const navigatedDate = this.navigatedDate();
+            const date = DateTime.fromJSDate(navigatedDate);
+            switch (view) {
+                case "month":
+                    return `Calendar, ${date.toFormat("MMMM yyyy")}`;
+                case "year":
+                    return `Year view, ${date.toFormat("yyyy")}`;
+                case "decade":
+                    return `Decade view, ${this.decadeStart()} - ${this.decadeEnd()}`;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const readonly = this.readonly();
+            const rounded = this.rounded() === "full" ? "large" : this.rounded();
+            const variantClass = calendarBaseThemeVariants(theme)({ disabled, readonly, rounded });
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.calendarView = signal("month", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarView" }] : /* istanbul ignore next */ []));
+        this.decadeCellTemplate = contentChild(CalendarDecadeCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeCellTemplate" }] : /* istanbul ignore next */ []));
+        this.decadeEnd = computed(() => {
+            return this.decadeStart() + 9;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeEnd" }] : /* istanbul ignore next */ []));
+        this.decadeGridClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return calendarDecadeViewGridThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeGridClass" }] : /* istanbul ignore next */ []));
+        this.decadeStart = computed(() => {
+            const navigatedDate = this.navigatedDate();
+            const date = DateTime.fromJSDate(navigatedDate);
+            const year = date.year;
+            return year - (year % 10);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeStart" }] : /* istanbul ignore next */ []));
+        this.decadeYears = computed(() => {
+            const decadeStart = this.decadeStart();
+            return range(decadeStart, 10)
+                .chunk(4)
+                .select(e => e.toArray())
+                .toArray();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeYears" }] : /* istanbul ignore next */ []));
+        this.gridId = createElementControlId();
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return calendarHeaderThemeVariants(theme)({});
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && this.isEmptyValue()), /* @ts-ignore */
+        ...(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");
+            return { start: firstDayOfMonth.toJSDate(), end: lastDayOfMonth.toJSDate() };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthBounds" }] : /* istanbul ignore next */ []));
+        this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));
+        this.monthDictChunked = computed(() => {
+            const dict = this.#monthDict();
+            return dict
+                .chunk(7)
+                .select(e => e.toImmutableDictionary(e => e.key, e => e.value))
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthDictChunked" }] : /* istanbul ignore next */ []));
+        this.monthGridClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return calendarMonthViewGridThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthGridClass" }] : /* istanbul ignore next */ []));
+        this.monthGridHeaderClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return calendarMonthViewGridHeaderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthGridHeaderClass" }] : /* istanbul ignore next */ []));
+        this.months = computed(() => {
+            const names = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+            return index(names)
+                .chunk(3)
+                .select(e => e.select(m => [m[0] + 1, m[1]]).toImmutableSet())
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = signal(new Date(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.nextButtonLabel = computed(() => {
+            const view = this.calendarView();
+            switch (view) {
+                case "month":
+                    return "Next month";
+                case "year":
+                    return "Next year";
+                case "decade":
+                    return "Next decade";
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextButtonLabel" }] : /* istanbul ignore next */ []));
+        this.prevButtonLabel = computed(() => {
+            const view = this.calendarView();
+            switch (view) {
+                case "month":
+                    return "Previous month";
+                case "year":
+                    return "Previous year";
+                case "decade":
+                    return "Previous decade";
+            }
+        }, /* @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(() => {
+            if (this.selection() !== "range") {
+                return [];
+            }
+            const pendingRangeStart = this.pendingRangeStart();
+            if (!pendingRangeStart) {
+                return [];
+            }
+            return this.getInclusiveDateRange(pendingRangeStart, this.rangePreviewDate() ?? this.navigatedDate());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rangePreviewDates" }] : /* istanbul ignore next */ []));
+        this.selectedDates = linkedSignal(() => {
+            const v = this.value();
+            const selection = this.selection();
+            if (v == null) {
+                return [];
+            }
+            if (selection === "range" && Array.isArray(v) && v.length >= 2) {
+                const date1 = DateTime.fromJSDate(v[0]);
+                const date2 = DateTime.fromJSDate(v[v.length - 1]);
+                const startDate = date1 <= date2 ? date1 : date2;
+                const endDate = date1 <= date2 ? date2 : date1;
+                const totalDays = endDate.diff(startDate, "days").days + 1;
+                return range(0, totalDays)
+                    .select(i => startDate.plus({ days: i }).toJSDate())
+                    .toArray();
+            }
+            return Array.isArray(v) ? v : [v];
+        }, /* @ts-ignore */
+        ...(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")}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "todayButtonLabel" }] : /* istanbul ignore next */ []));
+        this.viewSwitchButtonLabel = computed(() => {
+            const view = this.calendarView();
+            const date = DateTime.fromJSDate(this.navigatedDate());
+            switch (view) {
+                case "month":
+                    return `Switch to year view, currently ${date.toFormat("MMMM yyyy")}`;
+                case "year":
+                    return `Switch to decade view, currently ${date.toFormat("yyyy")}`;
+                case "decade":
+                    return `${this.decadeStart()} to ${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" }
+            ];
+            return firstDayOfWeek === "monday" ? [...days.slice(1), days[0]] : days;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+        this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
+        this.yearGridClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return calendarYearViewGridThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearGridClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled state of the calendar.
+         */
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled dates of the calendar.
+         * Accepts either an iterable of Date objects or a predicate function.
+         */
+        this.disabledDates = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the first day of the week.
+         * @default "monday"
+         */
+        this.firstDay = input("monday", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the calendar as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum date that can be selected.
+         */
+        this.maxDate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the minimum date that can be selected.
+         */
+        this.minDate = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minDate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the readonly state of the calendar.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the calendar.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the selection mode of the calendar.
+         * @default "single"
+         */
+        this.selection = input("single", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the calendar value is changed by user interaction.
+         * 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.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Adds custom CSS classes to the calendar host element.
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description The current value of the calendar.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables the display of week numbers in the calendar.
+         * @default false
+         */
+        this.weekNumber = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekNumber" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.setupKeyboardNavigation();
+                this.focusActiveCell();
+            }
+        });
+        effect(() => {
+            const min = this.minDate();
+            const max = this.maxDate();
+            this.disabledDates();
+            untracked(() => {
+                const navigationDate = this.navigatedDate();
+                if (this.isDateDisabled(navigationDate)) {
+                    const newDate = min ?? max;
+                    if (newDate) {
+                        this.navigatedDate.set(newDate);
+                    }
+                }
+            });
+        });
+        effect(() => {
+            const v = this.value();
+            untracked(() => {
+                if (v != null) {
+                    const lastDate = Array.isArray(v) ? (lastOrDefault(v) ?? DateTime.now().toJSDate()) : v;
+                    this.navigatedDate.set(lastDate);
+                }
+            });
+        });
+        toObservable(this.calendarView)
+            .pipe(skip(1))
+            .subscribe(() => this.focusActiveCell());
+    }
+    onDayClick(date, event) {
+        event.preventDefault();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const selection = this.selection();
+        if (selection === "single") {
+            this.handleSingleSelection(date);
+        }
+        else if (selection === "multiple") {
+            if (event.ctrlKey || event.metaKey || event.shiftKey) {
+                this.handleMultipleSelection(date, event.shiftKey);
+            }
+            else {
+                this.handleSingleSelection(date);
+            }
+        }
+        else if (selection === "range") {
+            this.handleRangeSelection(date);
+            this.navigatedDate.set(date);
+        }
+        this.focusActiveCell();
+        this.commitUserSelection();
+    }
+    onDayPointerEnter(date) {
+        if (this.disabled() || this.readonly() || this.selection() !== "range" || this.pendingRangeStart() == null) {
+            return;
+        }
+        this.rangePreviewDate.set(date);
+    }
+    onMonthClick(month) {
+        this.navigatedDate.set(DateTime.fromJSDate(this.navigatedDate()).set({ month }).toJSDate());
+        this.calendarView.set("month");
+    }
+    onMonthGridPointerLeave() {
+        this.rangePreviewDate.set(null);
+    }
+    onNavigationClick(direction) {
+        this.rangePreviewDate.set(null);
+        const date = DateTime.fromJSDate(this.navigatedDate());
+        let unit;
+        switch (this.calendarView()) {
+            case "month":
+                unit = { months: 1 };
+                break;
+            case "year":
+                unit = { years: 1 };
+                break;
+            case "decade":
+                unit = { years: 10 };
+                break;
+        }
+        this.navigatedDate.set(direction === "prev" ? date.minus(unit).toJSDate() : date.plus(unit).toJSDate());
+    }
+    onTodayButtonClick() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const currentDate = DateTime.now();
+        const navigatedDate = DateTime.fromJSDate(this.navigatedDate()).set({
+            year: currentDate.year,
+            month: currentDate.month,
+            day: currentDate.day
+        });
+        this.clearPendingRange();
+        this.navigatedDate.set(navigatedDate.toJSDate());
+        this.setCurrentDate(navigatedDate.toJSDate());
+        this.calendarView.set("month");
+        this.commitUserSelection();
+    }
+    onViewChangeClick(view) {
+        this.calendarView.set(view);
+    }
+    onYearClick(year) {
+        this.navigatedDate.set(DateTime.fromJSDate(this.navigatedDate()).set({ year }).toJSDate());
+        this.calendarView.set("year");
+    }
+    extendSelection(offset) {
+        const currentDate = this.navigatedDate();
+        const newDate = DateTime.fromJSDate(currentDate).plus({ days: offset }).toJSDate();
+        if (this.isDateDisabled(newDate)) {
+            return;
+        }
+        const currentSelection = this.selectedDates();
+        const dateTime = DateTime.fromJSDate(newDate);
+        const isAlreadySelected = currentSelection.some(d => DateTime.fromJSDate(d).hasSame(dateTime, "day"));
+        if (!isAlreadySelected) {
+            this.setCurrentDate([...currentSelection, newDate]);
+        }
+        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();
+            const selector = calendarView === "year"
+                ? "[monaYearMonth]"
+                : calendarView === "decade"
+                    ? "[monaDecadeYear]"
+                    : "[monaMonthDay]";
+            const activeCell = this.#hostElementRef.nativeElement.querySelector(`${selector}[tabindex="0"]`);
+            activeCell?.focus();
+        });
+    }
+    getDateArray(date) {
+        if (date == null) {
+            return [];
+        }
+        return Array.isArray(date) ? date : [date];
+    }
+    getDatesForMultipleSelection(date) {
+        const lastSelectedDate = lastOrDefault(this.selectedDates()) ?? this.navigatedDate();
+        const startDate = lastSelectedDate < date ? lastSelectedDate : date;
+        const endDate = this.navigatedDate() > date ? this.navigatedDate() : date;
+        const totalDays = DateTime.fromJSDate(endDate).diff(DateTime.fromJSDate(startDate), "days").days + 1;
+        return range(0, totalDays)
+            .select(i => DateTime.fromJSDate(startDate).plus({ days: i }).toJSDate())
+            .toArray();
+    }
+    getInclusiveDateRange(date1, date2) {
+        const dateTime1 = DateTime.fromJSDate(date1);
+        const dateTime2 = DateTime.fromJSDate(date2);
+        const startDate = dateTime1 <= dateTime2 ? dateTime1 : dateTime2;
+        const endDate = dateTime1 <= dateTime2 ? dateTime2 : dateTime1;
+        const totalDays = endDate.diff(startDate, "days").days + 1;
+        return range(0, totalDays)
+            .select(i => startDate.plus({ days: i }).toJSDate())
+            .toArray();
+    }
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        const preventableEvent = new PreventableEvent("calendarKeydown", event);
+        this.#calendarService?.keydown$.next(preventableEvent);
+        if (preventableEvent.isDefaultPrevented()) {
+            return;
+        }
+        const view = this.calendarView();
+        const isCtrlOrCmd = event.ctrlKey || event.metaKey;
+        const isShift = event.shiftKey;
+        const selection = this.selection();
+        if (!this.readonly() && selection === "multiple" && (isCtrlOrCmd || isShift)) {
+            if (this.handleMultipleSelectionKeyboard(event, isCtrlOrCmd, isShift)) {
+                this.commitUserSelection();
+                this.focusActiveCell();
+                return;
+            }
+        }
+        let shouldFocusCell = false;
+        switch (event.key) {
+            case "ArrowUp":
+                event.preventDefault();
+                if (isCtrlOrCmd) {
+                    this.switchToUpperView();
+                }
+                else {
+                    this.navigateByWeeksOrRows(-1, view);
+                }
+                shouldFocusCell = true;
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                if (isCtrlOrCmd) {
+                    this.switchToLowerView();
+                }
+                else {
+                    this.navigateByWeeksOrRows(1, view);
+                }
+                shouldFocusCell = true;
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                if (isCtrlOrCmd) {
+                    this.navigatePeriodKeyboard("prev");
+                }
+                else {
+                    this.navigateByDaysOrCells(-1, view);
+                }
+                shouldFocusCell = true;
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                if (isCtrlOrCmd) {
+                    this.navigatePeriodKeyboard("next");
+                }
+                else {
+                    this.navigateByDaysOrCells(1, view);
+                }
+                shouldFocusCell = true;
+                break;
+            case "Enter":
+            case " ": {
+                const target = event.target;
+                if (target.tagName === "BUTTON" || target.closest("button")) {
+                    return;
+                }
+                event.preventDefault();
+                const previousView = this.calendarView();
+                if (this.readonly() && previousView === "month") {
+                    shouldFocusCell = true;
+                    break;
+                }
+                if (isCtrlOrCmd && selection === "multiple") {
+                    this.toggleFocusedDateInSelection();
+                }
+                else if (isShift && selection === "multiple") {
+                    this.selectRangeToFocused();
+                }
+                else {
+                    this.selectFocusedItem();
+                }
+                if (previousView === "month" && this.calendarView() === "month") {
+                    this.commitUserSelection();
+                }
+                shouldFocusCell = true;
+                break;
+            }
+            case "Home":
+                event.preventDefault();
+                this.navigateToStart(view);
+                shouldFocusCell = true;
+                break;
+            case "End":
+                event.preventDefault();
+                this.navigateToEnd(view);
+                shouldFocusCell = true;
+                break;
+            case "PageUp":
+                event.preventDefault();
+                this.navigateByPeriod(-1, view);
+                shouldFocusCell = true;
+                break;
+            case "PageDown":
+                event.preventDefault();
+                this.navigateByPeriod(1, view);
+                shouldFocusCell = true;
+                break;
+            case "t":
+            case "T":
+                if (!isCtrlOrCmd && !isShift) {
+                    event.preventDefault();
+                    this.navigateToToday();
+                    shouldFocusCell = true;
+                }
+                break;
+            case "Escape":
+                event.preventDefault();
+                return;
+        }
+        if (shouldFocusCell) {
+            this.focusActiveCell();
+        }
+    }
+    handleMultipleSelection(date, rangedSelection) {
+        this.clearPendingRange();
+        const value = this.selectedDates();
+        if (value.length === 0) {
+            this.setCurrentDate([date]);
+            this.navigatedDate.set(date);
+            return;
+        }
+        if (!rangedSelection) {
+            const date1 = DateTime.fromJSDate(date);
+            const valueList = this.getDateArray(value);
+            const selectedDates = select(valueList, e => DateTime.fromJSDate(e));
+            const alreadySelected = selectedDates.any(e => e.equals(date1));
+            if (alreadySelected) {
+                const newDates = selectedDates
+                    .where(e => !e.equals(date1))
+                    .select(e => e.toJSDate())
+                    .toArray();
+                this.setCurrentDate(newDates);
+            }
+            else {
+                this.setCurrentDate([...valueList, date]);
+            }
+            this.navigatedDate.set(date);
+        }
+        else {
+            const selectedDates = this.getDatesForMultipleSelection(date);
+            this.setCurrentDate(selectedDates);
+        }
+    }
+    handleMultipleSelectionKeyboard(event, isCtrlOrCmd, isShift) {
+        if (this.calendarView() !== "month") {
+            return false;
+        }
+        if (isShift && !isCtrlOrCmd) {
+            switch (event.key) {
+                case "ArrowLeft":
+                    event.preventDefault();
+                    this.extendSelection(-1);
+                    return true;
+                case "ArrowRight":
+                    event.preventDefault();
+                    this.extendSelection(1);
+                    return true;
+                case "ArrowUp":
+                    event.preventDefault();
+                    this.extendSelection(-7);
+                    return true;
+                case "ArrowDown":
+                    event.preventDefault();
+                    this.extendSelection(7);
+                    return true;
+            }
+        }
+        return false;
+    }
+    handleRangeSelection(date) {
+        const pendingRangeStart = this.pendingRangeStart();
+        if (pendingRangeStart == null) {
+            this.pendingRangeStart.set(date);
+            this.rangePreviewDate.set(null);
+            this.setCurrentDate([date]);
+            return;
+        }
+        this.setCurrentDate(this.getInclusiveDateRange(pendingRangeStart, date));
+        this.pendingRangeStart.set(null);
+        this.rangePreviewDate.set(null);
+    }
+    handleSingleSelection(date) {
+        this.clearPendingRange();
+        const value = this.selectedDates();
+        if (value.length > 0) {
+            const date1 = DateTime.fromJSDate(date);
+            const valueItem = lastOrDefault(value) ?? DateTime.now().toJSDate();
+            const newDate = DateTime.fromJSDate(valueItem)
+                .set({ day: date1.day, month: date1.month, year: date1.year })
+                .toJSDate();
+            this.navigatedDate.set(newDate);
+            this.setCurrentDate(newDate);
+        }
+        else {
+            this.navigatedDate.set(date);
+            this.setCurrentDate(date);
+        }
+    }
+    isDateDisabled(date) {
+        const disabledDates = this.disabledDates();
+        const max = this.maxDate();
+        const min = this.minDate();
+        let isDisabledByInput = false;
+        if (typeof disabledDates === "function") {
+            isDisabledByInput = disabledDates(date);
+        }
+        else if (disabledDates) {
+            isDisabledByInput = any(disabledDates, d => compareDates(date, d, "=="));
+        }
+        return isDisabledByInput || compareDates(date, max, ">") || compareDates(date, min, "<");
+    }
+    isEmptyValue() {
+        const value = this.value();
+        return value == null || (Array.isArray(value) && value.length === 0);
+    }
+    navigateByDaysOrCells(offset, view) {
+        const currentDate = this.navigatedDate();
+        const dateTime = DateTime.fromJSDate(currentDate);
+        let newDate;
+        switch (view) {
+            case "month":
+                newDate = dateTime.plus({ days: offset }).toJSDate();
+                break;
+            case "year":
+                newDate = dateTime.plus({ months: offset }).toJSDate();
+                break;
+            case "decade":
+                newDate = dateTime.plus({ years: offset }).toJSDate();
+                break;
+        }
+        if (view === "month" && this.isDateDisabled(newDate)) {
+            return;
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(newDate);
+    }
+    navigateByPeriod(offset, view) {
+        const currentDate = this.navigatedDate();
+        const dateTime = DateTime.fromJSDate(currentDate);
+        let newDate;
+        switch (view) {
+            case "month":
+                newDate = dateTime.plus({ months: offset }).toJSDate();
+                break;
+            case "year":
+                newDate = dateTime.plus({ years: offset }).toJSDate();
+                break;
+            case "decade":
+                newDate = dateTime.plus({ years: offset * 10 }).toJSDate();
+                break;
+        }
+        if (view === "month" && this.isDateDisabled(newDate)) {
+            const direction = offset > 0 ? 1 : -1;
+            const maxAttempts = 31;
+            for (let i = 1; i <= maxAttempts; i++) {
+                const adjustedDate = DateTime.fromJSDate(newDate)
+                    .plus({ days: direction * i })
+                    .toJSDate();
+                if (!this.isDateDisabled(adjustedDate)) {
+                    newDate = adjustedDate;
+                    break;
+                }
+            }
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(newDate);
+    }
+    navigateByWeeksOrRows(offset, view) {
+        const currentDate = this.navigatedDate();
+        const dateTime = DateTime.fromJSDate(currentDate);
+        let newDate;
+        switch (view) {
+            case "month":
+                newDate = dateTime.plus({ weeks: offset }).toJSDate();
+                break;
+            case "year":
+                newDate = dateTime.plus({ months: offset * 3 }).toJSDate();
+                break;
+            case "decade":
+                newDate = dateTime.plus({ years: offset * 4 }).toJSDate();
+                break;
+        }
+        if (view === "month" && this.isDateDisabled(newDate)) {
+            return;
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(newDate);
+    }
+    navigatePeriodKeyboard(direction) {
+        this.rangePreviewDate.set(null);
+        this.onNavigationClick(direction);
+    }
+    navigateToEnd(view) {
+        const currentDate = this.navigatedDate();
+        const dateTime = DateTime.fromJSDate(currentDate);
+        let newDate;
+        switch (view) {
+            case "month":
+                newDate = dateTime.endOf("month").toJSDate();
+                if (this.isDateDisabled(newDate)) {
+                    for (let i = newDate.getDate() - 1; i >= 1; i--) {
+                        const testDate = dateTime.set({ day: i }).toJSDate();
+                        if (!this.isDateDisabled(testDate)) {
+                            newDate = testDate;
+                            break;
+                        }
+                    }
+                }
+                break;
+            case "year":
+                newDate = dateTime.set({ month: 12 }).toJSDate();
+                break;
+            case "decade":
+                const yearEnd = this.decadeEnd();
+                newDate = dateTime.set({ year: yearEnd }).toJSDate();
+                break;
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(newDate);
+    }
+    navigateToStart(view) {
+        const currentDate = this.navigatedDate();
+        const dateTime = DateTime.fromJSDate(currentDate);
+        let newDate;
+        switch (view) {
+            case "month":
+                newDate = dateTime.startOf("month").toJSDate();
+                if (this.isDateDisabled(newDate)) {
+                    const daysInMonth = dateTime.daysInMonth ?? 31;
+                    for (let i = 2; i <= daysInMonth; i++) {
+                        const testDate = dateTime.set({ day: i }).toJSDate();
+                        if (!this.isDateDisabled(testDate)) {
+                            newDate = testDate;
+                            break;
+                        }
+                    }
+                }
+                break;
+            case "year":
+                newDate = dateTime.set({ month: 1 }).toJSDate();
+                break;
+            case "decade":
+                const yearStart = this.decadeStart();
+                newDate = dateTime.set({ year: yearStart }).toJSDate();
+                break;
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(newDate);
+    }
+    navigateToToday() {
+        const today = DateTime.now().toJSDate();
+        if (this.isDateDisabled(today)) {
+            return;
+        }
+        this.rangePreviewDate.set(null);
+        this.navigatedDate.set(today);
+        this.calendarView.set("month");
+    }
+    selectFocusedItem() {
+        const view = this.calendarView();
+        const currentDate = this.navigatedDate();
+        switch (view) {
+            case "month":
+                if (!this.isDateDisabled(currentDate)) {
+                    const selection = this.selection();
+                    if (selection === "single") {
+                        this.handleSingleSelection(currentDate);
+                    }
+                    else if (selection === "multiple") {
+                        this.handleSingleSelection(currentDate);
+                    }
+                    else if (selection === "range") {
+                        this.handleRangeSelection(currentDate);
+                    }
+                }
+                break;
+            case "year":
+                this.calendarView.set("month");
+                break;
+            case "decade":
+                this.calendarView.set("year");
+                break;
+        }
+    }
+    selectRangeToFocused() {
+        const focusedDate = this.navigatedDate();
+        if (this.isDateDisabled(focusedDate)) {
+            return;
+        }
+        const selectedDates = this.getDatesForMultipleSelection(focusedDate);
+        this.setCurrentDate(selectedDates);
+    }
+    setCurrentDate(date) {
+        this.selectedDates.set(this.getDateArray(date));
+    }
+    setupKeyboardNavigation() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => this.handleKeydown(event));
+    }
+    switchToLowerView() {
+        const view = this.calendarView();
+        switch (view) {
+            case "decade":
+                this.calendarView.set("year");
+                break;
+            case "year":
+                this.calendarView.set("month");
+                break;
+        }
+    }
+    switchToUpperView() {
+        const view = this.calendarView();
+        switch (view) {
+            case "month":
+                this.calendarView.set("year");
+                break;
+            case "year":
+                this.calendarView.set("decade");
+                break;
+        }
+    }
+    toggleFocusedDateInSelection() {
+        const focusedDate = this.navigatedDate();
+        if (this.isDateDisabled(focusedDate)) {
+            return;
+        }
+        const currentSelection = this.selectedDates();
+        const dateTime = DateTime.fromJSDate(focusedDate);
+        const isAlreadySelected = currentSelection.some(d => DateTime.fromJSDate(d).hasSame(dateTime, "day"));
+        if (isAlreadySelected) {
+            const newSelection = currentSelection.filter(d => !DateTime.fromJSDate(d).hasSame(dateTime, "day"));
+            this.setCurrentDate(newSelection);
+        }
+        else {
+            this.setCurrentDate([...currentSelection, focusedDate]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
+}
+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,
+                        NgTemplateOutlet,
+                        TakeFirstPipe,
+                        LucideChevronLeft,
+                        LucideChevronRight
+                    ], host: {
+                        role: "application",
+                        "[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()"
+                    }, template: "<div [class]=\"headerClass()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n" }]
+        }], 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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/calendar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarComponent, CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-calendar.mjs.map