igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
172 lines (171 loc) • 7.49 kB
TypeScript
import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
import type { AbstractConstructor } from '../common/mixins/constructor.js';
import IgcInputComponent from '../input/input.js';
import { type IgcPlacement } from '../popover/popover.js';
import IgcSelectGroupComponent from './select-group.js';
import IgcSelectItemComponent from './select-item.js';
export interface IgcSelectEventMap {
igcChange: CustomEvent<IgcSelectItemComponent>;
focus: FocusEvent;
blur: FocusEvent;
igcOpening: CustomEvent<void>;
igcOpened: CustomEvent<void>;
igcClosing: CustomEvent<void>;
igcClosed: CustomEvent<void>;
}
declare const IgcSelectComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcSelectEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
/**
* Represents a control that provides a menu of options.
*
* @element igc-select
*
* @slot - Renders the list of select items.
* @slot prefix - Renders content before the input.
* @slot suffix - Renders content after input.
* @slot header - Renders a container before the list of options.
* @slot footer - Renders a container after the list of options.
* @slot helper-text - Renders content below the input.
* @slot toggle-icon - Renders content inside the suffix container.
* @slot toggle-icon-expanded - Renders content for the toggle icon when the component is in open state.
*
* @fires igcChange - Emitted when the control's checked state changes.
* @fires igcOpening - Emitted just before the list of options is opened.
* @fires igcOpened - Emitted after the list of options is opened.
* @fires igcClosing - Emitter just before the list of options is closed.
* @fires igcClosed - Emitted after the list of options is closed.
*
* @csspart list - The list wrapping container for the items of the igc-select.
* @csspart input - The encapsulated igc-input of the igc-select.
* @csspart label - The encapsulated text label of the igc-select.
* @csspart prefix - The prefix wrapper of the input of the igc-select.
* @csspart suffix - The suffix wrapper of the input of the igc-select.
* @csspart toggle-icon - The toggle icon wrapper of the igc-select.
* @csspart helper-text - The helper text wrapper of the igc-select.
*/
export default class IgcSelectComponent extends IgcSelectComponent_base {
static readonly tagName = "igc-select";
static styles: import("lit").CSSResult[];
static register(): void;
private _value;
private _searchTerm;
private _lastKeyTime;
private _rootScrollController;
private get _activeItems();
protected _selectedItem: IgcSelectItemComponent | null;
protected _activeItem: IgcSelectItemComponent;
protected get __validators(): import("../common/validators.js").Validator<IgcSelectComponent>[];
protected input: IgcInputComponent;
protected helperText: Array<HTMLElement>;
protected inputSuffix: Array<HTMLElement>;
protected inputPrefix: Array<HTMLElement>;
protected _expandedIconSlot: Array<HTMLElement>;
protected get hasExpandedIcon(): boolean;
protected get hasPrefixes(): boolean;
protected get hasSuffixes(): boolean;
protected get hasHelperText(): boolean;
/**
* The value attribute of the control.
* @attr
*/
get value(): string;
set value(value: string);
/**
* The outlined attribute of the control.
* @attr
*/
outlined: boolean;
/**
* The autofocus attribute of the control.
* @attr
*/
autofocus: boolean;
/**
* The distance of the select dropdown from its input.
* @attr
*/
distance: number;
/**
* The label attribute of the control.
* @attr
*/
label: string;
/**
* The placeholder attribute of the control.
* @attr
*/
placeholder: string;
/** The preferred placement of the select dropdown around its input.
* @type {'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end'}
* @attr
*/
placement: IgcPlacement;
/**
* Determines the behavior of the component during scrolling of the parent container.
* @attr scroll-strategy
*/
scrollStrategy: 'scroll' | 'block' | 'close';
/** Returns the items of the igc-select component. */
get items(): IgcSelectItemComponent[];
/** Returns the groups of the igc-select component. */
get groups(): IgcSelectGroupComponent[];
/** Returns the selected item from the dropdown or null. */
get selectedItem(): IgcSelectItemComponent | null;
protected scrollStrategyChanged(): void;
protected openChange(): void;
constructor();
protected createRenderRoot(): HTMLElement | DocumentFragment;
protected firstUpdated(): Promise<void>;
private handleFocusIn;
private handleFocusOut;
private handleClick;
private handleChange;
private handleSearch;
protected handleAnchorClick(): void;
private onEnterKey;
private onSpaceBarKey;
private onArrowDown;
private onArrowUp;
private altArrowDown;
private altArrowUp;
protected onEscapeKey(): Promise<void>;
private onTabKey;
protected onHomeKey(): void;
protected onEndKey(): void;
protected handleClosing(): void;
private activateItem;
private setSelectedItem;
private _selectItem;
private _navigateToActiveItem;
private _updateValue;
private clearSelectedItem;
private focusItemOnOpen;
protected getItem(value: string): IgcSelectItemComponent | undefined;
/** Sets focus on the component. */
focus(options?: FocusOptions): void;
/** Removes focus from the component. */
blur(): void;
/** Checks the validity of the control and moves the focus to it if it is not valid. */
reportValidity(): boolean;
/** Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null. */
navigateTo(value: string): IgcSelectItemComponent | null;
/** Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null. */
navigateTo(index: number): IgcSelectItemComponent | null;
/** Selects the item with the specified value. If it exists, returns the found item, otherwise - null. */
select(value: string): IgcSelectItemComponent | null;
/** Selects the item at the specified index. If it exists, returns the found item, otherwise - null. */
select(index: number): IgcSelectItemComponent | null;
/** Resets the current value and selection of the component. */
clearSelection(): void;
protected renderInputSlots(): import("lit-html").TemplateResult<1>;
protected renderToggleIcon(): import("lit-html").TemplateResult<1>;
protected renderHelperText(): import("lit-html").TemplateResult<1>;
protected renderInputAnchor(): import("lit-html").TemplateResult<1>;
protected renderDropdown(): import("lit-html").TemplateResult<1>;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-select': IgcSelectComponent;
}
}
export {};