@nanahoshi/mona-ui 0.24.4 → 0.24.6

package/types/nanahoshi-mona-ui-combo-box.d.ts

@@ -38,14 +38,13 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
     protected readonly activeDescendant: _angular_core.Signal<string | null>;
     protected readonly affixClass: _angular_core.Signal<string>;
     protected readonly baseClass: _angular_core.Signal<string>;
+    protected readonly clearButtonVisible: _angular_core.Signal<boolean>;
     protected readonly comboBoxValue: _angular_core.WritableSignal<string>;
     protected readonly comboBoxValue$: Subject<string | null>;
-    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly groupHeaderTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly headerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
-    protected readonly id: string;
     protected readonly inputClass: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -62,15 +61,16 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Allows a custom value to be committed when it doesn't match any item in {@link data}.
      * @default false
      */
-    readonly allowCustomValue: _angular_core.InputSignal<boolean>;
+    readonly allowCustomValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description ID of an element that provides an extended description for the input.
      * @default ""
      */
     readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     /**
-     * @description Accessible name for the input. Describe what the combo box represents.
-     * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
+     * @description Accessible name for the input. Describe what the combo box represents. Prefer a visible label,
+     * linked through {@link inputId} or {@link ariaLabelledBy}; without any of them, browsers fall back to the
+     * {@link placeholder}.
      * @default ""
      */
     readonly ariaLabel: _angular_core.InputSignal<string>;
@@ -96,23 +96,30 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Renders the component with reduced visual emphasis and removes pointer interaction.
      * @default false
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * combo box. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Marks the combo box as invalid. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description A predicate function or the name of the field that determines whether an item is disabled.
      * @default undefined
      */
     readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
     /**
-     * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+     * @description Shows a loading indicator, in place of the clear button, and marks the field busy. It doesn't
+     * block interaction: the field stays usable while data loads.
      * @default false
      */
-    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Emitted when the popup is about to open. This event is preventable.
      */
@@ -132,7 +139,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @description Sets the height of the popup element.
+     * @description Maximum height of the popup, in pixels or as a CSS length. Shorter lists shrink to fit. When
+     * unset, the popup is at most 200 pixels tall.
      * @default null
      */
     readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
@@ -145,12 +153,12 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Prevents value changes while preserving the component's visual state.
      * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the required state of the combo box component.
      * @default false
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Border-radius preset applied to the component.
      * @default "medium"
@@ -160,7 +168,7 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * @description Displays a button that resets the value to empty when an item is selected.
      * @default false
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Size preset controlling the component's dimensions.
      * @default "medium"
@@ -173,8 +181,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the combo box is interacted with on blur, selection, clear, or committed input.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the combo box. Moving between its input, clear button and popup doesn't
+     * count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -182,7 +190,7 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
      * @default ""
@@ -197,8 +205,8 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      */
     readonly value: _angular_core.ModelSignal<TValue | null>;
     /**
-     * @description Emitted with the entered text when the user presses Enter on unmatched input.
-     * Only emitted when {@link allowCustomValue} is true.
+     * @description Emitted with the entered text when the user presses Enter on text that matches no item, or leaves
+     * the field with it. Only emitted when {@link allowCustomValue} is true.
      */
     readonly valueAdd: _angular_core.OutputEmitterRef<string>;
     /**
@@ -219,10 +227,16 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
      *
      * @default false
      */
-    readonly valuePrimitive: _angular_core.InputSignal<boolean>;
+    readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
-    protected onInputBlur(event: FocusEvent): void;
+    /**
+     * @description Moves focus to the inner input. The caret goes to the end of the text.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onHostPointerDown(event: PointerEvent): void;
+    protected onInput(text: string): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: Event): void;
@@ -232,19 +246,24 @@ declare class ComboBoxComponent<TData = unknown, TValue = TData> implements Form
     private handleEnterKey;
     private initialize;
     private notifyFilterChange;
+    /**
+     * Settles typed text when focus leaves the combo box, so the field never shows text that isn't its value:
+     * an item whose text matches is selected, empty text clears the value, other text is offered through
+     * `valueAdd` when custom values are allowed, and otherwise the selected item's text comes back.
+     */
+    private resolveText;
     private selectItem;
     private setArrowNavigationSubscription;
     private setComboboxValueSubscription;
     private setEscapeKeySubscription;
     private setKeydownSubscription;
