@nanahoshi/mona-ui 0.24.4 → 0.24.6

package/types/nanahoshi-mona-ui-datetime-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 { DateDisabledType, HourFormat } from '@nanahoshi/mona-ui/date-input';
+import { HourFormat, TypedDateInput, DateDisabledType } from '@nanahoshi/mona-ui/date-input';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownPopupInput } from '@nanahoshi/mona-ui/dropdowns';
 import { AttributeConfig, VariantInputs } from '@nanahoshi/mona-ui/internal';
@@ -20,10 +20,13 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     #private;
     protected readonly activeView: _angular_core.WritableSignal<ActiveView>;
     protected readonly baseClass: _angular_core.Signal<string>;
-    protected readonly currentDateString: _angular_core.WritableSignal<string>;
+    protected readonly dateTabId: string;
     protected readonly decadeCellTemplate: _angular_core.Signal<CalendarDecadeCellTemplateDirective | undefined>;
     protected readonly effectiveFormat: _angular_core.Signal<string>;
+    protected readonly effectiveHourFormat: _angular_core.Signal<HourFormat>;
     protected readonly expanded: _angular_core.Signal<boolean>;
+    /** Whether the view shown next takes focus: yes after picking a day, no when a tab is chosen. */
+    protected readonly focusViewOnMount: _angular_core.WritableSignal<boolean>;
     protected readonly footerClass: _angular_core.Signal<string>;
     protected readonly headerClass: _angular_core.Signal<string>;
     protected readonly inputAttributes: _angular_core.Signal<AttributeConfig>;
@@ -32,13 +35,33 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     protected readonly messages: _angular_core.Signal<_nanahoshi_mona_ui_i18n.MonaDateTimePickerMessages>;
     protected readonly monthCellTemplate: _angular_core.Signal<CalendarMonthCellTemplateDirective | undefined>;
     protected readonly navigatedDate: _angular_core.WritableSignal<Date>;
+    protected readonly panelId: string;
     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>;
     protected readonly timePickerMax: _angular_core.Signal<Date | null>;
     protected readonly timePickerMin: _angular_core.Signal<Date | null>;
+    protected readonly timeTabId: string;
+    /** 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.
      */
@@ -49,11 +72,13 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
     readonly closed: _angular_core.OutputEmitterRef<void>;
     /**
      * @description Sets the disabled state of the date time picker.
+     * @default false
      */
-    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the disabled dates of the date time picker.
-     * Accepts either an iterable of Date objects or a predicate function.
+     * Accepts either an iterable of Date objects or a predicate function. Typing a disabled date is reported as a
+     * `disabledDate` error instead of setting the value.
      */
     readonly disabledDates: _angular_core.InputSignal<DateDisabledType>;
     /**
@@ -62,32 +87,41 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     readonly firstDay: _angular_core.InputSignal<FirstDayOfWeek | null>;
     /**
-     * @description Sets the date format of the date time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+     * @description Sets the date format of the date time picker. If not specified, derives from the active locale,
+     * hourFormat, and showSeconds. Typed text is also accepted with one-digit parts and a two-digit year.
      * @default null
      */
     readonly format: _angular_core.InputSignal<string | null>;
     /**
-     * @description Sets the hour format of the time picker.
-     * @default 24
+     * @description Sets the hour format of the date time picker. When null, the active locale's clock is used: 12-hour
+     * for en-US, 24-hour for de-DE.
+     * @default null
      */
-    readonly hourFormat: _angular_core.InputSignal<HourFormat>;
+    readonly hourFormat: _angular_core.InputSignal<HourFormat | null>;
     /**
      * @description Sets the hour step of the time picker.
      * @default 1
      */
     readonly hourStep: _angular_core.InputSignal<number>;
+    /**
+     * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+     * date time picker. A unique id is generated when it isn't set.
+     * @default generated
+     */
+    readonly inputId: _angular_core.InputSignal<string>;
     /**
      * @description Marks the date time picker as invalid. When bound to a signal form field via `[formField]`,
      * this is written by the `FormField` directive.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * @description Sets the maximum date of the date time picker.
+     * @description Sets the maximum date of the date time picker. A later typed date is reported as a `maxDate` error.
      */
     readonly max: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
