@nanahoshi/mona-ui 0.19.0 → 0.20.1

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

@@ -4,7 +4,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { select } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 /**
@@ -210,8 +210,6 @@ class StepperComponent {
         this.#direction = injectComponentDirection();
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
-        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.#trackItemSize = computed(() => {
             const stepCount = this.viewSteps().length;
             return stepCount !== 0 ? 100 / stepCount : 0;
@@ -252,6 +250,8 @@ class StepperComponent {
         this.indicatorTemplate = contentChild(StepperIndicatorTemplateDirective, {
             read: TemplateRef
         });
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.labelTemplate = contentChild(StepperLabelTemplateDirective, { read: TemplateRef });
         this.listClass = computed(() => {
             const orientation = this.orientation();
@@ -363,6 +363,15 @@ class StepperComponent {
             read: () => this.setKeyboardEvents()
         });
     }
+    formatStepNumber(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 0,
+            useGrouping: false
+        });
+    }
     isStepActive(step) {
         const active = this.activeStep();
         return active != null && step.index <= active.index;
@@ -464,7 +473,7 @@ class StepperComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || messages().stepper", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || messages().stepper", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ formatStepNumber(step.index + 1) }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -473,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-label]": "ariaLabel() || messages().stepper",
                         "[class]": "baseClass()",
                         "[style]": "hostStyles()"
-                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
+                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ formatStepNumber(step.index + 1) }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { indicatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperIndicatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperStepTemplateDirective), { ...{

package/fesm2022/nanahoshi-mona-ui-time-picker.mjs

@@ -4,8 +4,8 @@ import { inject, DestroyRef, ElementRef, computed, linkedSignal, signal, viewChi
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
-import { DropdownService, dropdownPopupThemeVariants, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { DropdownService, dropdownPopupThemeVariants, DROPDOWN_POPUP_INPUT_TOKEN, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { MonaI18nService, gregorianDateTime, getLocaleTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
@@ -96,14 +96,22 @@ class TimePickerComponent {
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.currentDateString = linkedSignal(() => {
             const value = this.value();
-            const format = this.format();
+            const format = this.effectiveFormat();
             const locale = this.#i18n.localeId();
             if (!value) {
                 return "";
             }
-            return DateTime.fromJSDate(value).setLocale(locale).toFormat(format);
+            return gregorianDateTime(value, locale).toFormat(format);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
+        this.effectiveFormat = computed(() => {
+            return (this.format() ??
+                getLocaleTimeInputFormat(this.#i18n.localeId(), {
+                    hourFormat: this.hourFormat(),
+                    showSeconds: this.showSeconds()
+                }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#dropdownService.popupRef() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.inputAttributes = computed(() => {
@@ -153,9 +161,10 @@ class TimePickerComponent {
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the format of the time picker.
+         * @description Sets the format of the time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @default null
          */
