@nanahoshi/mona-ui 0.24.5 → 0.24.6

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

@@ -1,19 +1,17 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, computed, linkedSignal, contentChild, viewChild, TemplateRef, output, input, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
+import { inject, DestroyRef, ElementRef, computed, contentChild, 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 { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, CalendarComponent } from '@nanahoshi/mona-ui/calendar';
-import { CalendarService, datePopupThemeVariants, DateInputPrefixTemplateDirective } from '@nanahoshi/mona-ui/date-input';
+import { CalendarService, 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 { MonaI18nService, gregorianDateTime, getLocaleDateInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
+import { MonaI18nService, getLocaleDateInputFormat } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
-import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -84,14 +82,12 @@ class DatePickerComponent {
     #dropdownService;
     #hostElementRef;
     #i18n;
-    #id;
     constructor() {
         this.#calendarService = inject(CalendarService);
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
-        this.#id = createElementControlId();
         this.baseClass = computed(() => {
             const focused = this.#dropdownService.popupRef() != null;
             const rounded = this.rounded();
@@ -101,16 +97,6 @@ class DatePickerComponent {
             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.decadeCellTemplate = contentChild(CalendarDecadeCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "decadeCellTemplate" }] : /* istanbul ignore next */ []));
         this.effectiveFormat = computed(() => {
@@ -120,30 +106,24 @@ class DatePickerComponent {
         this.expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.inputAttributes = computed(() => {
-            const controls = this.popupId;
-            const expanded = this.#dropdownService.popupRef() != null;
-            const hasPopup = "grid";
-            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: "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.messages = this.#i18n.componentMessages("datePicker", DATE_PICKER_DEFAULT_MESSAGES);
         this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));
-        this.navigatedDate = linkedSignal(() => this.value() ?? new Date(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.pickerPopupClass = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -158,6 +138,22 @@ class DatePickerComponent {
         this.prefixTemplate = contentChild(DateInputPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         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.
          */
@@ -169,12 +165,13 @@ class DatePickerComponent {
         this.closed = output();
         /**
          * @description Sets the disabled state of the date 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 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 */ []));
@@ -186,23 +183,30 @@ class DatePickerComponent {
         ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the date format of the date picker. If not specified, derives from the active locale.
+         * Typed text is also accepted with one-digit days and months and a two-digit year.
          * @default null
          */
         this.format = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+         * date 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 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 picker.
+         * @description Sets the maximum date of the date 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 picker.
+         * @description Sets the minimum date of the date 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) });
         /**
@@ -225,52 +229,50 @@ class DatePickerComponent {
         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 empty, the popup fits the calendar.
+         * @default ""
          */
         this.popupHeight = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the width of the popup element.
-         * @default null
+         * @description Sets the width of the popup element. When empty, the popup fits the calendar.
+         * @default ""
          */
         this.popupWidth = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the readonly state of the date 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 calendar 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 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 picker.
          */
         this.rounded = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* 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 size of the date picker.
          */
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the date picker is interacted with via blur, selection, or clear.
+         * @description Emitted when focus leaves the date picker and its popup.
          * The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
@@ -279,11 +281,11 @@ class DatePickerComponent {
          * 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 value.
+         * @description Two-way bindable current date value. Typed text is written on Enter and when the input loses
+         * focus; text that isn't a valid date keeps the previous value and marks the field invalid.
          * @default null
          */
         this.value = model(null, /* @ts-ignore */
@@ -292,60 +294,39 @@ class DatePickerComponent {
          * @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: "date" }),
+            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.setCalendarKeyboardSubscription();
+                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;
-        this.setCurrentDate(singleDate);
-        this.#dropdownService.popupRef()?.close();
-    }
-    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.value.set(singleDate ? new Date(singleDate) : null);
+        this.closePopup();
     }
     onDateInputButtonClick() {
         const popupRef = this.#dropdownService.popupRef();
@@ -358,26 +339,30 @@ class DatePickerComponent {
         }
         this.openPopup();
     }
-    onDateStringEdit(dateString) {
-        this.currentDateString.set(dateString);
-    }
-    closePopup() {
-        this.#dropdownService.popupRef()?.close();
-    }
-    compareDatesEqual(date1, date2) {
-        return (date1.getFullYear() === date2.getFullYear() &&
-            date1.getMonth() === date2.getMonth() &&
-            date1.getDate() === date2.getDate());
+    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();
+        }
     }
-    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;
         }
-        return date1 === date2;
+        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;
+            }
+        }
+        this.touch.emit();
+    }
+    onInputBlur() {
+        this.typedInput.commit();
     }
-    handleKeydown(event) {
+    onKeydown(event) {
         if (this.disabled() || this.readonly()) {
             return;
         }
@@ -386,18 +371,20 @@ class DatePickerComponent {
             this.openPopup();
         }
         else if ((event.altKey && event.key === "ArrowUp") || event.key === "Escape") {
-            event.preventDefault();
-            this.closePopup();
-        }
-    }
-    isDateDisabledByInput(date, disabledDates) {
-        if (typeof disabledDates === "function") {
-            return disabledDates(date);
+            if (this.expanded()) {
+                event.preventDefault();
+                this.closePopup();
+            }
         }
-        else if (disabledDates) {
-            return any(disabledDates, d => this.compareDatesEqual(date, d));
+        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();
+            }
         }
-        return false;
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
     }
     openPopup() {
         if (!this.#dropdownService.popupRef()) {
@@ -410,15 +397,7 @@ class DatePickerComponent {
             });
         }
     }
-    setCurrentDate(date) {
-        const newDate = date ? new Date(date) : null;
-        this.value.set(newDate);
-        this.touch.emit();
-    }
-    setKeyboardSubscriptions() {
-        fromEvent(this.#hostElementRef.nativeElement, "keydown")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(event => this.handleKeydown(event));
+    setCalendarKeyboardSubscription() {
         this.#calendarService.keydown$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
             const keyboardEvent = event.originalEvent;
             if (keyboardEvent &&
@@ -428,21 +407,19 @@ class DatePickerComponent {
             }
         });
     }
-    setPopupCloseSubscriptions() {
+    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();
+            }
         });
     }