-    private setNavigatedItemSubscription;
     private setPopupCloseSubscriptions;
     private setSpaceKeySubscription;
     private setSubscriptions;
     private synchronizeSelection;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboBoxComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "disabled": "disabledChange"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; "valueAdd": "valueAdd"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any, any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "valuePrimitive": { "alias": "valuePrimitive"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; "valueAdd": "valueAdd"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const COMBO_BOX_DEFAULT_MESSAGES: MonaComboBoxMessages;

package/types/nanahoshi-mona-ui-date-input.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { PipeTransform } from '@angular/core';
+import { PipeTransform, Signal, WritableSignal, ModelSignal } from '@angular/core';
 import { Predicate, ImmutableSet } from '@mirei/ts-collections';
 import { DateTime } from 'luxon';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -7,6 +7,7 @@ import { VariantInputs } from '@nanahoshi/mona-ui/internal';
 import { VariantProps } from 'class-variance-authority';
 import { Subject } from 'rxjs';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { ValidationError } from '@angular/forms/signals';
 
 declare class DateInputPrefixTemplateDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputPrefixTemplateDirective, never>;
@@ -55,5 +56,75 @@ declare const generateHourSet: (hourFormat: HourFormat, meridiem: Meridiem, step
 declare const generateMinuteSet: (step?: number) => ImmutableSet<TimeUnit>;
 declare const generateSecondSet: (step?: number) => ImmutableSet<TimeUnit>;
 
-export { CalendarService, DateInputPrefixTemplateDirective, TimeLimiterPipe, TimeSelectorService, datePopupThemeVariants, generateHourSet, generateMinuteSet, generateSecondSet };
-export type { CalendarView, DateDisabledType, DatePopupVariantInput, DatePopupVariantProps, HourFormat, Meridiem, TimeUnit };
+/**
+ * The clock a locale uses by default: "12" for en-US, ja-JP and ko-KR, "24" for de-DE, fr-FR and tr-TR. Locales that
+ * mark the hour cycle explicitly (`en-US-u-hc-h23`) are honoured.
+ */
+declare function getLocaleHourFormat(localeId: string): HourFormat;
+
+/** Which part of the typed value min, max and `disabledDates` apply to. */
+type TypedDateUnit = "date" | "datetime" | "time";
+interface TypedDateConstraints {
+    readonly disabledDates?: DateDisabledType;
+    readonly max?: Date | null;
+    readonly min?: Date | null;
+    readonly unit: TypedDateUnit;
+}
+/** The error a picker reports when the typed text isn't a date in the input format. */
+interface TypedDateParseError extends ValidationError.WithoutFieldTree {
+    readonly kind: "parse";
+}
+/** The error a picker reports when the typed date is one of its `disabledDates`. */
+interface DisabledDateError extends ValidationError.WithoutFieldTree {
+    readonly date: Date;
+    readonly kind: "disabledDate";
+}
+/**
+ * Parses text typed into a picker. The input format is tried first, then the same format with one-digit months, days,
+ * hours, minutes and seconds ("1/5/2025", "9:05"), then with a two-digit year ("1/5/25"). Two-digit years up to 60
+ * read as 20xx, later ones as 19xx.
+ * @returns The parsed date, or null when the text isn't a date in any of these forms.
+ */
+declare function parseTypedDate(text: string, format: string, localeId: string): DateTime | null;
+/** Whether a date is one of `disabledDates`, compared by day. */
+declare function isDateDisabled(date: Date, disabledDates: DateDisabledType): boolean;
+/**
+ * Checks a typed date against a picker's min, max and `disabledDates`, the same limits its popup applies.
+ * @returns The error to report, or null when the date is allowed. Range errors are Angular's `minDate` and `maxDate`
+ * errors, so they read like the signal-forms validators.
+ */
+declare function checkTypedDate(date: Date, constraints: TypedDateConstraints): ValidationError.WithoutFieldTree | null;
+/** The error reported for text that doesn't parse. */
+declare function typedDateParseError(): TypedDateParseError;
+interface TypedDateInputOptions {
+    /** The limits the typed date is checked against. */
+    readonly constraints: () => TypedDateConstraints;
+    /** The format the value is shown in and typed text is parsed with. */
+    readonly format: () => string;
+    readonly localeId: () => string;
+    /** Turns the parsed text into the value, such as putting a typed time on the current value's day. */
+    readonly resolve?: (parsed: DateTime, current: Date | null) => Date;
+    readonly value: ModelSignal<Date | null>;
+}
+interface TypedDateInput {
+    /**
+     * Writes the typed text to the value. Text that doesn't parse, or a date outside the limits, leaves the value as
+     * it was and is reported through {@link errors}, and to the form field the picker is bound to. Empty text clears
+     * the value.
+     */
+    commit(): void;
+    /** Takes text typed into the input. Clearing the input commits at once, so the clear button empties the value. */
+    edit(text: string): void;
+    /** Parse and limit errors of the last commit. They clear when the value changes. */
+    readonly errors: Signal<readonly ValidationError.WithoutFieldTree[]>;
+    /** The text in the input: the formatted value, or what the user is typing. */
+    readonly text: WritableSignal<string>;
+}
+/**
+ * The typed-input pipeline of the date, time and date-time pickers. Call it in an injection context: the errors are
+ * reported to the form field (signal forms, `ngModel` or a reactive form control) bound to the picker.
+ */
+declare function createTypedDateInput(options: TypedDateInputOptions): TypedDateInput;
+
+export { CalendarService, DateInputPrefixTemplateDirective, TimeLimiterPipe, TimeSelectorService, checkTypedDate, createTypedDateInput, datePopupThemeVariants, generateHourSet, generateMinuteSet, generateSecondSet, getLocaleHourFormat, isDateDisabled, parseTypedDate, typedDateParseError };
+export type { CalendarView, DateDisabledType, DatePopupVariantInput, DatePopupVariantProps, DisabledDateError, HourFormat, Meridiem, TimeUnit, TypedDateConstraints, TypedDateInput, TypedDateInputOptions, TypedDateParseError, TypedDateUnit };

package/types/nanahoshi-mona-ui-date-picker.d.ts

@@ -5,7 +5,7 @@ import { TemplateRef } from '@angular/core';
 import { FormValueControl } from '@angular/forms/signals';
 import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, FirstDayOfWeek } from '@nanahoshi/mona-ui/calendar';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
-import { DatePopupVariantInput, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
+import { DatePopupVariantInput, TypedDateInput, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownPopupInput } from '@nanahoshi/mona-ui/dropdowns';
 import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
@@ -27,7 +27,6 @@ type DatePickerVariantInput = Omit<DatePickerBaseVariantInput, "focused">;
 declare class DatePickerComponent implements FormValueControl<Date | null>, DropdownPopupInput, DatePickerVariantInput, DatePopupVariantInput {
     #private;
     protected readonly baseClass: _angular_core.Signal<string>;
-    protected readonly currentDateString: _angular_core.WritableSignal<string>;
     protected readonly decadeCellTemplate: _angular_core.Signal<CalendarDecadeCellTemplateDirective | undefined>;
     protected readonly effectiveFormat: _angular_core.Signal<string>;
     protected readonly expanded: _angular_core.Signal<boolean>;
@@ -35,12 +34,29 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
     protected readonly invalidState: _angular_core.Signal<boolean>;
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaDatePickerMessages>;
     protected readonly monthCellTemplate: _angular_core.Signal<CalendarMonthCellTemplateDirective | undefined>;
-    protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
     protected readonly pickerPopupClass: _angular_core.Signal<string>;
     protected readonly popupId: string;
     protected readonly popupTemplate: _angular_core.Signal<TemplateRef<unknown>>;
     protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Set in the constructor, which runs after the `value` model it writes to exists. */
+    protected readonly typedInput: TypedDateInput;
     protected readonly yearCellTemplate: _angular_core.Signal<CalendarYearCellTemplateDirective | undefined>;
+    /**
+     * @description Id of an element that describes the input, such as a hint or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name of the input. Prefer a visible label, linked through {@link inputId} or
+     * {@link ariaLabelledBy}; the placeholder is not a label.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Id of the element that labels the input.
+     * @default ""
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
     /**
      * @description Emits when the popup is about to close. This event is preventable.
      */
@@ -51,11 +67,13 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
     readonly closed: _angular_core.OutputEmitterRef<void>;
     /**
      * @description Sets the disabled state of the date picker.
+     * @default false
      */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @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.
      */
     readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
     /**
@@ -65,21 +83,28 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
     readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek | null>;
     /**
      * @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
      */
     readonly format: _angular_core.InputSignal<string | null>;
+    /**
+     * @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
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @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
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @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.
      */
     readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
-     * @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.
      */
     readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
@@ -100,44 +125,46 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @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 ""
      */
     readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
     /**
-     * @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 ""
      */
     readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
     /**
      * @description Sets the readonly state of the date picker.
+     * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description When true, the input is readonly but the calendar button remains enabled.
      * @default false
      */
-    readonly readonlyInput: _angular_core.InputSignal<boolean>;
+    readonly readonlyInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @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
      */
-    readonly required: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the border radius of the date picker.
      */
     readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
     /**
-     * @description Sets the visibility of the clear button.
+     * @description Sets the visibility of the clear button. Clearing empties the value at once.
+     * @default false
      */
-    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    readonly showClearButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the size of the date picker.
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
     /**
-     * @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.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
@@ -146,10 +173,11 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly userClass: _angular_core.InputSignal<string>;
     /**
-     * @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
      */
     readonly value: _angular_core.ModelSignal<Date | null>;
@@ -157,25 +185,25 @@ declare class DatePickerComponent implements FormValueControl<Date | null>, Drop
      * @description Enables the display of week numbers in the calendar.
      * @default false
      */
-    readonly weekNumber: _angular_core.InputSignal<boolean>;
+    readonly weekNumber: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
+    /**
+     * 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?: FocusOptions): void;
     protected onCalendarValueChange(date: Date | Date[] | null): void;
-    protected onDateInputBlur(): void;
     protected onDateInputButtonClick(): void;
-    protected onDateStringEdit(dateString: string): void;
+    protected onFocusIn(event: FocusEvent): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onInputBlur(): void;
+    protected onKeydown(event: KeyboardEvent): void;
     private closePopup;
-    private compareDatesEqual;
-    private dateStringEquals;
-    private handleKeydown;
-    private isDateDisabledByInput;
     private openPopup;
-    private setCurrentDate;
-    private setKeyboardSubscriptions;
-    private setPopupCloseSubscriptions;
-    private setSubscriptions;
+    private setCalendarKeyboardSubscription;
+    private setPopupCloseSubscription;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "mona-date-picker", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "mona-date-picker", never, { "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "popupClass": { "alias": "popupClass"; "required": false; "isSignal": true; }; "popupHeight": { "alias": "popupHeight"; "required": false; "isSignal": true; }; "popupWidth": { "alias": "popupWidth"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "readonlyInput": { "alias": "readonlyInput"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "weekNumber": { "alias": "weekNumber"; "required": false; "isSignal": true; }; }, { "close": "close"; "closed": "closed"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "prefixTemplate", "yearCellTemplate"], never, true, [{ directive: typeof i1.DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare const DATE_PICKER_DEFAULT_MESSAGES: MonaDatePickerMessages;