-     * @description Sets the minimum date of the date time picker.
+     * @description Sets the minimum date of the date time picker. An earlier typed date is reported as a `minDate`
+     * error.
      */
     readonly min: _angular_core.InputSignalWithTransform<Date | undefined, unknown>;
     /**
@@ -113,30 +147,31 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     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 not set, the popup fits its content.
+     * @default undefined
      */
     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 not set, the popup is at least as wide as the input.
+     * @default undefined
      */
     readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
     /**
      * @description Sets the readonly state of the date time 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 popup 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 time 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 time picker.
      */
@@ -147,19 +182,21 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      */
     readonly secondStep: _angular_core.InputSignal<number>;
     /**
-     * @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 visibility of the second selector.
+     * @default false
      */
-    readonly showSeconds: _angular_core.InputSignal<boolean>;
+    readonly showSeconds: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Sets the size of the date time picker.
      */
     readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
     /**
-     * @description Emitted when the date time picker is interacted with via blur, selection, or clear.
+     * @description Emitted when focus leaves the date time picker and its popup.
      * The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
@@ -168,10 +205,11 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      * 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 time value.
+     * @description Two-way bindable current date time value. Typed text is written on Enter and when the input loses
+     * focus; text that isn't a valid date and time keeps the previous value and marks the field invalid.
      * @default null
      */
     readonly value: _angular_core.ModelSignal<Date | null>;
@@ -179,30 +217,33 @@ declare class DateTimePickerComponent implements FormValueControl<Date | null>,
      * @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 onCancelClick(): 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;
     protected onSetDateClick(): void;
+    /** Arrow keys, Home and End move between the Date and Time tabs, as in the APG tabs pattern. */
+    protected onTabKeydown(event: KeyboardEvent): void;
     protected onTimeSelectorValueChange(date: Date | null): void;
+    /** Shows a view from its tab; focus stays on the tab, as in the APG tabs pattern. */
+    protected selectTab(view: ActiveView): void;
     private closePopup;
-    private compareDatesEqual;
-    private dateStringEquals;
-    private handleKeydown;
-    private isDateDisabledByInput;
     private openPopup;
