@exmg/exmg-searchbar/exmg-searchbar-base.d.ts

An element to search the needle in a haystack.

import { ExmgSearchBarBaseInterface } from './exmg-searchbar-base-interface.js';
import { LitElement, TemplateResult } from 'lit';
import '@material/mwc-textfield/mwc-textfield.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-item/paper-icon-item.js';
import '@polymer/paper-spinner/paper-spinner-lite.js';
export declare abstract class ExmgSearchBarBase extends LitElement implements ExmgSearchBarBaseInterface {
    static styles: import("lit").CSSResult;
    private _mwcTextField?;
    private _focusableFields?;
    /**
     * Current query of search bar.
     * Default: ''
     */
    searchQuery: string;
    /**
     * List of suggestions to be passed into and displayed.
     * ExmgSearchSuggestion = {icon?: string, text: string, value: any}
     * Default: []
     */
    suggestions?: ExmgSearchSuggestion[];
    /**
     * Data to be passed into exmg-searchbar.
     * This will be filtered with the default filtering method of exmg-searchbar.
     */
    data?: any[];
    /**
     * Set of which keys of `data` should be checked to filter data by default.
     */
    filterKeys?: string[];
    /**
     * Defines which property of each data item should be placed into suggestions' labels.
     */
    suggestionLabelKey?: string;
    /**
     * Option to whether keep suggestions visible or not on
     * suggestion selection.
     * Default: false
     */
    keepSuggestionsOnSelect: boolean;
    /**
     * If true and there are no suggestions passed to element,
     * a loading indicator should be shown.
     * Default: false
     */
    suggestionsLoading: boolean;
    /**
     * If true, dispatches `query-change` event with the current
     * query on every change of search input.
     * Default: true
     */
    notifyOnQueryChange: boolean;
    /**
     * If true, dispatches `query-submit` event with the current
     *  query upon receiving key press event with specific keys
     * passed to `keys` string array.
     * Default: true
     */
    submitOnKeyPress: boolean;
    /**
     * Determines which keys should trigger submitting
     * search query.
     * Default: ['ENTER']
     */
    submitKeys: string[];
    /**
     * If true, keeps focus on search bar after
     * `query-submit` is fired.
     * Default: false
     */
    keepFocus: boolean;
    /**
     * Keyboard Event Listener of ExmgSearchBar
     */
    private _listener?;
    /**
     * Sets `suggestions` property.
     * @param suggestions List of ExmgSearchSuggestion[].
     */
    setSuggestions(suggestions: ExmgSearchSuggestion[]): void;
    /**
     * Clears suggestions.
     */
    clearSuggestions(): void;
    /**
     * Shows the loading indicator if there are
     * no suggestions available.
     */
    showSuggestionsLoading(): void;
    /**
     * Hides the loading indicator.
     */
    hideSuggestionsLoading(): void;
    /**
     * Sets query
     * @param _query String query
     */
    setQuery(_query: string): void;
    /**
     * The function which fires query-submit event.
     * This function exists to fire the query-submit event through not only
     * key press but other actions which is up to developer.
     */
    search(): void;
    firstUpdated(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected _handleClickSuggestion(value: any, index: number): void;
    private _focusIndex;
    private _handleArrowKeyEvents;
    private _handleInputChange;
    private _handleKeyEvent;
    private _tryTransferProperties;
    abstract filter(data: any[], filterKeys: string[], query: string): ExmgSearchSuggestion[];
    abstract renderSuggestions(suggestions: ExmgSearchSuggestion[]): TemplateResult;
    abstract renderSuggestionsLoading(): TemplateResult;
    render(): TemplateResult<1>;
}
/**
 * A helper interface to create a context for suggestions.
 * text: Displayed text for suggestion.
 * icon (Optional): Displayed icon for suggestion. Uses mwc_icon material icon set.
 * value: Value of suggestion. Can be anything.
 * **/
export interface ExmgSearchSuggestion {
    icon?: string;
    text: string;
    value: any;
}