@engie-group/fluid-design-system/lib/components/autocomplete-input/index.d.ts

The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.

import AbstractComponent from '../../globals/ts/abstract-component';
interface AutocompleteInputOptions {
    /** Maximum number of suggestions to display in list. */
    limit?: number;
    /**
     * Hint text when no suggestions matches the input value.
     *
     * @example "No results"
     */
    noResultMessage: string;
    /**
     * Hint text when only one suggestion matches the input value.
     *
     * @example "{x} result"
     */
    singularResultsMessage: string;
    /**
     * Hint text when multiple suggestions match the input value.
     *
     * @example "{x} results"
     */
    pluralResultsMessage: string;
    /** Whether to show the list item with the results count. */
    showResultNumber: boolean;
}
export default class AutocompleteInput extends AbstractComponent {
    static readonly NAME = "nj-form-item--autocomplete";
    protected static readonly DATA_KEY = "nj.autocomplete";
    static readonly SELECTOR: {
        default: string;
        input: string;
        list: string;
    };
    private static readonly EVENT;
    private static readonly CLASS_NAME;
    private static readonly HIGHLIGHT_OPENING_TAG;
    private static readonly HIGHLIGHT_CLOSING_TAG;
    private dataList;
    options: AutocompleteInputOptions;
    /**
     * Element whose content will be announced by assistive technologies. Should
     * contain the number of matching suggestions.
     */
    private liveZone;
    /** Input element */
    private fieldEl;
    private listEl;
    /** Base template element used to create item elements. */
    private itemTemplateEl;
    /** Suggestion elements. Only the ones matching with the input value will be displayed. */
    private itemElements;
    /**  Currently displayed elements, after filtering. */
    private currentItemElements;
    /** Element showing the number of suggestions matching with the input value. */
    private hintEl;
    /** Should the list be filtered based on the input field value. */
    private isFiltered;
    constructor(element: HTMLElement);
    private get isOpen();
    private set isOpen(value);
    /** Reset the "selected" option to either the current field value or the first option. */
    private selectMatchingOption;
    /** Returns only the suggestion elements matching the current input value. */
    private getFilteredItemElements;
    /** Update the suggestion list based on the current input value. */
    private updateList;
    /**
     * Process the next suggestion index in the list. If the current selection is the
     * last suggestion, the first suggestion in the list is selected.
     */
    private getNextOptionIndex;
    /**
     * Process the previous suggestion index in the list. If the current selection is the
     * first suggestion, the last suggestion in the list is selected.
     */
    private getPreviousOptionIndex;
    /**
     * Select the suggestion at given index in the list.
     */
    private selectOption;
    /**
     * Get the id of the option element matching the input field value
     */
    private get matchingId();
    private setActiveOption;
    private unselectOption;
    private onKeydown;
    private selectCurrentSuggestion;
    /** Closes the suggestion list if the focus is moved outside of the autocomplete. */
    private onFocusOut;
    /** Create a "live zone" to announce stuff with assistive technologies. */
    private static createLiveResultElement;
    /** Create suggestion items elements based on the template element. */
    private createItemElements;
    private createHintElement;
    /** Content of hint item and hidden. */
    private createResultsMessageContent;
    static init(options?: {}): AutocompleteInput[];
    dispose(): void;
    /**
     * Returns a string with matching occurences wrapped with an highlight element.
     */
    private static getElementInnerHtml;
    /** Check if a suggestion text matches the search value. */
    private static compareText;
    private static normalizeString;
    static getInstance(element: HTMLElement): AutocompleteInput;
    setOptions(options: Array<{
        name: string;
        value: string;
    }>): void;
}
export {};