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: 'bb70d145d175f824ac94031b3f9c2c2b10da2bbc' }, h("slot", { key: '99ded3c8d874a802b8f97262d42ca61572d92e70', name: "left" }), h("span", { key: 'c20e5ade3f9ef3789373b98d0701c91e4c1a7a23', onClick: () => this.onClick() }, h("slot", { key: 'c0ded6b503a07cb61b73d11ada5c371f5a882a2b' })), h("slot", { key: '730ce05291c9a79a6f7a478e08fdb128765425f1', name: "right" }), h("x-icon", { key: '5adc249509e5de98350988d0a4cd8beb2bf578f1', 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
            }];
    }
}
