@loadsmart/miranda-wc/dist/components/select/select.d.ts

Miranda Web Components component library

import type { PropertyValues } from 'lit';
import { Popover } from '../popover';
import type { PopoverProps } from '../popover';
import { fromAttribute } from '../../controllers/selection';
import type { AcceptedType, SelectionType } from '../../controllers/selection';
import type { FieldStatus } from '../field';
import type { SelectOption } from './select-option';
import type { DataSource } from './select.types';
import '../close-button';
import '../icon';
import '../layout/box';
import '../tag';
import '../text-field';
import './select-option';
export type SelectSize = 'small' | 'default' | 'large';
export interface SelectProps extends PopoverProps {
    disabled?: boolean;
    initialValue?: AcceptedType | AcceptedType[] | null;
    loading?: boolean;
    name?: string;
    placeholder?: string;
    size?: SelectSize;
    status?: FieldStatus;
    type: SelectionType;
    value?: AcceptedType | AcceptedType[] | null;
    onchange?: GlobalEventHandlers['onchange'];
}
declare const Select_base: import("../../utils/types").Constructor<import("../../controllers/selection/selection-control.mixin").WithSelectionControlMixinInterface> & typeof Popover;
export declare class Select extends Select_base implements SelectProps {
    #private;
    /**
     * The only reason we are making this component form-associated is to
     * have access to the `formDisabledCallback`.
     *
     * @see {@link https://web.dev/articles/more-capable-form-controls#void_formdisabledcallbackdisabled|formDisabledCallback on web.dev}
     */
    static formAssociated: boolean;
    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[][];
    static get properties(): {
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        initialValue: {
            type: StringConstructor;
            attribute: string;
            fromAttribute: typeof fromAttribute;
            reflect: boolean;
        };
        /**
         * We use a different property name internally so the react wrapper can still
         * keep track of the property while we can use custom getter/setter to
         * set and reflect the `value` attribute.
         */
        providedValue: {
            type: StringConstructor;
            attribute: string;
            fromAttribute: typeof fromAttribute;
        };
        loading: {
            type: BooleanConstructor;
        };
        name: {
            type: StringConstructor;
            reflect: boolean;
        };
        placeholder: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
            reflect: boolean;
        };
        status: {
            type: StringConstructor;
            reflect: boolean;
        };
        type: {
            type: StringConstructor;
            reflect: boolean;
        };
        filteredOptions: {
            state: boolean;
        };
        slottedOptions: {
            state: boolean;
        };
        position: {
            type: StringConstructor;
            reflect: boolean;
        };
        placement: {
            type: StringConstructor;
        };
        open: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        asPopover: {
            type: BooleanConstructor;
            attribute: string;
        };
    };
    /**
     * Helper text to guide the user when there's no options selected.
     */
    placeholder: SelectProps['placeholder'];
    /**
     * Strategy for option selection.
     */
    type: SelectProps['type'];
    /**
     * Should the select be disabled.
     */
    disabled: SelectProps['disabled'];
    /**
     * Is the select currently in loading mode (fetching options)?
     */
    loading: SelectProps['loading'];
    /**
     *  Name that will represent this select in the form.
     */
    name: SelectProps['name'];
    /**
     * Select size.
     */
    size: SelectProps['size'];
    /**
     * Validation status type.
     */
    status: SelectProps['status'];
    /**
     * Value that will be selected by default on initialization and form reset.
     */
    initialValue: SelectProps['initialValue'];
    /**
     * Current selected value.
     */
    providedValue: SelectProps['value'];
    /**
     * Options that have been slotted into the menu.
     */
    slottedOptions: SelectOption[];
    /**
     * Options that have been filtered based on the search term.
     */
    filteredOptions: SelectOption[];
    private field;
    static define(): void;
    constructor();
    createRenderRoot(): DocumentFragment | HTMLElement;
    connectedCallback(): Promise<void>;
    disconnectedCallback(): void;
    update(changedProperties: PropertyValues<this>): void;
    updated(changedProperties: PropertyValues<this>): void;
    getReferenceElement(): HTMLInputElement | null;
    getFloatingElement(): HTMLElement | null;
    getArrowElement(): null;
    render(): import("lit-html").TemplateResult<1>;
    get dataSources(): Map<string, DataSource>;
    get trigger(): HTMLInputElement | null;
    get leading(): HTMLSpanElement | null;
    get tags(): Element | null;
    private get isMultiple();
    get value(): string | string[] | null;
    set value(value: string | string[] | null);
    clear: () => Promise<void>;
    expand: () => void;
    collapse: () => Promise<void>;
    /**
     * Toggle select menu.
     */
    toggle: () => Promise<void>;
    /**
     * Trigger search operation for the select.
     */
    search: (searchTerm: string, options?: {
        emit: boolean;
        expand: boolean;
    }) => Promise<void>;
    /**
     * Toggle option(s) by value(s).
     * This can also be used for testing purposes.
     */
    toggleOptions: (value?: string | string[]) => void;
    /**
     * Select option(s) by value(s).
     * This can also be used for testing purposes.
     */
    selectOptions: (value?: string | string[]) => void;
    /**
     * Unselect option(s) by value(s).
     * This can also be used for testing purposes.
     */
    unselectOptions: (value?: string | string[]) => void;
    protected handleFormReset: () => void;
    formDisabledCallback(disabled: boolean): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'm-select': Select;
    }
}
export {};