@exmg/exmg-searchbar/exmg-searchbar.js

An element to search the needle in a haystack.

import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement } from 'lit/decorators';
import '@material/mwc-icon/mwc-icon.js';
import { ExmgSearchBarBase } from './exmg-searchbar-base.js';
let ExmgSearchBar = class ExmgSearchBar extends ExmgSearchBarBase {
    filter(data, filterKeys, query) {
        const results = [];
        if (query.length == 0)
            return results;
        data.forEach((obj) => {
            for (let i = 0; i < filterKeys.length; i++) {
                const lookingIn = String(obj[filterKeys[i]]);
                if (lookingIn.toLowerCase().includes(query.toLowerCase())) {
                    if (this.suggestionLabelKey)
                        results.push({ text: obj[this.suggestionLabelKey], value: obj });
                    break;
                }
            }
        });
        return results;
    }
    renderSuggestionsLoading() {
        return html `
      <paper-listbox>
        <paper-item class="loader"><paper-spinner-lite active></paper-spinner-lite></paper-item>
      </paper-listbox>
    `;
    }
    renderSuggestions(suggestions) {
        return html `
      <div class="suggestions-list">
        ${suggestions.map((suggestion, index) => html `
              <paper-item focusable class="suggestion" @click=${() => this._handleClickSuggestion(suggestion.value, index)}
                >${suggestion.icon ? html ` <mwc-icon>${suggestion.icon}</mwc-icon> ` : html ``}${suggestion.text}</paper-item
              >
            `)}
      </div>
    `;
    }
};
ExmgSearchBar = __decorate([
    customElement('exmg-searchbar')
], ExmgSearchBar);
export { ExmgSearchBar };
//# sourceMappingURL=exmg-searchbar.js.map