@nanahoshi/mona-ui 0.1.0

package/types/nanahoshi-mona-ui-color-palette.d.ts

@@ -0,0 +1,102 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { PaletteType } from '@nanahoshi/mona-ui/common';
+import { VariantInputs, ColorScheme } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantProps } from 'class-variance-authority';
+
+declare const colorPaletteBaseThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const colorPaletteItemThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ColorPaletteBaseVariantProps = VariantProps<ReturnType<typeof colorPaletteBaseThemeVariants>>;
+type ColorPaletteBaseVariantInput = VariantInputs<ColorPaletteBaseVariantProps>;
+type ColorPaletteItemVariantProps = VariantProps<ReturnType<typeof colorPaletteItemThemeVariants>>;
+type ColorPaletteItemVariantInput = VariantInputs<ColorPaletteItemVariantProps>;
+type ColorPaletteVariantProps = ColorPaletteBaseVariantProps & ColorPaletteItemVariantProps;
+type ColorPaletteVariantInput = ColorPaletteBaseVariantInput & ColorPaletteItemVariantInput;
+
+declare class ColorPaletteComponent implements ColorPaletteVariantInput, FormValueControl<string | null> {
+    #private;
+    protected readonly baseClasses: Signal<string>;
+    protected readonly colorScheme: Signal<ColorScheme>;
+    protected readonly paletteItemClasses: Signal<string>;
+    protected readonly colorRows: Signal<string[][]>;
+    protected readonly focusedColorIndex: _angular_core.WritableSignal<number>;
+    protected readonly activeColorIndex: Signal<number>;
+    protected readonly invalidState: Signal<boolean>;
+    /**
+     * @description The number of columns in the color palette grid.
+     * Only applicable when using a custom palette.
+     * @default 10
+     */
+    readonly columns: _angular_core.InputSignal<number>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the color palette 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>;
+    /**
+     * @description The palette to display — one of the built-in `"flat"`, `"material"`, or `"websafe"` schemes, or a
+     * custom iterable of color strings. An empty custom palette falls back to the flat scheme.
+     * @default []
+     */
+    readonly palette: _angular_core.InputSignal<PaletteType | Iterable<string>>;
+    /**
+     * @description Prevents value changes while preserving the component's visual state. When bound to a signal
+     * form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the color palette items.
+     * @default "none"
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
+    /**
+     * @description Sets whether the color palette 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>;
+    /**
+     * @description The size of each tile in the color palette grid.
+     * @default 18
+     */
+    readonly tileSize: _angular_core.InputSignal<number>;
+    /**
+     * @description Emitted when the color palette is interacted with on blur or color selection.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the color palette. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Two-way bindable current color value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    protected focusColorTile(index: number): void;
+    protected onColorBlur(): void;
+    protected onColorFocus(index: number): void;
+    protected onColorSelect(color: string): void;
+    protected onKeyDown(event: KeyboardEvent, colorIndex: number): void;
+    private getColorScheme;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPaletteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPaletteComponent, "mona-color-palette", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tileSize": { "alias": "tileSize"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { ColorPaletteComponent };
+export type { ColorPaletteVariantProps };

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

@@ -0,0 +1,156 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, TemplateRef } from '@angular/core';
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
+import { FormValueControl } from '@angular/forms/signals';
+import { PaletteType } from '@nanahoshi/mona-ui/common';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ThemeStyle } from '@nanahoshi/mona-ui/theme';
+import { VariantInputs } from '@nanahoshi/mona-ui/internal';
+
+type ColorPickerView = "gradient" | "palette";
+
+declare const colorPickerBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    expanded?: 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 colorPickerColorThemeVariants: (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 ColorPickerBaseVariantProps = VariantProps<ReturnType<typeof colorPickerBaseThemeVariants>>;
+type ColorPickerBaseVariantInput = VariantInputs<ColorPickerBaseVariantProps>;
+type ColorPickerColorVariantProps = VariantProps<ReturnType<typeof colorPickerColorThemeVariants>>;
+type ColorPickerColorVariantInput = VariantInputs<ColorPickerColorVariantProps>;
+type ColorPickerVariantProps = ColorPickerBaseVariantProps & ColorPickerColorVariantProps;
+type ColorPickerVariantInput = Omit<ColorPickerBaseVariantInput, "expanded"> & ColorPickerColorVariantInput;
+
+declare class ColorPickerComponent implements OnInit, ColorPickerVariantInput, FormValueControl<string | null> {
+    #private;
+    protected readonly baseClasses: Signal<string>;
+    protected readonly colorClasses: Signal<string>;
+    protected readonly expanded: Signal<boolean>;
+    protected readonly invalidState: Signal<boolean>;
+    protected readonly noColorIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly dropdownIcon: _fortawesome_fontawesome_common_types.IconDefinition;
+    protected readonly popupId: string;
+    protected readonly popupTemplate: Signal<TemplateRef<any>>;
+    protected readonly valueTemplate: Signal<TemplateRef<any> | undefined>;
+    /**
+     * @description Whether to close the color picker when a color is selected.
+     * Only applies when the view is set to "palette".
+     * @default true
+     */
+    readonly closeOnSelect: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The number of columns to display in the color palette.
+     * Only applies when the view is set to "palette" and the palette is a custom array of colors.
+     * @default 10
+     */
+    readonly columns: _angular_core.InputSignal<number>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the color 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>;
+    /**
+     * @description Whether to display the opacity slider.
+     * Only applies when the view is set to "gradient".
+     * @default true
+     */
+    readonly opacity: _angular_core.InputSignal<boolean>;
+    /**
+     * @description The type of color palette to use.
+     * This can be a predefined palette type like "flat", "material", or "websafe",
+     * or a custom iterable of colors.
+     * @default "flat"
+     */
+    readonly palette: _angular_core.InputSignal<Iterable<string> | PaletteType>;
+    /**
+     * @description Prevents value changes while preserving the component's visual state. When bound to a signal
+     * form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the color picker.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"none" | "small" | "medium" | "large" | "full" | null | undefined>;
+    /**
+     * @description Whether to show the clear button to reset the color.
+     * This is only applicable when the view is set to "palette".
+     * @default false
+     */
+    readonly showClearButton: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Size preset controlling the color picker's dimensions.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"small" | "medium" | "large" | null | undefined>;
+    /**
+     * @description The view mode of the color picker.
+     * This can be either "palette" or "gradient".
+     * @default "gradient"
+     */
+    readonly view: _angular_core.InputSignal<ColorPickerView>;
+    /**
+     * @description Sets whether the color picker 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>;
+    /**
+     * @description Emitted when the color picker is interacted with on blur or color selection.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the color picker. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Two-way bindable current color value.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<string | null>;
+    ngOnInit(): void;
+    protected onClearClick(): void;
+    onColorGradientApply(): void;
+    onColorGradientCancel(): void;
+    protected onColorGradientValueChange(value: string | null | undefined): void;
+    protected onColorGradientTouch(): void;
+    protected onColorPaletteValueChange(value: string | null): void;
+    protected onColorPaletteTouch(): void;
+    protected onPaletteContainerKeyDown(event: KeyboardEvent): void;
+    protected open(): void;
+    private close;
+    private focusFirstColorTile;
+    private focusPopupContent;
+    private setEventListeners;
+    private setKeyboardEventListeners;
+    private setupPopupKeyboardHandling;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "mona-color-picker", never, { "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touch": "touch"; "value": "valueChange"; }, ["valueTemplate"], never, true, never>;
+}
+
+declare class ColorPickerValueTemplateDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerValueTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ColorPickerValueTemplateDirective, "ng-template[monaColorPickerValueTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+interface ColorPickerValueTemplateContext {
+    $implicit: string;
+}
+
+export { ColorPickerComponent, ColorPickerValueTemplateDirective };
+export type { ColorPickerValueTemplateContext, ColorPickerVariantProps, ColorPickerView };

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

@@ -0,0 +1,232 @@
+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, DropdownPopupVariantInput, DropdownFieldPredicateType, DropdownFieldSelectorType } from '@nanahoshi/mona-ui/dropdowns';
+import { SelectableOptions, ListItem, ListSizeInputType, SelectionChangeEvent } from '@nanahoshi/mona-ui/internal/list';
+import { PopupCloseEvent } from '@nanahoshi/mona-ui/popup';
+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';
+
+declare const comboBoxBaseThemeVariants: (theme: ThemeStyle) => (props?: ({
+    disabled?: boolean | null | undefined;
+    focused?: 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 comboBoxTextInputThemeVariants: (theme: ThemeStyle) => (props?: ({
+    rounded?: "none" | "small" | "medium" | "large" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const comboBoxAffixContainerThemeVariants: (theme: ThemeStyle) => (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type ComboBoxBaseVariantProps = VariantProps<ReturnType<typeof comboBoxBaseThemeVariants>>;
+type ComboBoxBaseVariantInput = VariantInputs<ComboBoxBaseVariantProps>;
+type ComboBoxTextInputVariantProps = VariantProps<ReturnType<typeof comboBoxTextInputThemeVariants>>;
+type ComboBoxTextInputVariantInput = VariantInputs<ComboBoxTextInputVariantProps>;
+type ComboBoxAffixContainerVariantProps = VariantProps<ReturnType<typeof comboBoxAffixContainerThemeVariants>>;
+type ComboBoxAffixContainerVariantInput = VariantInputs<ComboBoxAffixContainerVariantProps>;
+type ComboBoxVariantProps = ComboBoxBaseVariantProps & ComboBoxTextInputVariantProps & ComboBoxAffixContainerVariantProps;
+type ComboBoxVariantInput = Omit<ComboBoxBaseVariantInput, "focused" | "invalid"> & ComboBoxTextInputVariantInput & ComboBoxAffixContainerVariantInput;
+
+declare class ComboBoxComponent<TData = unknown> implements FormValueControl<TData | null>, ComboBoxVariantInput, DropdownDataInput<TData>, DropdownPopupInput, DropdownPopupVariantInput {
+    #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 comboBoxValue$: Subject<string | null>;
+    protected readonly comboBoxValue: _angular_core.WritableSignal<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 id: string;
+    protected readonly inputClass: _angular_core.Signal<string>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly itemTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    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 selectedListItem: _angular_core.Signal<ListItem<any> | null>;
+    protected readonly valueText: _angular_core.Signal<string>;
+    /**
+     * @description Allows a custom value to be committed when it doesn't match any item in {@link data}.
+     * @default false
+     */
+    readonly allowCustomValue: _angular_core.InputSignal<boolean>;
+    /**
+     * @description ID of an element that provides an extended description for the input.
+     * @default ""
+     */
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /**
+     * @description Accessible name for the input. Describe what the combo box represents.
+     * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
+     * @default ""
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description ID of an external element that provides the accessible name for the input.
+     * @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 is closed.
+     */
+    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 A predicate function or the name of the field that determines whether an item is disabled.
+     * @default undefined
+     */
+    readonly itemDisabled: _angular_core.InputSignal<DropdownFieldPredicateType<TData>>;
+    /**
+     * @description Marks the combo box as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @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 is opened.
+     */
+    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 Sets the class of the popup element.
+     * @default ""
+     */
+    readonly popupClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Sets the height of the popup element.
+     * @default null
+     */
+    readonly popupHeight: _angular_core.InputSignal<ListSizeInputType>;
+    /**
+     * @description Sets the 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 Sets the required state of the combo box component.
+     * @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 Displays a button that resets the value to empty when an item is selected.
+     * @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 not set, the item itself is used as the text representation.
+     * @default undefined
+     */
+    readonly textField: _angular_core.InputSignal<DropdownFieldSelectorType<TData>>;
+    /**
+     * @description Emitted when the combo box is interacted with on blur, selection, clear, or committed input.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the combo box. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @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 Emitted with the entered text when the user presses Enter on unmatched input.
+     * Only emitted when {@link allowCustomValue} is true.
+     */
+    readonly valueAdd: _angular_core.OutputEmitterRef<string>;
+    /**
+     * @description Property name or accessor used to derive the value from a data item.
+     * If not set, the item itself is used as the value representation.
+     * @default undefined
+     */
+    readonly valueField: _angular_core.InputSignal<DropdownFieldSelectorType<TData>>;
+    /**
+     * @description Two-way bindable current selected value. Implements `FormValueControl<TData | null>`,
+     * enabling signal forms `[formField]` binding. When `valueField` is set, primitive field values can be
+     * written into this model to restore a matching selected item.
+     * @default null
+     */
+    readonly value: _angular_core.ModelSignal<TData | null>;
+    constructor();
+    protected onInputBlur(): void;
+    protected onItemSelect(event: SelectionChangeEvent<TData>): void;
+    protected onValueClear(event: Event): void;
+    private clear;
+    private closePopup;
+    focus(): void;
+    private initialize;
+    private notifyFilterChange;
+    private setArrowNavigationSubscription;
+    private setComboboxValueSubscription;
+    private handleEnterKey;
+    private selectItem;
+    private setEscapeKeySubscription;
+    private setKeydownSubscription;
+    private setNavigatedItemSubscription;
+    private setPopupCloseSubscriptions;
+    private setSpaceKeySubscription;
+    private setSubscriptions;
+    private updateValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboBoxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboBoxComponent<any>, "mona-combo-box", never, { "allowCustomValue": { "alias": "allowCustomValue"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "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"; "valueAdd": "valueAdd"; "value": "valueChange"; }, ["footerTemplate", "groupHeaderTemplate", "headerTemplate", "itemTemplate", "noDataTemplate", "prefixTemplate"], never, true, [{ directive: typeof i1.DropdownDataHandlerDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DropdownListPopupHandlerDirective; inputs: {}; outputs: {}; }]>;
+}
+
+export { ComboBoxComponent };
+export type { ComboBoxVariantProps };