@nanahoshi/mona-ui 0.24.5 → 0.24.6

package/types/nanahoshi-mona-ui-calendar.d.ts

@@ -122,6 +122,11 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly headerMonthYear: _angular_core.Signal<string>;
     protected readonly headerYear: _angular_core.Signal<string>;
     protected readonly invalidState: _angular_core.Signal<boolean>;
+    /**
+     * Whether a day can't be picked: outside `minDate`/`maxDate` or in `disabledDates`. An iterable of disabled
+     * dates is turned into a set of day keys once, so each of the 42 cells answers in constant time.
+     */
+    protected readonly isDayUnavailable: _angular_core.Signal<(date: Date) => boolean>;
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaCalendarMessages>;
     protected readonly monthBounds: _angular_core.Signal<{
         start: Date;
@@ -138,9 +143,13 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     protected readonly prevButtonLabel: _angular_core.Signal<string>;
     protected readonly rangePreviewDate: _angular_core.WritableSignal<Date | null>;
     protected readonly rangePreviewDates: _angular_core.Signal<Date[]>;
+    protected readonly rangePreviewKeys: _angular_core.Signal<ReadonlySet<string>>;
     protected readonly selectedDates: _angular_core.WritableSignal<Date[]>;
-    protected readonly timezone: string;
+    protected readonly selectedKeys: _angular_core.Signal<ReadonlySet<string>>;
+    /** Today at midnight. Refreshed when focus enters the calendar, so a page left open overnight moves on. */
+    protected readonly today: _angular_core.WritableSignal<Date>;
     protected readonly todayButtonLabel: _angular_core.Signal<string>;
+    protected readonly todayUnavailable: _angular_core.Signal<boolean>;
     protected readonly viewSwitchButtonLabel: _angular_core.Signal<string>;
     protected readonly weekdays: _angular_core.Signal<{
         display: string;
@@ -153,7 +162,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     /**
      * @description Sets the disabled state of the calendar.
      */
-    readonly disabled: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the disabled dates of the calendar.
      * Accepts either an iterable of Date objects or a predicate function.
@@ -164,12 +173,18 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * @default null
      */
     readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek | null>;
+    /**
+     * @description Moves focus to the active day when the calendar first renders. An inline calendar on a page
+     * should leave focus where it is; a calendar that opens in a popup sets this so focus moves into it.
+     * @default false
+     */
+    readonly focusOnMount: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Marks the calendar 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 that can be selected.
      */
@@ -182,13 +197,13 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * @description Sets the readonly state of the calendar.
      * @default false
      */
-    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets whether the calendar is required. 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 calendar.
      * @default "medium"
@@ -200,8 +215,8 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      */
     readonly selection: _angular_core.InputSignal<CalendarSelection>;
     /**
-     * @description Emitted when the calendar value is changed by user interaction.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the calendar, as a native input is touched on blur. Moving between
+     * its buttons and days doesn't count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
@@ -209,13 +224,14 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly touched: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Adds custom CSS classes to the calendar host element.
      */
     readonly userClass: _angular_core.InputSignal<string>;
     /**
-     * @description The current value of the calendar.
+     * @description The current value of the calendar: a `Date` in single selection, the selected dates in multiple
+     * selection, and `[start, end]` in range selection. A range is written once both ends are picked.
      * @default null
      */
     readonly value: _angular_core.ModelSignal<Date | Date[] | null>;
@@ -223,18 +239,20 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
      * @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();
     protected formatInteger(value: number): string;
     protected getWeekNumber(date: Date): number;
     protected onDayClick(date: Date, event: MouseEvent): void;
     protected onDayPointerEnter(date: Date): void;
+    protected onFocusOut(event: FocusEvent): void;
     protected onMonthClick(month: number): void;
     protected onMonthGridPointerLeave(): void;
     protected onNavigationClick(direction: "prev" | "next"): void;
     protected onTodayButtonClick(): void;
     protected onViewChangeClick(view: CalendarView): void;
     protected onYearClick(year: number): void;
+    protected refreshToday(): void;
     private clearPendingRange;
     private commitUserSelection;
     private extendSelection;
@@ -251,6 +269,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     private horizontalPeriodDirection;
     private isDateDisabled;
     private isEmptyValue;
+    private isOutOfRange;
     private navigateByDaysOrCells;
     private navigateByPeriod;
     private navigateByWeeksOrRows;
@@ -266,7 +285,7 @@ declare class CalendarComponent implements CalendarVariantInput, FormValueContro
     private switchToUpperView;
     private toggleFocusedDateInSelection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalendarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "mona-calendar", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "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; }; "selection": { "alias": "selection"; "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; }; }, { "disabled": "disabledChange"; "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "yearCellTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalendarComponent, "mona-calendar", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "firstDay": { "alias": "firstDay"; "required": false; "isSignal": true; }; "focusOnMount": { "alias": "focusOnMount"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "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; }; "selection": { "alias": "selection"; "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; }; }, { "touch": "touch"; "value": "valueChange"; }, ["decadeCellTemplate", "monthCellTemplate", "yearCellTemplate"], never, true, never>;
 }
 
 declare const CALENDAR_DEFAULT_MESSAGES: MonaCalendarMessages;

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;