import { ComboboxAutocomplete, SelectPosition, ListboxOption, DelegatesARIACombobox, StartEnd } from '@ni/fast-foundation'; import { ToggleButton } from '../toggle-button'; import { DropdownAppearance, type DropdownPattern } from '../patterns/dropdown/types'; import type { AnchoredRegion } from '../anchored-region'; import { FormAssociatedCombobox } from './models/combobox-form-associated'; declare global { interface HTMLElementTagNameMap { 'nimble-combobox': Combobox; } } declare const Combobox_base: (abstract new (...args: any[]) => { errorText?: string; errorVisible: boolean; errorHasOverflow: boolean; readonly $fastController: import("@ni/fast-element").Controller; $emit(type: string, detail?: any, options?: Omit): boolean | void; connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(name: string, oldValue: string, newValue: string): void; }) & (abstract new (...args: any[]) => { requiredVisible: boolean; readonly $fastController: import("@ni/fast-element").Controller; $emit(type: string, detail?: any, options?: Omit): boolean | void; connectedCallback(): void; disconnectedCallback(): void; attributeChangedCallback(name: string, oldValue: string, newValue: string): void; }) & typeof FormAssociatedCombobox; /** * A nimble-styed HTML combobox */ export declare class Combobox extends Combobox_base implements DropdownPattern { appearance: DropdownAppearance; appearanceReadOnly: boolean; fullBleed: boolean; /** * The autocomplete attribute. */ autocomplete?: ComboboxAutocomplete; /** * The placement for the listbox when the combobox is open. */ positionAttribute?: SelectPosition; /** * The open attribute. */ open: boolean; /** * Sets the placeholder value of the element, generally used to provide a hint to the user. * @remarks Using a non-null assertion to mimic FAST's original improper typing of an * uninitialized property: * https://github.com/microsoft/fast/blob/0c27d027ff6e8616ad4fddc17f4432aa7f6cbad0/packages/web-components/fast-foundation/src/combobox/combobox.ts#L199 */ placeholder: string; /** * The current state of the calculated position of the listbox. * * @public */ position?: SelectPosition; /** * @internal */ region?: AnchoredRegion; /** * @internal */ controlWrapper: HTMLElement; /** * @internal */ control: HTMLInputElement; /** * @internal */ listbox: HTMLDivElement; /** * @internal */ readonly dropdownButton?: ToggleButton; /** * @internal * * The collection of currently filtered options. */ filteredOptions: ListboxOption[]; /** @internal */ hasOverflow: boolean; get value(): string; set value(next: string); /** * The list of options. * * Overrides `Listbox.options`. */ get options(): ListboxOption[]; set options(value: ListboxOption[]); /** * The unique id for the internal listbox element. * * @internal */ listboxId: string; /** * The space available in the viewport for the listbox when opened. * * @internal */ availableViewportHeight: number; private valueUpdatedByInput; private valueBeforeTextUpdate?; private _value; private filter; /** * The initial state of the position attribute. */ private forcedPosition; private get isAutocompleteInline(); private get isAutocompleteList(); private get isAutocompleteBoth(); slottedOptionsChanged(prev: HTMLElement[], next: HTMLElement[]): void; connectedCallback(): void; /** * @internal */ clickHandler(e: MouseEvent): boolean; /** * @internal */ toggleButtonClickHandler(e: Event): void; /** * @internal */ toggleButtonChangeHandler(e: Event): void; /** * @internal */ toggleButtonKeyDownHandler(e: KeyboardEvent): boolean; /** * @internal */ filterOptions(): void; /** * @internal */ inputHandler(e: InputEvent): boolean; keydownHandler(e: KeyboardEvent): boolean; /** * @internal */ keyupHandler(e: KeyboardEvent): boolean; /** * @internal */ focusoutHandler(e: FocusEvent): boolean; /** * Reset the element to its first selectable option when its parent form is reset. * * @internal */ formResetCallback(): void; /** {@inheritDoc (FormAssociated:interface).validate} */ validate(): void; /** * Set the default selected options at initialization or reset. * * @internal * @remarks * Overrides `Listbox.setDefaultSelectedOption` */ setDefaultSelectedOption(): void; /** * @internal */ selectedIndexChanged(prev: number | undefined, next: number): void; /** * Synchronize the `aria-disabled` property when the `disabled` property changes. * * @internal */ disabledChanged(prev: boolean, next: boolean): void; /** * Move focus to the next selectable option. * * @internal * @remarks Has the same behavior as `Listbox.selectNextOption` except it skips disabled options. * Overrides `Listbox.selectNextOption` */ selectNextOption(): void; /** * Move focus to the previous selectable option. * * @internal * @remarks Has the same behavior as `Listbox.selectPreviousOption` except it skips disabled options and allows moving focus to the input. * Overrides `Listbox.selectPreviousOption` */ selectPreviousOption(): void; /** * @internal */ setPositioning(): void; /** * Focus the control and scroll the first selected option into view. * * @internal * @remarks * Overrides: `Listbox.focusAndScrollOptionIntoView` */ protected focusAndScrollOptionIntoView(): void; protected openChanged(): void; protected placeholderChanged(): void; /** * Need to update even when options is empty. * @internal * @remarks Same as `Listbox.setSelectedOptions` except does not check if options is non-empty. * Overrides: `Listbox.setSelectedOptions` */ protected setSelectedOptions(): void; /** * Ensure that the entire list of options is used when setting the selected property. * @internal * @remarks * Overrides: `Listbox.selectedOptionsChanged` */ protected selectedOptionsChanged(_: ListboxOption[] | undefined, next: ListboxOption[]): void; protected positionChanged(_: SelectPosition | undefined, next: SelectPosition | undefined): void; private regionChanged; private controlWrapperChanged; private ariaLabelChanged; /** * Sets the value and to match the first selected option. */ private updateValue; /** * Focus and set the content of the control based on the first selected option. */ private setInputToSelection; /** * Focus, set and select the content of the control based on the first selected option. */ private setInlineSelection; private clearSelectionRange; /** * Determines if a value update should involve emitting a change event, then updates the value. */ private syncValue; private updateInputAriaLabel; /** * This will only emit a `change` event after text entry where the text in the input prior to * typing is different than the text present upon an attempt to commit (e.g. pressing ). * So, for a concrete example: * 1) User types 'Sue' (when Combobox input was blank). * 2) User presses -> 'change' event fires * 3) User deletes 'Sue' * 4) User re-types 'Sue' * 5) User presses -> NO 'change' event is fired */ private emitChangeIfValueUpdated; private findIndexOfValidOption; } export interface Combobox extends StartEnd, DelegatesARIACombobox { } export declare const comboboxTag = "nimble-combobox"; export {};