dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
103 lines (102 loc) • 4.03 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSOptionItem } from '../option-item/option-item.component';
declare const DapDSOptionList_base: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
/**
* `dap-ds-option-list`
* @summary An option list is a list of selectable options.
* @element dap-ds-option-list
* @title - Option list
*
* @event {{ void }} dds-cancel - Fired when the escape key is pressed.
* @event {{ option: DapDSOptionItem, value: string, index: number, text: string }} dds-option-change - Fired when the option list value changes.
* @event {{ void }} dds-keydown - Fired when a key is pressed down.
* @event {{ elements: DapDSOptionItem[] }} dds-list-changed - Fired when the available options list changes.
*
* @csspart base - The main option list container.
* @csspart option-item - The option item of the option list.
* @csspart popup-base - The base of the popup.
* @csspart option-item-base - The base of the option item.
* @csspart option-item-label - The label of the option item.
* @csspart option-item-prefix - The prefix of the option item.
* @csspart option-item-suffix - The suffix of the option item.
*
* @slot - The default slot for the options.
*/
export default class DapDSOptionList extends DapDSOptionList_base {
static tagName: string;
static dependencies: {
'dap-ds-option-item': typeof DapDSOptionItem;
};
/** The filter text of the option list */
filterText: string;
/** The value of the option list */
value?: string;
/** The focused state of the option list. */
focused: boolean;
/** Whether the option list is searchable */
search: boolean;
/** The search mode of the option list. Default is `none` */
searchMode: 'none' | 'typehead' | 'autocomplete' | 'manual';
/**
* @ignore
*/
searchOnValueSet: string;
/** Whether the option list items are selectable, whether it shows the selected icon */
selectable: string;
/**
* @ignore
*/
options?: any[];
/**
* @ignore
*/
disableDelaySet: boolean;
queryTimeout: number | undefined;
queryString: string;
firstLoad: boolean;
private currentOption;
selectedIndex: number;
private optionEls;
private availableOptions;
get isAutoComplete(): boolean;
static readonly styles: import('lit').CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
getAllOptions(): DapDSOptionItem[];
private getAllRenderedOptions;
getAllAvailabeOptions(): DapDSOptionItem[];
getActiveOption(): DapDSOptionItem | null | undefined;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected shouldUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): boolean;
filterAvailableOptions(): void;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
setOptionsFromSlottedItems(): void;
private handleKeydown;
private scrollToActiveOption;
private handleNavigationKey;
private handleActionKey;
private handleTypeheadKey;
private handleKeyCodes;
private getEventDetails;
private findNearestEnabled;
private findIndexByValue;
private clearItemFocusStates;
private setCurrentOption;
private setFocusedOption;
private setSelectedOption;
private selectionChanged;
private changeOption;
private readonly handleOptionClick;
getSearchString: (char: string) => string;
buildQueryString: (char: string) => void;
private handleInitialFocus;
private handleKeyFocus;
captureFocus(key?: string): void;
removeFocus(): void;
private handleSlotChange;
render(): import('lit-html').TemplateResult;
}
export {};