radh-ui/dist/esm/radh-autocomplete.entry.js

Stencil Component Starter

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a9700b09.js';

const radhAutocompleteCss = "radh-autocomplete{font-family:\"Avenir\", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin-top:60px}.autocomplete{position:relative;width:130px}.autocomplete-results{padding:0;margin:0;border:1px solid #eeeeee;height:120px;overflow:auto;width:100%}.autocomplete-result{list-style:none;text-align:left;padding:4px 2px;cursor:pointer}.autocomplete-result.is-active,.autocomplete-result:hover{background-color:#4aae9b;color:white}";

class RadhAutocomplete {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.results = [];
        this.search = '';
        this.isLoading = false;
        this.arrowCounter = 0;
        this.activedescendant = '';
        this.valueSelected = createEvent(this, "valueSelected", 7);
    }
    itemsChanged(val) {
        if (val) {
            this.innerItems = JSON.parse(val);
            this.isLoading = false;
        }
    }
    onChange(ev) {
        this.search = ev.target ? ev.target.value : null;
        if (this.isAsync) {
            this.isLoading = true;
        }
        else {
            this.filterResults();
            this.isOpen = true;
        }
    }
    componentWillLoad() {
        this.innerItems = JSON.parse(this.items);
        this.closeOptions();
    }
    componentDidLoad() {
        document.addEventListener("click", this.handleClickOutside);
    }
    componentDidUnload() {
        document.removeEventListener("click", this.handleClickOutside);
    }
    filterResults() {
        this.results = this.innerItems.filter(item => {
            return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
        });
    }
    setResult(result) {
        this.search = result;
        this.isOpen = false;
        this.valueSelected.emit(this.search);
    }
    async closeOptions() {
        this.isOpen = false;
        this.arrowCounter = -1;
    }
    onArrow(ev) {
        if (this.isOpen) {
            if (ev.which === 38) { //UP
                if (this.arrowCounter > 0) {
                    this.arrowCounter = this.arrowCounter - 1;
                    this.setActiveDescendent();
                }
            }
            else if (ev.which === 40) { //DOWN
                if (this.arrowCounter < this.results.length) {
                    this.arrowCounter = this.arrowCounter + 1;
                    this.setActiveDescendent();
                }
            }
        }
    }
    onKeyPress(ev) {
        if (ev.which === 13) { //ENTER
            this.search = this.results[this.arrowCounter];
            this.setResult(this.search);
            this.isOpen = false;
            this.arrowCounter = -1;
        }
    }
    handleClickOutside() {
        var radhAutocomplete = document.querySelector('radh-autocomplete');
        radhAutocomplete.componentOnReady().then(() => {
            radhAutocomplete.closeOptions();
        });
    }
    isSelected(index) {
        return index === this.arrowCounter;
    }
    setActiveDescendent() {
        this.activedescendant = this.getId(this.arrowCounter);
    }
    getId(index) {
        return `result-option-${index}`;
    }
    render() {
        if (this.items) {
            return (h("div", { class: "autocomplete", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false' }, h("label", { htmlFor: this.labelBy, "aria-label": this.labelBy }, this.label), h("input", { type: "text", id: this.labelBy, onInput: (ev) => this.onChange(ev), onKeyPress: (ev) => this.onKeyPress(ev), onKeyDown: (ev) => this.onArrow(ev), "aria-multiline": "false", role: "searchbox", "aria-autocomplete": "list", "aria-controls": "autocomplete-results", "aria-activedescendant": this.activedescendant, "aria-labelledby": this.labelBy, value: this.search, title: 'Elige la fruta', autocomplete: "off" }), this.isOpen
                ? h("ul", { id: "autocomplete-results", class: "autocomplete-results", role: "listbox" }, this.isLoading
                    ? h("li", { class: "loading" }, "Loading results")
                    : h("span", null, this.results.map((result, index) => h("li", { key: index, onClick: () => this.setResult(result), role: "option", id: this.getId(index), "aria-selected": this.isSelected(index), class: 'autocomplete-result' + (this.isSelected(index) ? ' is-active' : '') }, result))))
                : h("span", null)));
        }
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "items": ["itemsChanged"]
    }; }
}
RadhAutocomplete.style = radhAutocompleteCss;

export { RadhAutocomplete as radh_autocomplete };