@nanahoshi/mona-ui 0.24.4 → 0.24.6

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

@@ -1,22 +1,20 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, signal, computed, linkedSignal, contentChild, viewChild, TemplateRef, output, input, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, computed, contentChild, linkedSignal, viewChild, TemplateRef, input, output, booleanAttribute, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { any } from '@mirei/ts-collections';
 import { LucideCalendar } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
-import { ButtonGroupComponent } from '@nanahoshi/mona-ui/button-group';
 import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, CalendarComponent } from '@nanahoshi/mona-ui/calendar';
-import { CalendarService, TimeSelectorService, datePopupThemeVariants, DateInputPrefixTemplateDirective } from '@nanahoshi/mona-ui/date-input';
+import { CalendarService, TimeSelectorService, getLocaleHourFormat, datePopupThemeVariants, DateInputPrefixTemplateDirective, createTypedDateInput } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, DROPDOWN_POPUP_INPUT_TOKEN, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { injectComponentDirection, MonaI18nService, gregorianDateTime, getLocaleDateTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
+import { injectComponentDirection, MonaI18nService, getLocaleDateTimeInputFormat } 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';
 import { DateTime } from 'luxon';
-import { fromEvent, mergeWith } from 'rxjs';
+import { mergeWith } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -107,7 +105,6 @@ class DateTimePickerComponent {
     #dropdownService;
     #hostElementRef;
     #i18n;
-    #id;
     #timeSelectorService;
     constructor() {
         this.#calendarService = inject(CalendarService);
@@ -116,7 +113,6 @@ class DateTimePickerComponent {
         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 */
         ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
@@ -129,28 +125,24 @@ class DateTimePickerComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
-        this.currentDateString = linkedSignal(() => {
-            const value = this.value();
-            const format = this.effectiveFormat();
-            const locale = this.#i18n.localeId();
-            if (!value) {
-                return "";
-            }
-            return gregorianDateTime(value, locale).toFormat(format);
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
+        this.dateTabId = createElementControlId();
         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(),
+                    hourFormat: this.effectiveHourFormat(),
                     showSeconds: this.showSeconds()
                 }));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
+        this.effectiveHourFormat = computed(() => this.hourFormat() ?? getLocaleHourFormat(this.#i18n.localeId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveHourFormat" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** Whether the view shown next takes focus: yes after picking a day, no when a tab is chosen. */
+        this.focusViewOnMount = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusViewOnMount" }] : /* istanbul ignore next */ []));
         this.footerClass = computed(() => {
             return dateTimePickerFooterThemeVariants();
         }, /* @ts-ignore */
@@ -160,24 +152,20 @@ class DateTimePickerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.inputAttributes = computed(() => {
-            const controls = this.popupId;
-            const expanded = this.#dropdownService.popupRef() != null;
-            const hasPopup = "dialog";
-            const invalid = this.invalidState();
             return {
                 "aria-autocomplete": "none",
-                "aria-controls": controls,
-                "aria-expanded": expanded,
-                "aria-haspopup": hasPopup,
-                "aria-invalid": invalid,
-                id: this.#id,
+                "aria-controls": this.popupId,
+                // The binder drops `false`, and a combobox must always say whether it's expanded.
+                "aria-expanded": this.expanded() ? "true" : "false",
+                "aria-haspopup": "dialog",
                 // The text box hides its clear button when read-only, so typing is blocked here instead.
                 readonly: this.readonly() || this.readonlyInput(),
-                role: "group"
+                role: "combobox"
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
+        this.invalidState = computed(() => this.typedInput.errors().length > 0 ||
+            (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 */ []));
@@ -186,6 +174,7 @@ class DateTimePickerComponent {
         ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));
         this.navigatedDate = linkedSignal(() => this.value() ?? new Date(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.panelId = createElementControlId();
         this.pickerPopupClass = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -226,8 +215,25 @@ class DateTimePickerComponent {
             return null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "timePickerMin" }] : /* istanbul ignore next */ []));
+        this.timeTabId = createElementControlId();
         this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id of an element that describes the input, such as a hint or an error message.
+         * @default ""
+         */
+        this.ariaDescribedBy = input("", { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @description Accessible name of the input. Prefer a visible label, linked through {@link inputId} or
+         * {@link ariaLabelledBy}; the placeholder is not a label.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Id of the element that labels the input.
+         * @default ""
+         */
+        this.ariaLabelledBy = input("", { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
         /**
          * @description Emits when the popup is about to close. This event is preventable.
          */
@@ -239,12 +245,13 @@ class DateTimePickerComponent {
         this.closed = output();
         /**
          * @description Sets the disabled state of the date time picker.
+         * @default false
          */
-        this.disabled = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the disabled dates of the date time picker.
-         * Accepts either an iterable of Date objects or a predicate function.
+         * Accepts either an iterable of Date objects or a predicate function. Typing a disabled date is reported as a
+         * `disabledDate` error instead of setting the value.
          */
         this.disabledDates = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
@@ -255,16 +262,18 @@ class DateTimePickerComponent {
         this.firstDay = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the date format of the date time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @description Sets the date format of the date time picker. If not specified, derives from the active locale,
+         * hourFormat, and showSeconds. Typed text is also accepted with one-digit parts and a two-digit year.
          * @default null
          */
         this.format = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the hour format of the time picker.
-         * @default 24
+         * @description Sets the hour format of the date time picker. When null, the active locale's clock is used: 12-hour
+         * for en-US, 24-hour for de-DE.
+         * @default null
          */
-        this.hourFormat = input("24", /* @ts-ignore */
+        this.hourFormat = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the hour step of the time picker.
@@ -272,19 +281,26 @@ class DateTimePickerComponent {
          */
         this.hourStep = input(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+         * date time picker. A unique id is generated when it isn't set.
+         * @default generated
+         */
+        this.inputId = input(createElementControlId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /**
          * @description Marks the date time picker as invalid. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Sets the maximum date of the date time picker.
+         * @description Sets the maximum date of the date time picker. A later typed date is reported as a `maxDate` error.
          */
         this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
         /**
-         * @description Sets the minimum date of the date time picker.
+         * @description Sets the minimum date of the date time picker. An earlier typed date is reported as a `minDate`
+         * error.
          */
         this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
         /**
@@ -313,35 +329,33 @@ class DateTimePickerComponent {
         this.popupClass = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the height of the popup element.
-         * @default 200
+         * @description Sets the height of the popup element. When not set, the popup fits its content.
+         * @default undefined
          */
         this.popupHeight = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "popupHeight" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the width of the popup element.
-         * @default null
+         * @description Sets the width of the popup element. When not set, the popup is at least as wide as the input.
+         * @default undefined
          */
         this.popupWidth = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "popupWidth" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the readonly state of the date time picker.
+         * @default false
          */
-        this.readonly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description When true, the input is readonly but the popup button remains enabled.
          * @default false
          */
-        this.readonlyInput = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonlyInput" }] : /* istanbul ignore next */ []));
+        this.readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the required state of the date time picker.
          * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
          * @default false
          */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the border radius of the date time picker.
          */
@@ -354,22 +368,22 @@ class DateTimePickerComponent {
         this.secondStep = input(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the visibility of the clear button.
+         * @description Sets the visibility of the clear button. Clearing empties the value at once.
+         * @default false
          */
-        this.showClearButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+        this.showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the visibility of the second selector.
+         * @default false
          */
-        this.showSeconds = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        this.showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the size of the date time picker.
          */
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the date time picker is interacted with via blur, selection, or clear.
+         * @description Emitted when focus leaves the date time picker and its popup.
          * The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
@@ -378,11 +392,11 @@ class DateTimePickerComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
         /**
-         * @description Two-way bindable current date time value.
+         * @description Two-way bindable current date time value. Typed text is written on Enter and when the input loses
+         * focus; text that isn't a valid date and time keeps the previous value and marks the field invalid.
          * @default null
          */
         this.value = model(null, /* @ts-ignore */
@@ -391,68 +405,55 @@ class DateTimePickerComponent {
          * @description Enables the display of week numbers in the calendar.
          * @default false
          */
-        this.weekNumber = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "weekNumber" }] : /* istanbul ignore next */ []));
+        this.weekNumber = input(false, { ...(ngDevMode ? { debugName: "weekNumber" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.typedInput = createTypedDateInput({
+            constraints: () => ({
+                disabledDates: this.disabledDates(),
+                max: this.max(),
+                min: this.min(),
+                unit: "datetime"
+            }),
+            format: () => this.effectiveFormat(),
+            localeId: () => this.#i18n.localeId(),
+            value: this.value
+        });
         effect(() => {
             const popupTemplate = this.popupTemplate();
             untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
         });
         afterNextRender({
             read: () => {
-                this.setSubscriptions();
-                this.setPopupCloseSubscriptions();
+                this.setPopupKeyboardSubscription();
+                this.setPopupCloseSubscription();
             }
         });
     }
-    focus() {
+    /**
+     * Focuses the input and places the caret after the text. Read-only pickers take focus too.
+     * @param options Options passed to the native `focus()` call, such as `preventScroll`.
+     */
+    focus(options) {
         const input = this.#hostElementRef.nativeElement.querySelector("input");
-        if (input && !this.readonly()) {
-            input.focus();
+        if (input) {
+            input.focus(options);
             input.setSelectionRange(input.value.length, input.value.length);
         }
     }
     onCalendarValueChange(date) {
         const singleDate = Array.isArray(date) ? null : date;
         if (singleDate) {
-            const inRangeDate = this.updateDateIfNotInRange(singleDate);
-            this.navigatedDate.set(inRangeDate);
+            // The calendar gives midnight; keep the time already chosen.
+            const current = this.navigatedDate();
+            const withTime = new Date(singleDate);
+            withTime.setHours(current.getHours(), current.getMinutes(), current.getSeconds(), 0);
+            this.navigatedDate.set(this.updateDateIfNotInRange(withTime));
         }
+        this.focusViewOnMount.set(true);
         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();
-            return;
-        }
-        if (!this.currentDateString() && this.value()) {
-            this.setCurrentDate(null);
-            this.touch.emit();
-            return;
-        }
-        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 && gregorianDateTime(value, locale).equals(dateTime)) {
-                this.touch.emit();
-                return;
-            }
-            this.setCurrentDate(dateTime.toJSDate());
-        }
-        else {
-            this.setCurrentDate(null);
-            this.currentDateString.set("");
-        }
-        this.touch.emit();
+        this.closePopup();
     }
     onDateInputButtonClick() {
         if (this.disabled() || this.readonly()) {
@@ -465,90 +466,104 @@ class DateTimePickerComponent {
             this.openPopup();
         }
     }
-    onDateStringEdit(dateString) {
-        this.currentDateString.set(dateString);
-    }
-    onSetDateClick() {
-        this.value.set(this.navigatedDate());
-        this.#dropdownService.popupRef()?.close();
-        this.touch.emit();
-    }
-    onTimeSelectorValueChange(date) {
-        if (date) {
-            const inRangeDate = this.updateDateIfNotInRange(date);
-            this.navigatedDate.set(inRangeDate);
+    onFocusIn(event) {
+        // The host is focusable only to pass focus on; focus inside it, such as a click in the text, stays put.
+        if (event.target === this.#hostElementRef.nativeElement) {
+            this.focus();
         }
     }
-    closePopup() {
-        this.#dropdownService.popupRef()?.close();
-    }
-    compareDatesEqual(date1, date2) {
-        return (date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate());
-    }
-    dateStringEquals(date1, date2) {
-        if (date1 && date2) {
-            const locale = this.#i18n.localeId();
-            return (gregorianDateTime(date1, locale).toFormat(this.effectiveFormat()) ===
-                gregorianDateTime(date2, locale).toFormat(this.effectiveFormat()));
+    onFocusOut(event) {
+        // Removing a focused picker from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
+            return;
+        }
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node) {
+            const popupElement = this.#dropdownService.popupRef()?.overlayRef.overlayElement;
+            if (this.#hostElementRef.nativeElement.contains(nextTarget) || popupElement?.contains(nextTarget)) {
+                return;
+            }
         }
-        return date1 === date2;
+        this.touch.emit();
+    }
+    onInputBlur() {
+        this.typedInput.commit();
     }
-    handleKeydown(event) {
+    onKeydown(event) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        const popupOpen = this.#dropdownService.popupRef() !== null;
+        const popupOpen = this.expanded();
         if (event.altKey && event.key === "ArrowDown") {
             event.preventDefault();
             this.openPopup();
-            return;
         }
-        if (event.altKey && event.key === "ArrowUp") {
-            event.preventDefault();
-            console.warn("ArrowUp is not supported yet");
-            this.closePopup();
-            return;
+        else if (event.altKey && event.key === "ArrowUp") {
+            if (popupOpen) {
+                event.preventDefault();
+                this.closePopup();
+            }
         }
-        if (event.key === "Escape" && popupOpen) {
-            event.preventDefault();
-            this.onCancelClick();
-            return;
+        else if (event.key === "Escape") {
+            if (popupOpen) {
+                event.preventDefault();
+                this.onCancelClick();
+            }
         }
-        if (event.altKey && event.key === "ArrowRight" && popupOpen) {
-            event.preventDefault();
-            this.activeView.set(this.isRtl() ? "date" : "time");
-            return;
+        else if (event.altKey && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
+            if (popupOpen) {
+                event.preventDefault();
+                const towardsTime = (event.key === "ArrowRight") !== this.isRtl();
+                this.activeView.set(towardsTime ? "time" : "date");
+            }
         }
-        if (event.altKey && event.key === "ArrowLeft" && popupOpen) {
-            event.preventDefault();
-            this.activeView.set(this.isRtl() ? "time" : "date");
+        else if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+            // Committed before a surrounding form submits; an IME uses Enter to confirm its text.
+            if (!event.isComposing && event.keyCode !== 229) {
+                this.typedInput.commit();
+            }
+        }
+    }
+    onSetDateClick() {
+        this.value.set(this.navigatedDate());
+        this.closePopup();
+    }
+    /** Arrow keys, Home and End move between the Date and Time tabs, as in the APG tabs pattern. */
+    onTabKeydown(event) {
+        if (event.altKey) {
             return;
         }
-        if (event.key === "Enter" && popupOpen) {
-            const target = event.target;
-            if (target.tagName === "BUTTON" || target.closest("button")) {
-                return;
-            }
-            event.preventDefault();
-            if (this.activeView() === "date") {
-                this.activeView.set("time");
-            }
-            else {
-                this.onSetDateClick();
-            }
+        const forward = this.isRtl() ? "ArrowLeft" : "ArrowRight";
+        const backward = this.isRtl() ? "ArrowRight" : "ArrowLeft";
+        let view = null;
+        if (event.key === "Home" || event.key === backward) {
+            view = "date";
+        }
+        else if (event.key === "End" || event.key === forward) {
+            view = "time";
+        }
+        if (!view) {
             return;
         }
+        event.preventDefault();
+        this.selectTab(view);
+        const tabId = view === "date" ? this.dateTabId : this.timeTabId;
+        const tablist = event.currentTarget;
+        tablist.querySelector(`[id="${tabId}"]`)?.focus();
     }
-    isDateDisabledByInput(date, disabledDates) {
-        if (typeof disabledDates === "function") {
-            return disabledDates(date);
-        }
-        else if (disabledDates) {
-            return any(disabledDates, d => this.compareDatesEqual(date, d));
+    onTimeSelectorValueChange(date) {
+        if (date) {
+            const inRangeDate = this.updateDateIfNotInRange(date);
+            this.navigatedDate.set(inRangeDate);
         }
-        return false;
+    }
+    /** Shows a view from its tab; focus stays on the tab, as in the APG tabs pattern. */
+    selectTab(view) {
+        this.focusViewOnMount.set(false);
+        this.activeView.set(view);
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
     }
     openPopup() {
         if (!this.#dropdownService.popupRef()) {
@@ -561,15 +576,21 @@ class DateTimePickerComponent {
             });
         }
     }
-    setCurrentDate(date) {
-        this.value.set(date);
-        this.updateCurrentDateString(date, this.effectiveFormat());
-        this.touch.emit();
+    setPopupCloseSubscription() {
+        this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            if (this.#dropdownService.focusCanReturn()) {
+                this.focus();
+            }
+            else if (!this.#destroyRef.destroyed) {
+                // Focus left from inside the popup, which the host's focusout doesn't see.
+                this.touch.emit();
+            }
+            this.activeView.set("date");
+            this.focusViewOnMount.set(true);
+            this.navigatedDate.set(this.value() ?? new Date());
+        });
     }
-    setKeyboardSubscriptions() {
-        fromEvent(this.#hostElementRef.nativeElement, "keydown")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(event => this.handleKeydown(event));
+    setPopupKeyboardSubscription() {
         this.#calendarService.keydown$
             .pipe(mergeWith(this.#timeSelectorService.keydown$), takeUntilDestroyed(this.#destroyRef))
             .subscribe(e => {
@@ -603,29 +624,6 @@ class DateTimePickerComponent {
             }
         });
     }
-    setPopupCloseSubscriptions() {
-        this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
-            if (this.#dropdownService.focusCanReturn()) {
-                this.focus();
-            }
-            this.activeView.set("date");
-            this.navigatedDate.set(this.value() ?? new Date());
-        });
-    }
-    setSubscriptions() {
-        fromEvent(this.#hostElementRef.nativeElement, "focusin")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .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();
@@ -638,7 +636,7 @@ class DateTimePickerComponent {
         return date;
     }
     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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DateTimePickerComponent, isStandalone: true, selector: "mona-datetime-picker", inputs: { ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, 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 }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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: { "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "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,
             DropdownService,
             TimeSelectorService,
@@ -647,7 +645,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()\"\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            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["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: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "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)=\"onInputBlur()\"\n    (valueChange)=\"typedInput.edit($event)\"\n    [aria-describedby]=\"ariaDescribedBy()\"\n    [aria-label]=\"ariaLabel()\"\n    [aria-labelledby]=\"ariaLabelledBy()\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [inputId]=\"inputId()\"\n    [invalid]=\"invalidState()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\"\n    [value]=\"typedInput.text()\">\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            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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            <div class=\"flex w-full gap-1\" role=\"tablist\" (keydown)=\"onTabKeydown($event)\">\n                <button\n                    monaButton\n                    type=\"button\"\n                    role=\"tab\"\n                    class=\"flex-1\"\n                    [id]=\"dateTabId\"\n                    [attr.aria-controls]=\"panelId\"\n                    [attr.aria-selected]=\"activeView() === 'date'\"\n                    [disabled]=\"disabled()\"\n                    [rounded]=\"rounded()\"\n                    [selected]=\"activeView() === 'date'\"\n                    [size]=\"size()\"\n                    [tabindex]=\"activeView() === 'date' ? 0 : -1\"\n                    (click)=\"selectTab('date')\">\n                    {{ messages().date }}\n                </button>\n                <button\n                    monaButton\n                    type=\"button\"\n                    role=\"tab\"\n                    class=\"flex-1\"\n                    [id]=\"timeTabId\"\n                    [attr.aria-controls]=\"panelId\"\n                    [attr.aria-selected]=\"activeView() === 'time'\"\n                    [disabled]=\"disabled()\"\n                    [rounded]=\"rounded()\"\n                    [selected]=\"activeView() === 'time'\"\n                    [size]=\"size()\"\n                    [tabindex]=\"activeView() === 'time' ? 0 : -1\"\n                    (click)=\"selectTab('time')\">\n                    {{ messages().time }}\n                </button>\n            </div>\n        </div>\n        <div\n            class=\"overflow-hidden\"\n            role=\"tabpanel\"\n            [id]=\"panelId\"\n            [attr.aria-labelledby]=\"activeView() === 'date' ? dateTabId : timeTabId\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\">\n                    <mona-calendar\n                        [focusOnMount]=\"focusViewOnMount()\"\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\">\n                    <mona-time-selector\n                        [focusOnMount]=\"focusViewOnMount()\"\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]=\"effectiveHourFormat()\"\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: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "focusOnMount", "invalid", "maxDate", "minDate", "readonly", "required", "rounded", "selection", "touched", "class", "value", "weekNumber"], outputs: ["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: ["aria-describedby", "aria-label", "aria-labelledby", "clearButton", "disabled", "inputAttributes", "inputClass", "inputId", "inputStyle", "invalid", "maxLength", "minLength", "name", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { 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,
@@ -667,7 +665,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         TimeSelectorComponent,
                         TextBoxComponent,
                         TextBoxSuffixTemplateDirective,
-                        ButtonGroupComponent,
                         CdkTrapFocus,
                         CalendarDecadeCellTemplateDirective,
                         CalendarMonthCellTemplateDirective,
@@ -675,6 +672,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         NgTemplateOutlet,
                         TextBoxPrefixTemplateDirective
                     ], hostDirectives: [DropdownPopupHandlerDirective], host: {
+                        // The ARIA inputs below are applied to the inner input, so the host must not keep the static attributes.
+                        "[attr.aria-describedby]": "null",
+                        "[attr.aria-label]": "null",
+                        "[attr.aria-labelledby]": "null",
                         "[attr.tabindex]": "disabled() ? null : -1",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.data-disabled]": "disabled() || null",
@@ -682,9 +683,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidState() || null",
                         "[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()\"\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            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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 }] }] } });
+                        "(focusin)": "onFocusIn($event)",
+                        "(focusout)": "onFocusOut($event)",
+                        "(keydown)": "onKeydown($event)"
+                    }, template: "<mona-text-box\n    (inputBlur)=\"onInputBlur()\"\n    (valueChange)=\"typedInput.edit($event)\"\n    [aria-describedby]=\"ariaDescribedBy()\"\n    [aria-label]=\"ariaLabel()\"\n    [aria-labelledby]=\"ariaLabelledBy()\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [inputId]=\"inputId()\"\n    [invalid]=\"invalidState()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\"\n    [value]=\"typedInput.text()\">\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            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\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            <div class=\"flex w-full gap-1\" role=\"tablist\" (keydown)=\"onTabKeydown($event)\">\n                <button\n                    monaButton\n                    type=\"button\"\n                    role=\"tab\"\n                    class=\"flex-1\"\n                    [id]=\"dateTabId\"\n                    [attr.aria-controls]=\"panelId\"\n                    [attr.aria-selected]=\"activeView() === 'date'\"\n                    [disabled]=\"disabled()\"\n                    [rounded]=\"rounded()\"\n                    [selected]=\"activeView() === 'date'\"\n                    [size]=\"size()\"\n                    [tabindex]=\"activeView() === 'date' ? 0 : -1\"\n                    (click)=\"selectTab('date')\">\n                    {{ messages().date }}\n                </button>\n                <button\n                    monaButton\n                    type=\"button\"\n                    role=\"tab\"\n                    class=\"flex-1\"\n                    [id]=\"timeTabId\"\n                    [attr.aria-controls]=\"panelId\"\n                    [attr.aria-selected]=\"activeView() === 'time'\"\n                    [disabled]=\"disabled()\"\n                    [rounded]=\"rounded()\"\n                    [selected]=\"activeView() === 'time'\"\n                    [size]=\"size()\"\n                    [tabindex]=\"activeView() === 'time' ? 0 : -1\"\n                    (click)=\"selectTab('time')\">\n                    {{ messages().time }}\n                </button>\n            </div>\n        </div>\n        <div\n            class=\"overflow-hidden\"\n            role=\"tabpanel\"\n            [id]=\"panelId\"\n            [attr.aria-labelledby]=\"activeView() === 'date' ? dateTabId : timeTabId\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\">\n                    <mona-calendar\n                        [focusOnMount]=\"focusViewOnMount()\"\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\">\n                    <mona-time-selector\n                        [focusOnMount]=\"focusViewOnMount()\"\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]=\"effectiveHourFormat()\"\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 }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], 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 }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", 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 }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/datetime-picker