@nanahoshi/mona-ui 0.24.5 → 0.24.6

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

@@ -1,17 +1,16 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, computed, linkedSignal, signal, viewChild, output, input, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
+import { inject, DestroyRef, ElementRef, computed, viewChild, input, output, booleanAttribute, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideClock } from '@lucide/angular';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { getLocaleHourFormat, createTypedDateInput } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, dropdownPopupThemeVariants, DROPDOWN_POPUP_INPUT_TOKEN, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { MonaI18nService, gregorianDateTime, getLocaleTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
+import { MonaI18nService, getLocaleTimeInputFormat } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
-import { DateTime } from 'luxon';
-import { fromEvent, filter } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -81,13 +80,11 @@ class TimePickerComponent {
     #dropdownService;
     #hostElementRef;
     #i18n;
-    #id;
     constructor() {
         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();
@@ -97,49 +94,35 @@ class TimePickerComponent {
             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.effectiveFormat = computed(() => {
             return (this.format() ??
                 getLocaleTimeInputFormat(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 */ []));
         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: "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("timePicker", TIME_PICKER_DEFAULT_MESSAGES);
-        this.navigatedDate = signal(new Date(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.pickerPopupClass = computed(() => {
             const rounded = this.rounded();
             const size = this.size();
@@ -151,6 +134,22 @@ class TimePickerComponent {
         this.popupId = createElementControlId();
         this.timePopupTemplateRef = viewChild.required("timePopupTemplate", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "timePopupTemplateRef" }] : /* 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.
          */
@@ -162,20 +161,22 @@ class TimePickerComponent {
         this.closed = output();
         /**
          * @description Sets the disabled state of the 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 format of the time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @description Sets the format of the time picker. If not specified, derives from the active locale, hourFormat,
+         * and showSeconds. Typed text is also accepted with one-digit hours, minutes and seconds.
          * @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 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.
@@ -183,21 +184,29 @@ class TimePickerComponent {
          */
         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
+         * 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 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 time picker.
-         * @default null
+         * @description Sets the latest time of the time picker. Only the time of day is compared; a later typed time is
+         * reported as a `maxDate` error.
+         * @default undefined
          */
         this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
         /**
-         * @description Sets the minimum date of the time picker.
-         * @default null
+         * @description Sets the earliest time of the time picker. Only the time of day is compared; an earlier typed time
+         * is reported as a `minDate` error.
+         * @default undefined
          */
         this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
         /**
@@ -226,35 +235,33 @@ class TimePickerComponent {
         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 the time selector.
+         * @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 fits the time selector.
+         * @default undefined
          */
         this.popupWidth = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "popupWidth" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the readonly state of the 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 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 time picker.
          */
@@ -267,22 +274,22 @@ class TimePickerComponent {
         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 time picker.
          */
         this.size = input("medium", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the time picker is interacted with via blur, selection, or clear.
+         * @description Emitted when focus leaves the time picker and its popup.
          * The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
@@ -291,90 +298,104 @@ class TimePickerComponent {
          * 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 time value.
+         * @description Two-way bindable current time value. Typed text is written on Enter and when the input loses
+         * focus, on the current value's day (today when empty); text that isn't a valid time keeps the previous value
+         * and marks the field invalid.
          * @default null
          */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.typedInput = createTypedDateInput({
+            constraints: () => ({ max: this.max(), min: this.min(), unit: "time" }),
+            format: () => this.effectiveFormat(),
+            localeId: () => this.#i18n.localeId(),
+            resolve: (parsed, current) => {
+                const day = current ?? new Date();
+                return parsed
+                    .set({ year: day.getFullYear(), month: day.getMonth() + 1, day: day.getDate() })
+                    .toJSDate();
+            },
+            value: this.value
+        });
         afterNextRender({
-            read: () => {
-                this.setDateValues();
-                this.setSubscriptions();
-            }
+            read: () => this.setPopupCloseSubscription()
         });
         effect(() => {
             const popupTemplate = this.timePopupTemplateRef();
             untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
         });
     }
-    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);
         }
     }
-    onDateStringEdit(dateString) {
-        this.currentDateString.set(dateString);
+    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();
+        }
     }
-    onTimeInputBlur() {
-        if (this.#dropdownService.popupRef()) {
-            this.touch.emit();
+    onFocusOut(event) {
+        // Removing a focused picker from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
             return;
         }
-        this.processTimeInput(this.currentDateString());
+        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();
     }
-    onTimeInputButtonClick() {
+    onInputBlur() {
+        this.typedInput.commit();
+    }
+    onKeydown(event) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.openPopup();
-    }
-    onTimeSelectorValueChange(date) {
-        this.setCurrentDate(date);
-        this.#dropdownService.popupRef()?.close();
-        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()));
+        if (event.altKey && event.key === "ArrowDown") {
+            event.preventDefault();
+            this.openPopup();
         }
-        return date1 === date2;
-    }
-    generateValidDateTime(dateString) {
-        const value = this.value();
-        const locale = this.#i18n.localeId();
-        const valueDate = value ? gregorianDateTime(value, locale) : gregorianDateTime(new Date(), locale);
-        let dateTime = parseGregorianDate(dateString, this.effectiveFormat(), locale);
-        if (dateTime.isValid) {
-            return dateTime.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
+        else if ((event.altKey && event.key === "ArrowUp") || event.key === "Escape") {
+            if (this.expanded()) {
+                event.preventDefault();
+                this.#dropdownService.popupRef()?.close();
+            }
         }
-        const maxDate = this.max();
-        const minDate = this.min();
-        const date = minDate ?? maxDate;
-        if (date) {
-            const newDate = gregorianDateTime(date, locale);
-            dateTime = newDate.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
-            return dateTime;
+        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 null;
     }
-    handleKeydown(e) {
+    onTimeInputButtonClick() {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        if (e.key === "ArrowDown" && e.altKey) {
-            e.preventDefault();
-            this.openPopup();
+        if (this.#dropdownService.popupRef()) {
+            this.#dropdownService.popupRef()?.close();
             return;
         }
+        this.openPopup();
+    }
+    onTimeSelectorValueChange(date) {
+        this.value.set(date);
+        this.#dropdownService.popupRef()?.close();
     }
     openPopup() {
         if (this.#dropdownService.popupRef()) {
@@ -385,71 +406,26 @@ class TimePickerComponent {
             width: this.popupWidth() || "auto"
         });
     }
-    processTimeInput(inputText) {
-        const dateTime = this.generateValidDateTime(inputText);
-        if (!dateTime) {
-            this.setCurrentDate(null);
-            return;
-        }
-        if (this.dateStringEquals(dateTime.toJSDate(), this.value())) {
-            this.setCurrentDateString(this.value());
-            return;
-        }
-        if (dateTime.isValid) {
-            this.setCurrentDate(dateTime.toJSDate());
-            this.navigatedDate.set(dateTime.toJSDate());
-        }
-        else {
-            this.setCurrentDate(null);
-        }
-    }
-    setCurrentDate(date) {
-        this.value.set(date);
-        this.setCurrentDateString(date);
-        this.touch.emit();
-    }
-    setCurrentDateString(date) {
-        this.updateCurrentDateString(date, this.effectiveFormat());
-    }
-    setDateValues() {
-        const value = this.value();
-        const locale = this.#i18n.localeId();
-        this.navigatedDate.set(value ?? DateTime.now().setLocale(locale).toJSDate());
-        if (value) {
-            this.updateCurrentDateString(value, this.effectiveFormat());
-        }
-    }
-    setKeyboardNavigation() {
-        fromEvent(this.#hostElementRef.nativeElement, "keydown")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(e => this.handleKeydown(e));
-    }
-    setSubscriptions() {
-        this.setKeyboardNavigation();
-        fromEvent(this.#hostElementRef.nativeElement, "focusin")
-            .pipe(takeUntilDestroyed(this.#destroyRef))
-            .subscribe(() => this.focus());
-        this.#dropdownService.popupCloseComplete$
-            .pipe(filter(() => this.#dropdownService.focusCanReturn()), takeUntilDestroyed(this.#destroyRef))
-            .subscribe(() => this.focus());
-    }
-    updateCurrentDateString(date, format) {
-        if (!date) {
-            this.currentDateString.set("");
-            return;
-        }
-        const dateString = gregorianDateTime(date, this.#i18n.localeId()).toFormat(format);
-        this.currentDateString.set(dateString);
+    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();
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-disabled": "disabled() || null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-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 }, 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 } }, 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,
             {
                 provide: DROPDOWN_POPUP_INPUT_TOKEN,
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { 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: 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"] }] }); }
+        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [aria-describedby]=\"ariaDescribedBy()\"\n    [aria-label]=\"ariaLabel()\"\n    [aria-labelledby]=\"ariaLabelledBy()\"\n    [disabled]=\"disabled()\"\n    [inputId]=\"inputId()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"typedInput.text()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalidState()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"typedInput.edit($event)\"\n    (inputBlur)=\"onInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            focusOnMount\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"effectiveHourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideClock, selector: "svg[lucideClock]" }, { 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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -468,6 +444,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         TextBoxSuffixTemplateDirective,
                         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",
@@ -475,9 +455,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)": "onTimeInputBlur()"
-                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { 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 }] }], 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"] }] } });
+                        "(focusin)": "onFocusIn($event)",
+                        "(focusout)": "onFocusOut($event)",
+                        "(keydown)": "onKeydown($event)"
+                    }, template: "<mona-text-box\n    [aria-describedby]=\"ariaDescribedBy()\"\n    [aria-label]=\"ariaLabel()\"\n    [aria-labelledby]=\"ariaLabelledBy()\"\n    [disabled]=\"disabled()\"\n    [inputId]=\"inputId()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"typedInput.text()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalidState()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"invalidState() || touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"typedInput.edit($event)\"\n    (inputBlur)=\"onInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <svg lucideClock [size]=\"16\" aria-hidden=\"true\"></svg>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            focusOnMount\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"effectiveHourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { 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 }] }], 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"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/time-picker