import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XInputSuggestion {
    constructor() {
        this.block = undefined;
        this.active = false;
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        const input = this.el.parentElement.querySelector(`input`);
        input && input.addEventListener('focus', () => {
            if (this.el.querySelectorAll('x-input-suggestion-item').length > 0) {
                this.active = true;
            }
        });
        input && input.addEventListener('blur', () => {
            setTimeout(() => {
                this.active = false;
            }, 100);
        });
    }
    /**
     * Render the component
     */
    render() {
        return h(Host, { key: '424e56c504ab452bb903fcb7493230d4c15fddfa', class: cls({
                'active': this.active,
                'block': this.block,
            }) }, h("div", { key: '4a08404bd019cf6c9a3d1f21bc2c36d0e6c1b435', class: "arrow" }), h("slot", { key: 'c0b3ee0c87f5e6b30ba10d0f8110996ac6d765f5' }), h("div", { key: '7b858ad782e54aab802c84edb7573df536a0d7f5', class: "suggestion-results" }, h("slot", { key: '749582adcca077811a45bcc699fdc23cdfc96609', name: "results" })));
    }
    static get is() { return "x-input-suggestion"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "block": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element is full size"
                },
                "attribute": "block",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "active": {}
        };
    }
    static get elementRef() { return "el"; }
}