-    private setCurrentDate;
-    private setKeyboardSubscriptions;
-    private setPopupCloseSubscriptions;
-    private setSubscriptions;
-    private updateCurrentDateString;
+    private setPopupCloseSubscription;
+    private setPopupKeyboardSubscription;
     private updateDateIfNotInRange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateTimePickerComponent, "mona-datetime-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; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "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; }; "minuteStep": { "alias": "minuteStep"; "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; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "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<DateTimePickerComponent, "mona-datetime-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; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "hourStep": { "alias": "hourStep"; "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; }; "minuteStep": { "alias": "minuteStep"; "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; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "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 DATETIME_PICKER_DEFAULT_MESSAGES: MonaDateTimePickerMessages;

package/types/nanahoshi-mona-ui-dropdown-list.d.ts

@@ -39,6 +39,7 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     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 effectiveAriaLabel: _angular_core.Signal<string>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
@@ -59,6 +60,11 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     protected readonly valueContainerClass: _angular_core.Signal<string>;
     protected readonly valueTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * @description ID of an element that describes the dropdown list, such as help text or an error message.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     /**
      * @description Accessible name for the host element. Describe what the component represents.
      * When empty, falls back to the placeholder text.
@@ -87,22 +93,23 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @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 Marks the field as invalid. Set automatically by the `FormField` directive when bound via `[formField]`.
      * @default false
      */
-    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * @description Predicate or field name used to determine whether an individual 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.
      */
@@ -122,7 +129,8 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      */
     readonly popupClass: _angular_core.InputSignal<string>;
     /**
-     * @description 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>;
@@ -135,12 +143,12 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @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 Marks the field as required for form validation.
      * @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"
@@ -150,7 +158,7 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      * @description Shows a clear button that resets the selected value when clicked.
      * @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"
@@ -163,15 +171,15 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      */
     readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData, string>>;
     /**
-     * @description Emitted when the control is interacted with via blur, selection, or clear.
-     * The `FormField` directive listens to this to mark the field as touched.
+     * @description Emitted when focus leaves the dropdown list. Moving between it, its clear button and its popup
+     * doesn't count. The `FormField` directive listens to this to mark the field as touched.
      */
     readonly touch: _angular_core.OutputEmitterRef<void>;
     /**
      * @description Marks the control as touched. Set automatically by the `FormField` directive when bound via `[formField]`.
      * @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 ""
@@ -202,11 +210,15 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
      *
      * @default false
      */
-    readonly valuePrimitive: _angular_core.InputSignal<boolean>;
+    readonly valuePrimitive: _angular_core.InputSignalWithTransform<boolean, unknown>;
     constructor();
-    focus(): void;
+    /**
+     * @description Moves focus to the dropdown list.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options?: FocusOptions): void;
     setValue(value: TValue): void;
-    protected onBlur(event?: FocusEvent): void;
+    protected onFocusOut(event: FocusEvent): void;
     protected onItemSelect(event: SelectionChangeEvent<TData>): void;
     protected onPopupPointerDown(event: PointerEvent): void;
     protected onValueClear(event: MouseEvent | KeyboardEvent): void;
@@ -216,17 +228,19 @@ declare class DropdownListComponent<TData = unknown, TValue = TData> implements
     private handleEnterKey;
     private handleHomeEndKeys;
     private initialize;
+    private pushTypeaheadKey;
     private scrollToSelectedItem;
     private setArrowKeyNavigationSubscription;
     private setFilterChangeSubscription;
     private setKeydownSubscription;
     private setPopupCloseSubscriptions;
     private setSubscriptions;
+    private setTypeaheadSpaceSubscription;
     private setTypeaheadSubscription;
     private synchronizeSelection;
     private updateValue;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownListComponent<any, any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", never, { "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"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "valueTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<any, any>, "mona-dropdown-list", 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; }; "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"; "open": "open"; "opened": "opened"; "touch": "touch"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate", "valueTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownLiveRegionDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class DropdownListValueTemplateDirective {

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InputSignal, InjectionToken, OutputEmitterRef, TemplateRef } from '@angular/core';
+import { InjectionToken, InputSignal, OutputEmitterRef, Signal, TemplateRef } from '@angular/core';
 import { Predicate, Selector } from '@mirei/ts-collections';
 import { ListSizeInputType, GroupableOptions, ListItem } from '@nanahoshi/mona-ui/internal/list';
 import { PopupCloseEvent, PopupRef, PopupSettings } from '@nanahoshi/mona-ui/popup';
@@ -20,30 +20,34 @@ interface DropdownDataInput<TData> {
     readonly textField: InputSignal<DropdownFieldSelectorType<TData, string>>;
     readonly valueField: InputSignal<DropdownFieldSelectorType<TData, unknown>>;
 }
+declare const DROPDOWN_DATA_INPUT_TOKEN: InjectionToken<DropdownDataInput<unknown>>;
+/**
+ * @deprecated Use {@link DROPDOWN_DATA_INPUT_TOKEN}.
+ */
 declare const DropdownDataInputToken: InjectionToken<DropdownDataInput<unknown>>;
 
 interface DropdownPopupInput {
     readonly close: OutputEmitterRef<PopupCloseEvent>;
     readonly closed: OutputEmitterRef<void>;
-    readonly disabled: InputSignal<boolean>;
+    readonly disabled: Signal<boolean>;
     readonly open: OutputEmitterRef<PreventableEvent>;
     readonly opened: OutputEmitterRef<void>;
     readonly popupHeight: InputSignal<ListSizeInputType>;
     readonly popupWidth: InputSignal<ListSizeInputType>;
-    readonly readonly: InputSignal<boolean>;
+    readonly readonly: Signal<boolean>;
     readonly touch: OutputEmitterRef<void>;
 }
 declare const DROPDOWN_POPUP_INPUT_TOKEN: InjectionToken<DropdownPopupInput>;
 
-declare class DropdownFilterableDirective<TData> {
+declare class DropdownFilterableDirective {
     #private;
     readonly filter: i0.InputSignal<string>;
     readonly filterChange: i0.OutputEmitterRef<FilterChangeEvent>;
     readonly filterPlaceholder: i0.InputSignal<string>;
     readonly options: i0.InputSignal<"" | Partial<FilterableOptions>>;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFilterableDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownFilterableDirective<any>, "        mona-auto-complete[monaDropDownFilterable],        mona-dropdown-list[monaDropDownFilterable],        mona-combo-box[monaDropDownFilterable],        mona-multi-select[monaDropDownFilterable]    ", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownFilterable"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFilterableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownFilterableDirective, "        mona-auto-complete[monaDropDownFilterable],        mona-dropdown-list[monaDropDownFilterable],        mona-combo-box[monaDropDownFilterable],        mona-multi-select[monaDropDownFilterable]    ", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownFilterable"; "required": false; "isSignal": true; }; }, { "filterChange": "filterChange"; }, never, never, true, never>;
 }
 
 declare class DropdownFooterTemplateDirective {
@@ -58,11 +62,11 @@ declare class DropdownGroupHeaderTemplateDirective {
 
 declare class DropdownGroupableDirective<TData> {
     #private;
-    readonly groupBy: i0.InputSignal<string | Selector<TData, any> | null | undefined>;
-    readonly options: i0.InputSignal<"" | GroupableOptions<TData, any>>;
+    readonly groupBy: i0.InputSignal<string | Selector<TData, unknown> | null | undefined>;
+    readonly options: i0.InputSignal<"" | GroupableOptions<TData, unknown>>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownGroupableDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownGroupableDirective<any>, "        mona-auto-complete[monaDropDownGroupable],        mona-combo-box[monaDropDownGroupable],        mona-dropdown-list[monaDropDownGroupable],        mona-multi-select[monaDropDownGroupable],    ", never, { "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownGroupable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownGroupableDirective<any>, "        mona-auto-complete[monaDropDownGroupable],        mona-combo-box[monaDropDownGroupable],        mona-dropdown-list[monaDropDownGroupable],        mona-multi-select[monaDropDownGroupable]    ", never, { "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "options": { "alias": "monaDropDownGroupable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DropdownHeaderTemplateDirective {
@@ -80,12 +84,12 @@ declare class DropdownNoDataTemplateDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownNoDataTemplateDirective, "        ng-template[monaDropDownNoDataTemplate],        ng-template[monaAutoCompleteNoDataTemplate],        ng-template[monaDropDownListNoDataTemplate],        ng-template[monaDropDownTreeNoDataTemplate],        ng-template[monaComboBoxNoDataTemplate],        ng-template[monaMultiSelectNoDataTemplate]    ", never, {}, {}, never, never, true, never>;
 }
 
-declare class DropdownVirtualScrollDirective<TData> {
+declare class DropdownVirtualScrollDirective {
     #private;
     readonly options: i0.InputSignal<"" | Partial<VirtualScrollOptions>>;
     constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownVirtualScrollDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownVirtualScrollDirective<any>, "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", never, { "options": { "alias": "monaDropDownVirtualScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownVirtualScrollDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownVirtualScrollDirective, "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", never, { "options": { "alias": "monaDropDownVirtualScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class DropdownDataHandlerDirective {
@@ -123,12 +127,19 @@ declare class DropdownListPopupHandlerDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownListPopupHandlerDirective, "[monaDropdownListPopupHandler]", never, {}, {}, never, never, true, [{ directive: typeof DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
 }
 
+/**
+ * Announces how many results a dropdown shows after its list is filtered, or after its items change, while the
+ * popup is open ("3 results available", "No results found").
+ *
+ * The announcement goes through the CDK `LiveAnnouncer`, whose live region lives at the end of the document, so it
+ * never becomes part of the combobox's content. The highlighted option isn't announced here:
+ * `aria-activedescendant` already does that.
+ */
 declare class DropdownLiveRegionDirective {
     #private;
-    protected readonly liveRegionText: i0.Signal<string>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownLiveRegionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownLiveRegionDirective, "span[monaDropdownLiveRegion]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownLiveRegionDirective, "[monaDropdownLiveRegion]", never, {}, {}, never, never, true, never>;
 }
 
 declare class DropdownPrefixTemplateDirective {
@@ -165,12 +176,12 @@ declare class DropdownService {
     static ɵprov: i0.ɵɵInjectableDeclaration<DropdownService>;
 }
 
-declare class DropdownListService {
+declare class DropdownListService<TData = unknown> {
     readonly navigate$: Subject<{
-        item: ListItem<any>;
+        item: ListItem<TData>;
     }>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownListService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownListService<any>>;
 }
 
 declare const dropdownPopupThemeVariants: (props?: ({
@@ -182,5 +193,5 @@ type DropdownPopupVariantInput = VariantInputs<DropdownPopupVariantProps>;
 
 declare const DROPDOWNS_DEFAULT_MESSAGES: MonaDropdownsMessages;
 
-export { DROPDOWNS_DEFAULT_MESSAGES, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
+export { DROPDOWNS_DEFAULT_MESSAGES, DROPDOWN_DATA_INPUT_TOKEN, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
 export type { DropdownDataInput, DropdownFieldPredicateType, DropdownFieldSelectorType, DropdownPopupInput, DropdownPopupVariantInput, DropdownPopupVariantProps };

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

@@ -289,6 +289,7 @@ interface MonaListBoxMessages {
 interface MonaMultiSelectMessages {
     readonly clear: string;
     readonly itemsCount: (count: number) => string;
+    readonly removeMoreItems: (count: number) => string;
 }
 
 interface MonaNotificationMessages {

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

@@ -159,7 +159,9 @@ interface TypeaheadModifiers {
  * Any single letter or digit in any script counts, plus space, `-` and `_`.
  */
 declare const isTypeaheadKey: (key: string, modifiers?: TypeaheadModifiers) => boolean;
+/** How long typeahead waits after the last key before it starts a new search, in milliseconds. */
+declare const TYPEAHEAD_RESET_DELAY = 200;
 declare const setupTypeahead: (typeaheadKey$: Observable<string>) => Observable<string>;
 
-export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, createElementControlId, focusCanReturn, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
+export { AttributeBinderDirective, NavigationKeys, NavigationKeysList, TYPEAHEAD_RESET_DELAY, createElementControlId, focusCanReturn, focusElement, hex2rgba, hsla2hsva, hsva2rgba, isNavigationKey, isTypeaheadKey, isValidHex, isValidHsla, isValidRgb, restoreOverlayScroll, rgba2hex, rgba2hsla, rgba2hsva, rxFromResize, rxTimeout, setWindowStyles, setupTypeahead, string2Hsla, string2rgba, themeControlBackdropClasses, themeControlSurfaceClasses, themeOverlayBackdropClasses, themeOverlaySurfaceClasses, themeRaisedBackdropClasses, themeRaisedSurfaceClasses, toCssValue };
 export type { Action, AttributeConfig, Channel, ColorScheme, HSL, HSLA, HSV, HSVA, HSVChannel, RGB, RGBA, RGBAChannel, RGBChannel, TypeaheadModifiers, VariantInputs, WindowStyleSettings };

package/types/nanahoshi-mona-ui-locales-ar-sa.d.ts

@@ -255,6 +255,7 @@ declare const MONA_AR_SA_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-de-de.d.ts

@@ -255,6 +255,7 @@ declare const MONA_DE_DE_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-es-es.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ES_ES_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-fr-fr.d.ts

@@ -255,6 +255,7 @@ declare const MONA_FR_FR_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-id-id.d.ts

@@ -255,6 +255,7 @@ declare const MONA_ID_ID_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-it-it.d.ts

@@ -255,6 +255,7 @@ declare const MONA_IT_IT_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;

package/types/nanahoshi-mona-ui-locales-ja-jp.d.ts

@@ -255,6 +255,7 @@ declare const MONA_JA_JP_LOCALE: {
         multiSelect: {
             clear: string;
             itemsCount: (count: number) => string;
+            removeMoreItems: (count: number) => string;
         };
         notification: {
             close: string;