@3mo/select-field/dist/FieldSelect.d.ts

A select field web component

import { type PropertyValues } from '@a11d/lit';
import { FieldComponent } from '@3mo/field';
import type { ListItem } from '@3mo/list';
import type { Menu } from '@3mo/menu';
import type { FocusMethod } from '@3mo/focus-controller';
import { type PopoverAlignment, type PopoverPlacement } from '@3mo/popover';
import { FieldSelectValueController, type Data, type Index, type Value } from './SelectValueController.js';
import { Option } from './Option.js';
/**
 * @element mo-field-select
 *
 * @attr default - The default value.
 * @attr reflectDefault - Whether the default value should be reflected to the attribute.
 * @attr multiple - Whether multiple options can be selected.
 * @attr searchable - Whether the options should be searchable.
 * @attr freeInput - Whether the user can input values that are not in the options.
 * @attr value - The selected value.
 * @attr index - The selected index.
 * @attr data - The selected data.
 * @attr menuAlignment - Menu popover alignment
 * @attr menuPlacement - Menu popover placement
 *
 * @slot - The select options.
 *
 * @csspart input - The input element.
 * @csspart dropDownIcon - The dropdown icon.
 * @csspart menu - The menu consisting of list of options.
 * @csspart list - The list of options.
 *
 * @i18n "No results"
 *
 * @fires change
 * @fires input
 * @fires dataChange
 * @fires indexChange
 */
export declare class FieldSelect<T> extends FieldComponent<Value> {
    readonly dataChange: EventDispatcher<Data<T>>;
    readonly indexChange: EventDispatcher<Index>;
    default?: string;
    dense: boolean;
    reflectDefault: boolean;
    multiple: boolean;
    searchable: boolean;
    freeInput: boolean;
    menuAlignment?: PopoverAlignment;
    menuPlacement?: PopoverPlacement;
    open: boolean;
    value: Value;
    index: Index;
    data: Data<T>;
    protected searchString?: string;
    protected [FieldSelectValueController.requestSyncKey]: number;
    readonly valueInputElement: HTMLInputElement;
    readonly searchInputElement?: HTMLInputElement;
    readonly menu?: Menu;
    get isPopulated(): boolean;
    protected get isDense(): boolean;
    get listItems(): Array<ListItem>;
    get options(): Array<Option<T>>;
    get selectedOptions(): Option<T>[];
    protected readonly valueController: FieldSelectValueController<T>;
    protected get isActive(): boolean;
    protected get showNoOptionsHint(): boolean;
    protected updated(props: PropertyValues): void;
    protected firstUpdated(props: PropertyValues): void;
    static get styles(): import("@a11d/lit").CSSResult;
    protected get template(): import("lit-html").HTMLTemplateResult;
    protected get searching(): boolean;
    protected get hasSearchInput(): boolean;
    protected get inputTemplate(): import("lit-html").HTMLTemplateResult;
    private get valueInputTemplate();
    private get searchInputTemplate();
    protected get endSlotTemplate(): import("lit-html").HTMLTemplateResult;
    private get clearIconButtonTemplate();
    protected get menuTemplate(): import("lit-html").HTMLTemplateResult;
    protected get optionsTemplate(): import("lit-html").HTMLTemplateResult;
    protected get noResultsOptionTemplate(): import("lit-html").HTMLTemplateResult;
    protected get defaultOptionTemplate(): import("lit-html").HTMLTemplateResult;
    protected handleOptionRequestValueSync(e: Event): void;
    requestValueUpdate(): void;
    protected valueToInputValue(value: Value): string;
    protected handleFocus(bubbled: boolean, method: FocusMethod): Promise<void>;
    protected handleBlur(bubbled: boolean, method: FocusMethod): void;
    protected handleSelection(menuValue: Array<number>): void;
    protected handleItemsChange(): void;
    setCustomValidity(error: string): void;
    checkValidity(): Promise<boolean>;
    reportValidity(): void;
    protected get searchKeyword(): string;
    protected handleInput(value: Value, e?: Event | undefined): Promise<void>;
    protected search(): Promise<void>;
    protected resetSearch(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'mo-field-select': FieldSelect<unknown>;
    }
}
//# sourceMappingURL=FieldSelect.d.ts.map