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: '7ad80628d781180e6b1f44379bd7190888c63d72' }, h("slot", { key: '2ae50eac76babed7bfbae2c8ee61af0c4ed6a077', name: "left" }), h("span", { key: '1eaf01728a735b9e0846a44aedf438b344c21a8b', onClick: () => this.handleClick() }, h("slot", { key: 'cfb457b135129daac608b42cba118cd5ea461e31' })), h("slot", { key: '0d1d581fba45d431d6364776b447e29d5d34a869', name: "right" }), h("x-icon", { key: '25e54f9dd26beaa7202c33fd6f66b4804c2f6d28', 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
            }];
    }
}
