@engie-group/fluid-design-system
Version:
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
72 lines (71 loc) • 2.28 kB
TypeScript
/**
* --------------------------------------------------------------------------
* NJ: dropdown.ts
* --------------------------------------------------------------------------
*/
import AbstractComponent from '../../globals/ts/abstract-component';
export default class SelectInput extends AbstractComponent {
static readonly NAME = "nj-form-item--custom-list";
protected static readonly DATA_KEY = "nj.custom-list";
protected static readonly EVENT_KEY: string;
private static readonly ESCAPE_KEYCODE;
private static readonly ENTER_KEYCODE;
private static readonly UP_KEYCODE;
private static readonly DOWN_KEYCODE;
private static readonly CLASS_NAME;
private static readonly ATTRIBUTE;
protected static readonly SELECTOR: {
default: string;
label: string;
button: string;
input: string;
options: string;
option: string;
};
private static readonly EVENT;
static getInstance(element: HTMLElement): SelectInput;
static init(options?: {}): SelectInput[];
private buttonEl;
private labelEl;
private listEl;
private inputEl;
private optionElements;
constructor(element: HTMLElement);
/**
* Update optionElements list and its listeners
*/
updateOptionsAndListeners(): void;
get isOpen(): boolean;
set isOpen(value: boolean);
/**
* Index of the option element corresponding to the current field value.
*/
private get selectedIndex();
private set selectedIndex(value);
/**
* Index of the currently focused option.
*/
private get focusedIndex();
private set focusedIndex(value);
/** Current label of the field */
private get selectedOptionLabel();
/** Current value of the field */
private get selectedOptionValue();
dispose(): void;
private addToggleEvent;
private addEscapeEvent;
private addBlurEvent;
/**
* Navigate between options and set `focusedIndex`
*/
private addUpDownEvent;
/**
* Select option on Click or Enter keydown and close menu
*/
private addClickEvent;
/**
* Select first option whose first letter is
* matching the alphanumeric value of keycode
*/
private addShortcutEvents;
}