@nanahoshi/mona-ui 0.18.6 → 0.20.0

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

@@ -10,6 +10,7 @@ import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective
 import { CalendarService, TimeSelectorService, datePopupThemeVariants, DateInputPrefixTemplateDirective } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { injectComponentDirection, MonaI18nService, gregorianDateTime, getLocaleDateTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
@@ -18,6 +19,17 @@ import { fromEvent, mergeWith } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const DATETIME_PICKER_DEFAULT_MESSAGES = {
+    calendar: "Calendar",
+    cancel: "Cancel",
+    date: "Date",
+    dateTimePicker: "Date and time picker",
+    openDateTimePicker: "Open date and time picker",
+    set: "Set",
+    time: "Time",
+    timePicker: "Time picker"
+};
+
 const dateTimePickerBaseThemeVariants = cva(`
         flex items-center
         ${themeControlSurfaceClasses} text-foreground
@@ -88,15 +100,19 @@ const dateTimePickerFooterThemeVariants = cva(`
 class DateTimePickerComponent {
     #calendarService;
     #destroyRef;
+    #direction;
     #dropdownService;
     #hostElementRef;
+    #i18n;
     #id;
     #timeSelectorService;
     constructor() {
         this.#calendarService = inject(CalendarService);
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#id = createElementControlId();
         this.#timeSelectorService = inject(TimeSelectorService);
         this.activeView = signal("date", /* @ts-ignore */
@@ -112,15 +128,24 @@ class DateTimePickerComponent {
         ...(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).toFormat(format);
+            return gregorianDateTime(value, locale).toFormat(format);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
         this.decadeCellTemplate = contentChild(CalendarDecadeCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeCellTemplate" }] : /* istanbul ignore next */ []));
+        this.effectiveFormat = computed(() => {
+            return (this.format() ??
+                getLocaleDateTimeInputFormat(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.footerClass = computed(() => {
@@ -149,6 +174,9 @@ class DateTimePickerComponent {
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("dateTimePicker", DATETIME_PICKER_DEFAULT_MESSAGES);
         this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));
         this.navigatedDate = linkedSignal(() => this.value() ?? new Date(), /* @ts-ignore */
@@ -198,6 +226,7 @@ class DateTimePickerComponent {
         /**
          * @description Emits when the popup is about to close. This event is preventable.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = output();
         /**
          * @description Emits after the popup is closed.
@@ -215,14 +244,16 @@ class DateTimePickerComponent {
         this.disabledDates = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the first day of the week.
+         * @description Sets the first day of the week. If not specified, derives from the active locale.
+         * @default null
          */
-        this.firstDay = input("monday", /* @ts-ignore */
+        this.firstDay = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the date format of the date time picker.
+         * @description Sets the date format of the date time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @default null
          */
-        this.format = input("dd/MM/yyyy 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.
@@ -368,10 +399,12 @@ class DateTimePickerComponent {
             }
         });
     }
-    onCancelClick() {
-        this.navigatedDate.set(this.value() ?? new Date());
-        this.#dropdownService.popupRef()?.close();
-        this.touch.emit();
+    focus() {
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        if (input && !this.readonly()) {
+            input.focus();
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
     }
     onCalendarValueChange(date) {
         const singleDate = Array.isArray(date) ? null : date;
@@ -381,6 +414,11 @@ class DateTimePickerComponent {
         }
         this.activeView.set("time");
     }
+    onCancelClick() {
+        this.navigatedDate.set(this.value() ?? new Date());
+        this.#dropdownService.popupRef()?.close();
+        this.touch.emit();
+    }
     onDateInputBlur() {
         if (this.#dropdownService.popupRef()) {
             this.touch.emit();
@@ -391,14 +429,15 @@ class DateTimePickerComponent {
             this.touch.emit();
             return;
         }
-        const dateTime = DateTime.fromFormat(this.currentDateString(), this.format());
+        const locale = this.#i18n.localeId();
+        const dateTime = parseGregorianDate(this.currentDateString(), this.effectiveFormat(), locale);
         if (this.dateStringEquals(this.value(), dateTime.toJSDate())) {
             this.touch.emit();
             return;
         }
         if (dateTime.isValid) {
             const value = this.value();
-            if (value && DateTime.fromJSDate(value).equals(dateTime)) {
+            if (value && gregorianDateTime(value, locale).equals(dateTime)) {
                 this.touch.emit();
                 return;
             }
@@ -435,6 +474,9 @@ class DateTimePickerComponent {
             this.navigatedDate.set(inRangeDate);
         }
     }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
+    }
     compareDatesEqual(date1, date2) {
         return (date1.getFullYear() === date2.getFullYear() &&
             date1.getMonth() === date2.getMonth() &&
@@ -442,35 +484,12 @@ class DateTimePickerComponent {
     }
     dateStringEquals(date1, date2) {
         if (date1 && date2) {
-            return (DateTime.fromJSDate(date1).toFormat(this.format()) ===
-                DateTime.fromJSDate(date2).toFormat(this.format()));
+            const locale = this.#i18n.localeId();
+            return (gregorianDateTime(date1, locale).toFormat(this.effectiveFormat()) ===
+                gregorianDateTime(date2, locale).toFormat(this.effectiveFormat()));
         }
         return date1 === date2;
     }
-    focus() {
-        const input = this.#hostElementRef.nativeElement.querySelector("input");
-        if (input && !this.readonly()) {
-            input.focus();
-            input.setSelectionRange(input.value.length, input.value.length);
-        }
-    }
-    isDateDisabledByInput(date, disabledDates) {
-        if (typeof disabledDates === "function") {
-            return disabledDates(date);
-        }
-        else if (disabledDates) {
-            return any(disabledDates, d => this.compareDatesEqual(date, d));
-        }
-        return false;
-    }
-    setCurrentDate(date) {
-        this.value.set(date);
-        this.updateCurrentDateString(date, this.format());
-        this.touch.emit();
-    }
-    closePopup() {
-        this.#dropdownService.popupRef()?.close();
-    }
     handleKeydown(event) {
         if (this.disabled() || this.readonly()) {
             return;
@@ -494,12 +513,12 @@ class DateTimePickerComponent {
         }
         if (event.altKey && event.key === "ArrowRight" && popupOpen) {
             event.preventDefault();
-            this.activeView.set("time");
+            this.activeView.set(this.isRtl() ? "date" : "time");
             return;
         }
         if (event.altKey && event.key === "ArrowLeft" && popupOpen) {
             event.preventDefault();
-            this.activeView.set("date");
+            this.activeView.set(this.isRtl() ? "time" : "date");
             return;
         }
         if (event.key === "Enter" && popupOpen) {
@@ -517,6 +536,15 @@ class DateTimePickerComponent {
             return;
         }
     }
+    isDateDisabledByInput(date, disabledDates) {
+        if (typeof disabledDates === "function") {
+            return disabledDates(date);
+        }
+        else if (disabledDates) {
+            return any(disabledDates, d => this.compareDatesEqual(date, d));
+        }
+        return false;
+    }
     openPopup() {
         if (!this.#dropdownService.popupRef()) {
             this.#dropdownService.triggerPopupOpen$.next({
@@ -528,6 +556,11 @@ class DateTimePickerComponent {
             });
         }
     }
+    setCurrentDate(date) {
+        this.value.set(date);
+        this.updateCurrentDateString(date, this.effectiveFormat());
+        this.touch.emit();
+    }
     setKeyboardSubscriptions() {
         fromEvent(this.#hostElementRef.nativeElement, "keydown")
             .pipe(takeUntilDestroyed(this.#destroyRef))
@@ -547,13 +580,13 @@ class DateTimePickerComponent {
                 keyboardEvent.preventDefault();
                 this.closePopup();
             }
-            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowRight" && this.activeView() === "date") {
+            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowRight") {
                 keyboardEvent.preventDefault();
-                this.activeView.set("time");
+                this.activeView.set(this.isRtl() ? "date" : "time");
             }
-            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowLeft" && this.activeView() === "time") {
+            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowLeft") {
                 keyboardEvent.preventDefault();
-                this.activeView.set("date");
+                this.activeView.set(this.isRtl() ? "time" : "date");
             }
             else if (keyboardEvent.key === "Enter" && this.activeView() === "time") {
                 const target = keyboardEvent.target;
@@ -578,6 +611,14 @@ class DateTimePickerComponent {
             .subscribe(() => this.focus());
         this.setKeyboardSubscriptions();
     }
+    updateCurrentDateString(date, format) {
+        if (!date) {
+            this.currentDateString.set("");
+            return;
+        }
+        const dateString = gregorianDateTime(date, this.#i18n.localeId()).toFormat(format);
+        this.currentDateString.set(dateString);
+    }
     updateDateIfNotInRange(date) {
         const maxDate = this.max();
         const minDate = this.min();
@@ -589,14 +630,6 @@ class DateTimePickerComponent {
         }
         return date;
     }
-    updateCurrentDateString(date, format) {
-        if (!date) {
-            this.currentDateString.set("");
-            return;
-        }
-        const dateString = DateTime.fromJSDate(date).toFormat(format);
-        this.currentDateString.set(dateString);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DateTimePickerComponent, isStandalone: true, selector: "mona-datetime-picker", 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 }, 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 }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onDateInputBlur()" }, 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: [
             CalendarService,
@@ -607,7 +640,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -642,7 +675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onDateInputBlur()"
-                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
+                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openDateTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().dateTimePicker\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    {{ messages().date }}\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    {{ messages().time }}\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" [attr.aria-label]=\"messages().calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" [attr.aria-label]=\"messages().timePicker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                {{ messages().set }}\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                {{ messages().cancel }}\n            </button>\n        </div>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["datePopupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateInputPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*
@@ -653,5 +686,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimePickerComponent };
+export { DATETIME_PICKER_DEFAULT_MESSAGES, DateTimePickerComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-datetime-picker.mjs.map