import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XInputSuggestion {
    constructor() {
        this.block = undefined;
        this.active = false;
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.input = this.el.parentElement.querySelector(`input`);
        this.input && this.input.addEventListener('focus', this.onFocusInput.bind(this));
        this.input && this.input.addEventListener('blur', this.onBlurInput.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        if (this.input) {
            this.input.removeEventListener('focus', this.onFocusInput);
            this.input.removeEventListener('blur', this.onBlurInput);
        }
    }
    /**
     * On focus the input container event
     */
    onFocusInput() {
        if (this.el.querySelectorAll('x-input-suggestion-item').length > 0) {
            this.active = true;
        }
    }
    /**
     * On blur the input container event
     */
    onBlurInput() {
        setTimeout(() => {
            this.active = false;
        }, 100);
    }
    /**
     * Render the component
     */
    render() {
        return h(Host, { key: '64a7ba88592aa71d12a02834a8452bfb7d5c1ece', class: cls({
                'active': this.active,
                'block': this.block,
            }) }, h("div", { key: '0b8b324f94f90e3ca71e83966a1a2f8534ff745c', class: "arrow" }), h("slot", { key: '67bd5773f83f39ab50b3937344ae5df6add97fbb' }), h("div", { key: '1934b6dd0c5677ee4ef9a61dbfcfbc4fe806e35b', class: "suggestion-results" }, h("slot", { key: 'c588b5b0604600b586192477be54ae7fa9ac1714', 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"; }
}
