@scania/tegel
Version:
Tegel Design System
133 lines (132 loc) • 4.67 kB
TypeScript
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';
/** 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)[];
/** Defines aria-label attribute for input */
tdsAriaLabel: string;
open: boolean;
internalValue: string;
filterResult: number;
filterFocus: boolean;
internalDefaultValue: string;
private selectedOptions;
private dropdownList;
private inputElement;
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;
label: string;
}[]>;
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;
value: string;
}>;
/** Focus event for the Dropdown. */
tdsFocus: EventEmitter<FocusEvent>;
/** Blur event for the Dropdown. */
tdsBlur: EventEmitter<FocusEvent>;
/** Input event for the Dropdown. */
tdsInput: EventEmitter<InputEvent>;
onAnyClick(event: MouseEvent): void;
onKeyDown(event: KeyboardEvent): Promise<void>;
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 handleFocus;
private handleBlur;
/**
* @internal
*/
appendValue(value: string): Promise<void>;
private resetInput;
componentDidRender(): void;
disconnectedCallback(): void;
connectedCallback(): void;
private updateDropdownListInertState;
render(): any;
}