import { Host, h } from "@stencil/core";
export class XInputSuggestion {
    onClick() {
        if (this.input) {
            this.input.setValue(this.el.innerText.trim());
            this.input.dispatchEvent(new Event('input'));
        }
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        this.input = this.el.closest('x-input');
        this.input && this.input.addEventListener('input', () => {
            this.computeSpanText(this.input.value.toString());
        });
    }
    /**
     * Change the hightlight text on the suggestion item
     */
    computeSpanText(value) {
        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: 'c4e09c4ab0ad2cd10237db5dbfc53b0a309f9d47' }, h("slot", { key: '7ad6b8fdd3d88b7c2a6586f907b948ffd568809b', name: "left" }), h("span", { key: '3c15a4a014dc48bba7f470de35953a1939606b14', onClick: () => this.onClick() }, h("slot", { key: 'd125d7b823d3e36050066acd1da75d8b7110cee9' })), h("slot", { key: 'a536adfcc30bf92d35cc16de5ac5b8932cc755ab', name: "right" }), h("x-icon", { key: 'bec45f4058e998ed203f13bcaeb4f2ae224dc034', 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
            }];
    }
}