-        this.format = input("HH:mm", /* @ts-ignore */
+        this.format = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the hour format of the time picker.
@@ -329,16 +338,16 @@ class TimePickerComponent {
     dateStringEquals(date1, date2) {
         if (date1 && date2) {
             const locale = this.#i18n.localeId();
-            return (DateTime.fromJSDate(date1).setLocale(locale).toFormat(this.format()) ===
-                DateTime.fromJSDate(date2).setLocale(locale).toFormat(this.format()));
+            return (gregorianDateTime(date1, locale).toFormat(this.effectiveFormat()) ===
+                gregorianDateTime(date2, locale).toFormat(this.effectiveFormat()));
         }
         return date1 === date2;
     }
     generateValidDateTime(dateString) {
         const value = this.value();
         const locale = this.#i18n.localeId();
-        const valueDate = value ? DateTime.fromJSDate(value).setLocale(locale) : DateTime.now().setLocale(locale);
-        let dateTime = DateTime.fromFormat(dateString, this.format(), { locale });
+        const valueDate = value ? gregorianDateTime(value, locale) : gregorianDateTime(new Date(), locale);
+        let dateTime = parseGregorianDate(dateString, this.effectiveFormat(), locale);
         if (dateTime.isValid) {
             return dateTime.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
         }
@@ -346,7 +355,7 @@ class TimePickerComponent {
         const minDate = this.min();
         const date = minDate ?? maxDate;
         if (date) {
-            const newDate = DateTime.fromJSDate(date).setLocale(locale);
+            const newDate = gregorianDateTime(date, locale);
             dateTime = newDate.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
             return dateTime;
         }
@@ -395,14 +404,14 @@ class TimePickerComponent {
         this.touch.emit();
     }
     setCurrentDateString(date) {
-        this.updateCurrentDateString(date, this.format());
+        this.updateCurrentDateString(date, this.effectiveFormat());
     }
     setDateValues() {
         const value = this.value();
         const locale = this.#i18n.localeId();
         this.navigatedDate.set(value ?? DateTime.now().setLocale(locale).toJSDate());
         if (value) {
-            this.updateCurrentDateString(value, this.format());
+            this.updateCurrentDateString(value, this.effectiveFormat());
         }
     }
     setKeyboardNavigation() {
@@ -424,14 +433,14 @@ class TimePickerComponent {
             this.currentDateString.set("");
             return;
         }
-        const dateString = DateTime.fromJSDate(date).setLocale(this.#i18n.localeId()).toFormat(format);
+        const dateString = gregorianDateTime(date, this.#i18n.localeId()).toFormat(format);
         this.currentDateString.set(dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-disabled": "disabled() || null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "class": "baseClass()" } }, providers: [
             DropdownService,
             {
-                provide: DropdownPopupInputToken,
+                provide: DROPDOWN_POPUP_INPUT_TOKEN,
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
@@ -442,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             args: [{ selector: "mona-time-picker", providers: [
                         DropdownService,
                         {
-                            provide: DropdownPopupInputToken,
+                            provide: DROPDOWN_POPUP_INPUT_TOKEN,
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: false
                         }

package/locales/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-locales.mjs",
+  "typings": "../types/nanahoshi-mona-ui-locales.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -227,6 +227,10 @@
       "types": "./types/nanahoshi-mona-ui-list-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-list-view.mjs"
     },
+    "./locales": {
+      "types": "./types/nanahoshi-mona-ui-locales.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-locales.mjs"
+    },
     "./menubar": {
       "types": "./types/nanahoshi-mona-ui-menubar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-menubar.mjs"

package/types/nanahoshi-mona-ui-auto-complete.d.ts

@@ -47,14 +47,14 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
     protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly id: string;
     protected readonly inputClass: _angular_core.Signal<string>;
-    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly isEmpty: _angular_core.Signal<boolean>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly listId: string;
     protected readonly listPopupClass: _angular_core.Signal<string>;
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaAutoCompleteMessages>;
     protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
-    protected readonly popupTemplate: _angular_core.Signal<TemplateRef<any>>;
+    protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly selectableOptions: SelectableOptions;
     protected readonly suffixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -94,10 +94,10 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly disabled: _angular_core.ModelSignal<boolean>;
     /**
-     * @description Predicate or field name used to determine whether an individual item is disabled.
-     * @default undefined
+     * @description Defines whether the first matching item should be highlighted while typing.
+     * @default true
      */
-    readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
+    readonly highlightFirst: _angular_core.InputSignal<boolean>;
     /**
      * @description Marks the autocomplete as invalid. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
@@ -105,10 +105,10 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      */
     readonly invalid: _angular_core.InputSignal<boolean>;
     /**
-     * @description Defines whether the first matching item should be highlighted while typing.
-     * @default true
+     * @description Predicate or field name used to determine whether an individual item is disabled.
+     * @default undefined
      */
-    readonly highlightFirst: _angular_core.InputSignal<boolean>;
+    readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
     /**
      * @description Displays a loading indicator and prevents interaction while an operation is in progress.
      * @default false
@@ -189,37 +189,38 @@ declare class AutoCompleteComponent<TData = unknown> implements FormValueControl
      * @default ""
      */
     readonly userClass: _angular_core.InputSignal<string>;
-    /**
-     * @description Property name or accessor used to derive the value from a data item.
-     * If null, the item itself is used as the value.
-     * @default null
-     */
-    readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, unknown>>;
     /**
      * @description Two-way bindable current autocomplete value. Implements `FormValueControl<string | null>`,
      * enabling signal forms `[formField]` binding.
      * @default null
      */
     readonly value: _angular_core.ModelSignal<string | null>;
+    /**
+     * @description Property name or accessor used to derive the value from a data item.
+     * If null, the item itself is used as the value.
+     * @default null
+     */
+    readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, unknown>>;
     constructor();
-    protected onInputBlur(): void;
+    focus(): void;
+    protected onInputBlur(event: FocusEvent): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
+    protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: MouseEvent | KeyboardEvent): void;
     private clear;
     private closePopup;
-    focus(): void;
     private initialize;
     private notifyFilterChange;
     private setArrowKeyNavigationSubscription;
     private setAutoCompleteValueChangeSubscription;
     private setEnterKeySubscription;
     private setEscapeKeySubscription;
-    private setSpaceKeySubscription;
     private setPopupCloseSubscriptions;
+    private setSpaceKeySubscription;
     private setSubscriptions;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutoCompleteComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AutoCompleteComponent<any>, "mona-auto-complete", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "highlightFirst": { "alias": "highlightFirst"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "suffixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const AUTO_COMPLETE_DEFAULT_MESSAGES: MonaAutoCompleteMessages;

package/types/nanahoshi-mona-ui-calendar.d.ts

@@ -1,8 +1,8 @@
 import * as _mirei_ts_collections from '@mirei/ts-collections';
-import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
 import * as _nanahoshi_mona_ui_i18n from '@nanahoshi/mona-ui/i18n';
 import { MonaCalendarMessages } from '@nanahoshi/mona-ui/i18n';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import { CalendarView, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -56,7 +56,7 @@ declare class CalendarYearCellTemplateDirective {
 
 type CalendarSelection = "multiple" | "range" | "single";
 
-type FirstDayOfWeek = "monday" | "sunday";
+type FirstDayOfWeek = "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 
 declare const calendarBaseThemeVariants: (props?: ({
     disabled?: boolean | null | undefined;
@@ -108,7 +108,6 @@ type CalendarVariantInput = CalendarBaseVariantInput & CalendarHeaderVariantInpu
 
 declare class CalendarComponent implements CalendarVariantInput, FormValueControl<Date | Date[] | null> {
     #private;
-    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaCalendarMessages>;
     protected readonly ariaLabel: _angular_core.Signal<string>;
     protected readonly baseClass: _angular_core.Signal<string>;
     protected readonly calendarView: _angular_core.WritableSignal<CalendarView>;
@@ -117,9 +116,13 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly decadeGridClass: _angular_core.Signal<string>;
     protected readonly decadeStart: _angular_core.Signal<number>;
     protected readonly decadeYears: _angular_core.Signal<number[][]>;
+    protected readonly effectiveFirstDay: _angular_core.Signal<FirstDayOfWeek>;
     protected readonly gridId: string;
     protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly headerMonthYear: _angular_core.Signal<string>;
+    protected readonly headerYear: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaCalendarMessages>;
     protected readonly monthBounds: _angular_core.Signal<{
         start: Date;
         end: Date;
@@ -128,13 +131,11 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly monthDictChunked: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_mirei_ts_collections.ImmutableDictionary<Date, number>>>;
     protected readonly monthGridClass: _angular_core.Signal<string>;
     protected readonly monthGridHeaderClass: _angular_core.Signal<string>;
-    protected readonly headerMonthYear: _angular_core.Signal<string>;
-    protected readonly headerYear: _angular_core.Signal<string>;
     protected readonly months: _angular_core.Signal<_mirei_ts_collections.ImmutableSet<_mirei_ts_collections.ImmutableSet<readonly [number, string]>>>;
     protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
     protected readonly nextButtonLabel: _angular_core.Signal<string>;
-    protected readonly prevButtonLabel: _angular_core.Signal<string>;
     protected readonly pendingRangeStart: _angular_core.WritableSignal<Date | null>;
+    protected readonly prevButtonLabel: _angular_core.Signal<string>;
     protected readonly rangePreviewDate: _angular_core.WritableSignal<Date | null>;
     protected readonly rangePreviewDates: _angular_core.Signal<Date[]>;
     protected readonly selectedDates: _angular_core.WritableSignal<Date[]>;
@@ -142,7 +143,9 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly todayButtonLabel: _angular_core.Signal<string>;
     protected readonly viewSwitchButtonLabel: _angular_core.Signal<string>;
     protected readonly weekdays: _angular_core.Signal<{
+        display: string;
         short: string;
+        narrow: string;
         full: string;
     }[]>;
     protected readonly yearCellTemplate: _angular_core.Signal<CalendarYearCellTemplateDirective | undefined>;
@@ -157,10 +160,10 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      */
     readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
     /**
-     * @description Sets the first day of the week.
-     * @default "monday"
+     * @description Sets the first day of the week. If not specified, derives from the active locale.
+     * @default null
      */
-    readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek>;
+    readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek | null>;
     /**
      * @description Marks the calendar as invalid. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
@@ -180,6 +183,12 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * @default false
      */
     readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @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
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
     /**
      * @description Sets the border radius of the calendar.
      * @default "medium"
@@ -195,12 +204,6 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
-    /**
-     * @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
-     */
-    readonly required: _angular_core.InputSignal<boolean>;
     /**
      * @description Sets the touched state of the calendar. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
@@ -222,18 +225,19 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      */
     readonly weekNumber: _angular_core.InputSignal<boolean>;
     constructor();
+    protected formatInteger(value: number): string;
+    protected getWeekNumber(date: Date): number;
     protected onDayClick(date: Date, event: MouseEvent): void;
     protected onDayPointerEnter(date: Date): void;
     protected onMonthClick(month: number): void;
     protected onMonthGridPointerLeave(): void;
     protected onNavigationClick(direction: "prev" | "next"): void;
-    protected getWeekNumber(date: Date): number;
     protected onTodayButtonClick(): void;
     protected onViewChangeClick(view: CalendarView): void;
     protected onYearClick(year: number): void;
-    private extendSelection;
     private clearPendingRange;
     private commitUserSelection;
+    private extendSelection;
     private focusActiveCell;
     private getDateArray;
     private getDatesForMultipleSelection;
@@ -243,10 +247,10 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     private handleMultipleSelectionKeyboard;
     private handleRangeSelection;
     private handleSingleSelection;
-    private isDateDisabled;
-    private isEmptyValue;
     private horizontalCellDelta;
     private horizontalPeriodDirection;
+    private isDateDisabled;
+    private isEmptyValue;
     private navigateByDaysOrCells;
     private navigateByPeriod;
     private navigateByWeeksOrRows;
@@ -262,7 +266,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     private switchToUpperView;
     private toggleFocusedDateInSelection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "mona-calendar", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "yearCellTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "mona-calendar", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "yearCellTemplate"], never, true, never>;
 }
 
 declare const CALENDAR_DEFAULT_MESSAGES: MonaCalendarMessages;