@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,159 @@
+import * as _nanahoshi_mona_ui_popup_menu from '@nanahoshi/mona-ui/popup-menu';
+import { PopupMenuComponent, PopupMenuItemClickEvent, PopupMenuCheckboxItemComponent, PopupMenuOrigin, PopupMenuGroupComponent, PopupMenuItemComponent, PopupMenuRadioGroupComponent, PopupMenuRadioItemComponent, PopupMenuSeparatorComponent, PopupMenuGroupTemplateDirective, PopupMenuTemplateOrigin, PopupMenuIconTemplateDirective, PopupMenuShortcutTemplateDirective, PopupMenuTextTemplateDirective } from '@nanahoshi/mona-ui/popup-menu';
+import * as i0 from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { ButtonVariantsInput } from '@nanahoshi/mona-ui/button';
+
+type DropdownButtonVariantInputs = Omit<ButtonVariantsInput, "selected">;
+
+declare class DropdownButtonComponent implements DropdownButtonVariantInputs {
+    #private;
+    private readonly menuItemComponents;
+    protected readonly buttonRef: i0.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    protected readonly dropdownButtonAriaLabel: i0.Signal<string>;
+    protected readonly isMenuOpen: i0.WritableSignal<boolean>;
+    protected readonly menuId: string;
+    protected readonly groupTemplate: i0.Signal<TemplateRef<any> | undefined>;
+    protected readonly menuItemIconTemplate: i0.Signal<TemplateRef<any> | undefined>;
+    protected readonly menuItems: i0.Signal<_nanahoshi_mona_ui_popup_menu.PopupMenuItem[]>;
+    protected readonly menuItemShortcutTemplate: i0.Signal<TemplateRef<any> | undefined>;
+    protected readonly menuItemTextTemplate: i0.Signal<TemplateRef<any> | undefined>;
+    protected readonly popupMenuRef: i0.Signal<PopupMenuComponent | undefined>;
+    protected readonly textTemplate: i0.Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Accessible name for the dropdown button.
+     * Falls back to `"{text} dropdown button"` when empty; provide an explicit value when no visible text is present.
+     * @default ""
+     */
+    readonly ariaLabel: i0.InputSignal<string>;
+    /**
+     * @description ID of an external element that provides the accessible name for the dropdown button.
+     * Takes precedence over `ariaLabel` when both are set.
+     * @default ""
+     */
+    readonly ariaLabelledby: i0.InputSignal<string>;
+    /**
+     * @description Renders the button as a square for icon-only usage, removing horizontal text padding.
+     * Set `ariaLabel` when no visible text is present to ensure an accessible name.
+     * @default false
+     */
+    readonly iconOnly: i0.InputSignal<boolean>;
+    /**
+     * @description Renders the button with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: i0.InputSignal<boolean>;
+    /**
+     * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+     * @default false
+     */
+    readonly loading: i0.InputSignal<boolean>;
+    /**
+     * @description Visual style preset applied to the button.
+     * @default "default"
+     */
+    readonly look: i0.InputSignal<"default" | "primary" | "success" | "error" | "warning" | "info" | "outline" | "secondary" | "ghost" | "link" | "clear" | null | undefined>;
+    /**
+     * @description Emitted when a menu item in the dropdown menu is clicked.
+     */
+    readonly menuItemClick: i0.OutputEmitterRef<PopupMenuItemClickEvent>;
+    /**
+     * @description Border-radius preset applied to the button.
+     * @default "medium"
+     */
+    readonly rounded: i0.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Size preset controlling the button's dimensions.
+     * @default "medium"
+     */
+    readonly size: i0.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Primary text content displayed inside the dropdown button.
+     * Passed as `$implicit` to a `monaDropdownButtonTextTemplate` when one is provided.
+     * @default ""
+     */
+    readonly text: i0.InputSignal<string>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: i0.InputSignal<string>;
+    constructor();
+    protected onMenuClose(): void;
+    protected onMenuItemClick(event: PopupMenuItemClickEvent): void;
+    protected onMenuOpen(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonComponent, "mona-dropdown-button", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "menuItemClick": "menuItemClick"; }, ["menuItemComponents", "groupTemplate", "menuItemIconTemplate", "menuItemShortcutTemplate", "menuItemTextTemplate", "textTemplate"], never, true, never>;
+}
+
+declare class DropdownButtonCheckboxItemComponent extends PopupMenuCheckboxItemComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonCheckboxItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonCheckboxItemComponent, "mona-dropdown-button-checkbox-item", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonGroupComponent extends PopupMenuGroupComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonGroupComponent, "mona-dropdown-button-group", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonItemComponent extends PopupMenuItemComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonItemComponent, "mona-dropdown-button-item", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonRadioGroupComponent extends PopupMenuRadioGroupComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonRadioGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonRadioGroupComponent, "mona-dropdown-button-radio-group", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonRadioItemComponent extends PopupMenuRadioItemComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonRadioItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonRadioItemComponent, "mona-dropdown-button-radio-item", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonSeparatorComponent extends PopupMenuSeparatorComponent {
+    readonly origin = PopupMenuOrigin.DropdownButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonSeparatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownButtonSeparatorComponent, "mona-dropdown-button-separator", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonMenuGroupTemplateDirective extends PopupMenuGroupTemplateDirective {
+    readonly origin = PopupMenuTemplateOrigin.DropdownButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonMenuGroupTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownButtonMenuGroupTemplateDirective, "ng-template[monaDropdownButtonMenuGroupTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonMenuItemIconTemplateDirective extends PopupMenuIconTemplateDirective {
+    readonly origin = PopupMenuTemplateOrigin.DropdownButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonMenuItemIconTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownButtonMenuItemIconTemplateDirective, "ng-template[monaDropdownButtonMenuItemIconTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonMenuItemShortcutTemplateDirective extends PopupMenuShortcutTemplateDirective {
+    readonly origin = PopupMenuTemplateOrigin.DropdownButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonMenuItemShortcutTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownButtonMenuItemShortcutTemplateDirective, "ng-template[monaDropdownButtonMenuItemShortcutTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonMenuItemTextTemplateDirective extends PopupMenuTextTemplateDirective {
+    readonly origin = PopupMenuTemplateOrigin.DropdownButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonMenuItemTextTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownButtonMenuItemTextTemplateDirective, "ng-template[monaDropdownButtonMenuItemTextTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownButtonTextTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonTextTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownButtonTextTemplateDirective, "ng-template[monaDropdownButtonTextTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { DropdownButtonCheckboxItemComponent, DropdownButtonComponent, DropdownButtonGroupComponent, DropdownButtonItemComponent, DropdownButtonMenuGroupTemplateDirective, DropdownButtonMenuItemIconTemplateDirective, DropdownButtonMenuItemShortcutTemplateDirective, DropdownButtonMenuItemTextTemplateDirective, DropdownButtonRadioGroupComponent, DropdownButtonRadioItemComponent, DropdownButtonSeparatorComponent, DropdownButtonTextTemplateDirective };

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

@@ -0,0 +1,219 @@
+import * as _nanahoshi_mona_ui_internal_list from '@nanahoshi/mona-ui/internal/list';
+import { SelectableOptions, ListSizeInputType, SelectionChangeEvent } from '@nanahoshi/mona-ui/internal/list';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import * as i1 from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownDataInput, DropdownPopupInput, DropdownFieldPredicateType, DropdownFieldSelectorType } from '@nanahoshi/mona-ui/dropdowns';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+declare const dropdownListAffixContainerThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dropdownListInputThemeVariants: (theme: ThemeStyle) => (props?: ({
+    disabled?: boolean | null | undefined;
+    expanded?: boolean | null | undefined;
+    hasPrefix?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const dropdownListValueContainerThemeVariants: (theme: ThemeStyle) => (props?: ({
+    hasTemplate?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropdownListInputVariantProps = VariantProps<ReturnType<typeof dropdownListInputThemeVariants>>;
+type DropdownListInputVariantInput = VariantInputs<DropdownListInputVariantProps>;
+type DropdownListAffixContainerVariantProps = VariantProps<ReturnType<typeof dropdownListAffixContainerThemeVariants>>;
+type DropdownListAffixContainerVariantInput = VariantInputs<DropdownListAffixContainerVariantProps>;
+type DropdownListValueContainerVariantProps = VariantProps<ReturnType<typeof dropdownListValueContainerThemeVariants>>;
+type DropdownListValueContainerVariantInput = VariantInputs<DropdownListValueContainerVariantProps>;
+type DropDownListVariantProps = DropdownListInputVariantProps & DropdownListAffixContainerVariantProps & DropdownListValueContainerVariantProps;
+type DropDownListVariantInput = Omit<DropdownListInputVariantInput, "expanded" | "hasPrefix" | "invalid"> & DropdownListAffixContainerVariantInput & Omit<DropdownListValueContainerVariantInput, "hasTemplate">;
+
+declare class DropdownListComponent<TData = unknown> implements FormValueControl<TData | null>, DropDownListVariantInput, DropdownDataInput<TData>, DropdownPopupInput {
+    #private;
+    protected readonly activeDescendant: _angular_core.Signal<string | null>;
+    protected readonly affixClass: _angular_core.Signal<string>;
+    protected readonly baseClass: _angular_core.Signal<string>;
+    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 itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly isEmpty: _angular_core.Signal<boolean>;
+    protected readonly listId: string;
+    protected readonly listPopupClass: _angular_core.Signal<string>;
+    protected readonly noDataTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly popupTemplate: _angular_core.Signal<TemplateRef<any>>;
+    protected readonly prefixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly selectableOptions: SelectableOptions;
+    protected readonly selectedDataItem: _angular_core.Signal<NonNullable<TData> | null>;
+    protected readonly selectedListItem: _angular_core.Signal<_nanahoshi_mona_ui_internal_list.ListItem<TData> | null>;
+    protected readonly valueContainerClass: _angular_core.Signal<string>;
+    protected readonly valueTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * @description Accessible name for the host element. Describe what the component represents.
+     * When empty, falls back to the placeholder text.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description ID of an external element that provides the accessible name for the host element.
+     * @default ""
+     */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Emitted when the popup is about to close. This event is preventable.
+     */
+    readonly close: _angular_core.OutputEmitterRef<PopupCloseEvent<unknown>>;
+    /**
+     * @description Emitted after the popup closes.
+     */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Collection of items to render.
+     * @default []
+     */
+    readonly data: _angular_core.InputSignal<Iterable<TData>>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * @description Predicate or field name used to determine whether an individual item is disabled.
+     * @default undefined
+     */
+    readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
+    /**
+     * @description Marks the field as invalid. Set automatically by the `FormField` directive when bound via `[formField]`.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+     * @default false
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the popup is about to open. This event is preventable.
+     */
+    readonly open: _angular_core.OutputEmitterRef<PreventableEvent<Event>>;
+    /**
+     * @description Emitted after the popup opens.
+     */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Placeholder text shown when no value is selected or entered.
+     * @default ""
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes applied to the popup element.
+     * @default ""
+     */
+    readonly popupClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Height of the popup element.
+     * @default null
+     */
+    readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Width of the popup element.
+     * @default null
+     */
+    readonly popupWidth: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Prevents value changes while preserving the component's visual state.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the field as required for form validation.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the component.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
+    /**
+     * @description Shows a clear button that resets the selected value when clicked.
+     * @default false
+     */
+    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Size preset controlling the component's dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description Property name or accessor used to derive the display text from a data item.
+     * If omitted, the item itself is used as the display text.
+     * @default undefined
+     */
+    readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData>>;
+    /**
+     * @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.
+     */
+    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>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Property name or accessor used to derive the value from a data item.
+     * If omitted, the item itself is used as the value.
+     * @default undefined
+     */
+    readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData>>;
+    /**
+     * @description Currently selected value, two-way bindable and compatible with Signal Forms via `[formField]`.
+     * When `valueField` is set, this may hold the primitive field value instead of the full data item.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<TData | null>;
+    constructor();
+    setValue(value: TData): void;
+    protected onBlur(): void;
+    protected onItemSelect(event: SelectionChangeEvent<TData>): void;
+    protected onValueClear(event: MouseEvent | KeyboardEvent): void;
+    private closePopup;
+    private cycleThroughMatchedItems;
+    focus(): void;
+    private handleEnterKey;
+    private handleHomeEndKeys;
+    private initialize;
+    private scrollToSelectedItem;
+    private setArrowKeyNavigationSubscription;
+    private setFilterChangeSubscription;
+    private setKeydownSubscription;
+    private setPopupCloseSubscriptions;
+    private setSubscriptions;
+    private setTypeaheadSubscription;
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownListComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownListComponent<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; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "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; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "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: {}; }]>;
+}
+
+declare class DropdownListValueTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownListValueTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DropdownListValueTemplateDirective, "ng-template[monaDropDownListValueTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { DropdownListComponent, DropdownListValueTemplateDirective };
+export type { DropDownListVariantProps };

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

@@ -0,0 +1,176 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InjectionToken, OutputEmitterRef, 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';
+import { PreventableEvent, FilterChangeEvent, FilterableOptions, VirtualScrollOptions } from '@nanahoshi/mona-ui/common';
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { Subject } from 'rxjs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+type DropdownFieldSelectorType<TData> = string | Selector<TData, string> | null | undefined;
+type DropdownFieldPredicateType<TData> = string | Predicate<TData> | null | undefined;
+
+interface DropdownDataInput<TData> {
+    readonly data: InputSignal<Iterable<TData>>;
+    readonly itemDisabled: InputSignal<DropdownFieldPredicateType<TData>>;
+    readonly textField: InputSignal<DropdownFieldSelectorType<TData>>;
+    readonly valueField: InputSignal<DropdownFieldSelectorType<TData>>;
+}
+declare const DropdownDataInputToken: InjectionToken<DropdownDataInput<unknown>>;
+
+interface DropdownPopupInput {
+    readonly close: OutputEmitterRef<PopupCloseEvent>;
+    readonly closed: OutputEmitterRef<void>;
+    readonly disabled: InputSignal<boolean>;
+    readonly open: OutputEmitterRef<PreventableEvent>;
+    readonly opened: OutputEmitterRef<void>;
+    readonly readonly: InputSignal<boolean>;
+    readonly popupHeight: InputSignal<ListSizeInputType>;
+    readonly popupWidth: InputSignal<ListSizeInputType>;
+}
+declare const DropdownPopupInputToken: InjectionToken<DropdownPopupInput>;
+
+declare class DropdownFilterableDirective<TData> {
+    #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>;
+}
+
+declare class DropdownFooterTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownFooterTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownFooterTemplateDirective, "        ng-template[monaDropDownFooterTemplate],        ng-template[monaAutoCompleteFooterTemplate],        ng-template[monaDropDownListFooterTemplate],        ng-template[monaDropDownTreeFooterTemplate],        ng-template[monaComboBoxFooterTemplate],        ng-template[monaMultiSelectFooterTemplate]    ", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownGroupHeaderTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownGroupHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownGroupHeaderTemplateDirective, "        ng-template[monaDropDownGroupHeaderTemplate],        ng-template[monaAutoCompleteGroupHeaderTemplate],        ng-template[monaDropDownListGroupHeaderTemplate],        ng-template[monaComboBoxGroupHeaderTemplate],        ng-template[monaMultiSelectGroupHeaderTemplate]  ", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownGroupableDirective<TData> {
+    #private;
+    readonly groupBy: i0.InputSignal<string | Selector<TData, any> | null | undefined>;
+    readonly options: i0.InputSignal<"" | GroupableOptions<TData, any>>;
+    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>;
+}
+
+declare class DropdownHeaderTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownHeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownHeaderTemplateDirective, "        ng-template[monaDropDownHeaderTemplate],        ng-template[monaAutoCompleteHeaderTemplate],        ng-template[monaDropDownListHeaderTemplate],        ng-template[monaDropDownTreeHeaderTemplate],        ng-template[monaComboBoxHeaderTemplate],        ng-template[monaMultiSelectHeaderTemplate]  ", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownItemTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownItemTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownItemTemplateDirective, "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    ", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownNoDataTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownNoDataTemplateDirective, never>;
+    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> {
+    #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>;
+}
+
+declare class DropdownDataHandlerDirective {
+    #private;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownDataHandlerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownDataHandlerDirective, "[monaDropdownDataHandler]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownPopupHandlerDirective {
+    #private;
+    constructor();
+    private closePopup;
+    private getMaxHeight;
+    private getMinWidth;
+    private openPopup;
+    private setPopupCloseSubscriptions;
+    private togglePopup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownPopupHandlerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownPopupHandlerDirective, "[monaDropdownPopupHandler]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownListPopupHandlerDirective {
+    #private;
+    constructor();
+    private closePopup;
+    private handleArrowKeys;
+    private handleKeyDown;
+    private handleScrollOnPopupOpen;
+    private scrollToHighlightedItem;
+    private scrollToSelectedItem;
+    private setKeyboardEvents;
+    private setPopupCloseSubscriptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListPopupHandlerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownListPopupHandlerDirective, "[monaDropdownListPopupHandler]", never, {}, {}, never, never, true, [{ directive: typeof DropdownPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+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>;
+}
+
+declare class DropdownPrefixTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownPrefixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownPrefixTemplateDirective, "ng-template[monaDropdownPrefixTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownSuffixTemplateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownSuffixTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DropdownSuffixTemplateDirective, "ng-template[monaDropdownSuffixTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+declare class DropdownService {
+    readonly beforeKeydown$: Subject<PreventableEvent<KeyboardEvent>>;
+    readonly beforeNavigate$: Subject<PreventableEvent<KeyboardEvent>>;
+    readonly keydown$: Subject<KeyboardEvent>;
+    readonly popupCloseComplete$: Subject<PopupCloseEvent<unknown>>;
+    readonly popupCloseStart$: Subject<PopupCloseEvent<unknown>>;
+    readonly popupOpenComplete$: Subject<void>;
+    readonly popupRef: i0.WritableSignal<PopupRef | null>;
+    readonly popupTemplate: i0.WritableSignal<TemplateRef<any> | null>;
+    readonly restoreFocus: i0.WritableSignal<boolean | "auto">;
+    readonly triggerPopupOpen$: Subject<Partial<PopupSettings<unknown, void>>>;
+    readonly triggerPopupToggle$: Subject<Partial<PopupSettings<unknown, void>>>;
+    static getDefaultPositions(): ConnectionPositionPair[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownService>;
+}
+
+declare class DropdownListService {
+    readonly navigate$: Subject<{
+        item: ListItem<any>;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownListService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DropdownListService>;
+}
+
+declare const dropdownPopupThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DropdownPopupVariantProps = VariantProps<ReturnType<typeof dropdownPopupThemeVariants>>;
+type DropdownPopupVariantInput = VariantInputs<DropdownPopupVariantProps>;
+
+export { DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPopupInputToken, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
+export type { DropdownDataInput, DropdownFieldPredicateType, DropdownFieldSelectorType, DropdownPopupInput, DropdownPopupVariantInput, DropdownPopupVariantProps };