import { Host, h } from "@stencil/core";
export class XInputSuggestion {
    /**
     * On click element event listener
     */
    onClick() {
        if (this.input) {
            this.input.setValue(this.el.innerText.trim());
            this.input.dispatchEvent(new Event('input'));
        }
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.input = this.el.closest('x-input');
        this.input && this.input.addEventListener('input', this.computeSpanText.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        this.input && this.input.removeEventListener('input', this.computeSpanText);
    }
    /**
     * Change the hightlight text on the suggestion item
     */
    computeSpanText() {
        const value = this.input.value.toString();
        const span = this.el.querySelector('span');
        const text = this.el.textContent;
        span.innerHTML = text.replace(new RegExp(value, 'gi'), (x) => `<b>${x}</b>`);
    }
    /**
     * Render the component
     */
    render() {
        return h(Host, { key: '42ebd1eddb08b1de923dbf8de48fb7302f5d3602' }, h("slot", { key: 'd7cc5a994c9ce88c1f497d7f10db83e55d228d31', name: "left" }), h("span", { key: '39d4a5cc1b7005cf784a7bf4054f92797153a276', onClick: () => this.onClick() }, h("slot", { key: '52e0ec7bc0b71605f7f2d6d27698c9e8000e8f9f' })), h("slot", { key: 'f12b66d54abdc43741d221cfd65098b578bb8ced', name: "right" }), h("x-icon", { key: 'dda37ca06656293590321e4ffbcb7e1a4b35442c', name: "forward" }));
    }
    static get is() { return "x-input-suggestion-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "click",
                "method": "onClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