-    setSubscriptions() {
-        fromEvent(this.#hostElementRef.nativeElement, "focusin")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(() => this.focus());
-        this.setKeyboardSubscriptions();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DatePickerComponent, isStandalone: true, selector: "mona-date-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 }, 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 }, 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 }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", 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: { 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: DatePickerComponent, isStandalone: true, selector: "mona-date-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 }, 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 }, 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 }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", 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: [
             DropdownService,
             CalendarService,
             {
@@ -450,7 +427,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 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: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { 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: 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: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { 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: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], 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: ["popupTemplate"], 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    [disabled]=\"disabled()\"\n    [inputId]=\"inputId()\"\n    [value]=\"typedInput.text()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalidState()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            focusOnMount\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</ng-template>\n", dependencies: [{ kind: "component", type: LucideCalendar, selector: "svg[lucideCalendar]" }, { 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: 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: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { 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: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -475,15 +452,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         ButtonDirective,
                         CdkTrapFocus
                     ], 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",
                         "[attr.data-expanded]": "expanded()",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
-                        "[class]": "baseClass()"
-                    }, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</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: ["popupTemplate", { 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 }] }], 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 }] }], 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 }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", 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 }] }] } });
+                        "[class]": "baseClass()",
+                        "(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    [disabled]=\"disabled()\"\n    [inputId]=\"inputId()\"\n    [value]=\"typedInput.text()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalidState()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\">\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            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openCalendar\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <svg lucideCalendar [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().datePicker\"\n        cdkTrapFocus>\n        <mona-calendar\n            focusOnMount\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\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</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: ["popupTemplate", { 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 }] }], 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 }] }], 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 }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", 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/date-picker