@scania/tegel/dist/types/components/dropdown/dropdown.d.ts

Tegel Design System

import { EventEmitter } from '../../stencil-public-runtime';
/**
 * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
 */
export declare class TdsDropdown {
    host: HTMLElement;
    /** Name for the Dropdowns input element. */
    name?: string;
    /** Sets the Dropdown in a disabled state */
    disabled: boolean;
    /** Helper text for the Dropdown. */
    helper?: string;
    /** Label text for the Dropdown. */
    label?: string;
    /** Label text position */
    labelPosition?: 'inside' | 'outside';
    /** Mode variant of the component, based on current mode. */
    modeVariant: 'primary' | 'secondary' | null;
    /** The direction the Dropdown should open, auto if not specified. */
    openDirection: 'up' | 'down' | 'auto';
    /** Placeholder text for the Dropdown. */
    placeholder?: string;
    /** The size of the Dropdown. */
    size: 'xs' | 'sm' | 'md' | 'lg';
    animation: 'none' | 'slide';
    /** Sets the Dropdown in an error state */
    error: boolean;
    /** Enables multiselect in the Dropdown. */
    multiselect: boolean;
    /** Enables filtration in the Dropdown. */
    filter: boolean;
    /** Normalizes input text for fuzzier search */
    normalizeText: boolean;
    /** Text that is displayed if filter is used and there are no options that matches the search.
     * Setting it to an empty string disables message from showing up. */
    noResultText?: string;
    /** Default value selected in the Dropdown. */
    defaultValue?: string | number;
    /** Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. */
    value: string | number | (string | number)[] | null;
    /** Defines aria-label attribute for input */
    tdsAriaLabel?: string;
    open: boolean;
    internalValue: string;
    filterResult: number | null;
    filterFocus: boolean;
    internalDefaultValue: string;
    private selectedOptions;
    filterQuery: string;
    private dropdownList;
    private inputElement;
    private hasFocus;
    private readonly uuid;
    handleValueChange(newValue: string | number | (string | number)[]): void;
    private normalizeValue;
    private updateDropdownStateInternal;
    private updateDropdownStateFromUser;
    private updateDropdownState;
    private validateValues;
    private updateOptionElements;
    private updateDisplayValue;
    private emitChange;
    /** Method for setting the selected value of the Dropdown.
     *
     * Single selection example:
     *
     * <code>
     *  dropdown.setValue('option-1', 'Option 1');
     * </code>
     *
     * Multiselect example:
     *
     * <code>
     *  dropdown.setValue(['option-1', 'option-2']);
     * </code>
     */
    setValue(value: string | number | string[] | number[], label?: string): Promise<{
        value: string | number | undefined;
        label: string | undefined;
    }[]>;
    reset(): Promise<void>;
    removeValue(oldValue: string): Promise<void>;
    /** Method that forces focus on the input element. */
    focusElement(): Promise<void>;
    /** Method for closing the Dropdown. */
    close(): Promise<void>;
    /** Method to force update the dropdown display value.
     * Use this method when you programmatically change the text content of dropdown options
     * to ensure the selected value display updates immediately.
     */
    updateDisplay(): Promise<void>;
    /** Change event for the Dropdown. */
    tdsChange: EventEmitter<{
        name: string | undefined;
        value: string | null;
    }>;
    /** Focus event for the Dropdown. */
    tdsFocus: EventEmitter<FocusEvent>;
    /** Blur event for the Dropdown. */
    tdsBlur: EventEmitter<FocusEvent>;
    /** Input event for the Dropdown. */
    tdsInput: EventEmitter<InputEvent>;
    /** Clear event for the Dropdown. */
    tdsClear: EventEmitter<{
        clearedValue: string;
    }>;
    onAnyClick(event: MouseEvent): void;
    onFocusIn(event: FocusEvent): void;
    onFocusOut(event: FocusEvent): void;
    onKeyDown(event: KeyboardEvent): Promise<void>;
    /** If the Dropdown gets closed,
    this sets the value of the dropdown to the current selection labels or null if no selection is made. */
    handleOpenState(): void;
    handleDefaultValueChange(newValue: string | number): void;
    componentWillLoad(): void;
    /** Method to handle slot changes */
    private handleSlotChange;
    /** Method to check if we should normalize text */
    private normalizeString;
    private setDefaultOption;
    private getChildren;
    private getSelectedChildren;
    private getSelectedChildrenLabels;
    private getValue;
    private setValueAttribute;
    private getOpenDirection;
    private handleToggleOpen;
    private focusInputElement;
    private handleFilter;
    private handleFilterReset;
    private resetFilterVisibility;
    private handleMultiselectClear;
    private handleFocus;
    private handleBlur;
    private handleInputClick;
    /**
     * @internal
     */
    appendValue(value: string): Promise<void>;
    private resetInput;
    componentDidRender(): void;
    disconnectedCallback(): void;
    private updateDropdownListInertState;
    render(): any;
}