import { Host, h } from "@stencil/core";
export class XInputSuggestion {
    /**
     * On click element event listener
     */
    handleClick() {
        if (this.input) {
            this.input.value = this.el.innerText.trim();
            this.input.dispatchEvent(new Event('input', { bubbles: false }));
        }
    }
    /**
     * 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: 'b4c241d50409f133a1f5df68503c74f754c1b801' }, h("slot", { key: '95cb9c1bf40cabf3f98dd1c219595be1ace1c5d9', name: "left" }), h("span", { key: 'f5d2f175466a17335b1985bd34586ee284c42c7d', onClick: () => this.handleClick() }, h("slot", { key: '6ee535cd9b2268d72a4446066d4bf064926aea25' })), h("slot", { key: 'dc687b2498b52a80bcf58cd4516db7e555876c80', name: "right" }), h("x-icon", { key: '71cc02957babfff0a05f8e15245f1c7c5877b6ed', 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": "handleClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
