import { Host, h } from "@stencil/core";
export class XSelectOption {
    constructor() {
        this.value = undefined;
        this.selected = undefined;
        this.disabled = undefined;
        this.matched = true;
    }
    /**
     * On options is selected
     */
    async onClick() {
        if (this.disabled) {
            return;
        }
        this.el.closest('x-select').dispatchEvent(new CustomEvent('option-selected', {
            detail: {
                value: await this.getValue(),
                text: await this.getElementOptionText(),
            },
        }));
    }
    /**
     * Get the value of the option
     */
    async getValue() {
        return this.value || await this.getElementOptionText();
    }
    /**
     * Return only the inner text of the option
     */
    async getElementOptionText() {
        return this.el.querySelector('div > span').innerText.trim();
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.input = this.el.closest('x-select').querySelector('.select-input');
        this.input && this.input.addEventListener('input', this.computeSpanText.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        if (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('div > span');
        const text = span.textContent.trim();
        span.innerHTML = text.replace(new RegExp(value, 'gi'), (x) => `<b>${x}</b>`);
        this.matched = (new RegExp(value, 'gi')).test(text) && value != '';
    }
    /**
     * Element render
     */
    render() {
        return (h(Host, { key: 'ba98d6fc6610884eab25088bb5aa1f9f496410cb', value: this.value, disabled: this.disabled, matched: this.matched, selected: this.selected }, h("slot", { key: 'fa6791626df8fa7992f6270512d392944de72777', name: "left" }), h("div", { key: 'd41b7e9de37fb5279631f04877fdc75ee31bdf6e' }, h("span", { key: '44f50e6d0ff590b82e03626a70fc6b7d9b9afe63' }, h("slot", { key: 'bade9ac1bf67a646f975f79f7b00af44c04889d1' })), h("small", { key: 'dd21964a9a3c818c39ec40fb2d45bfceb6fb5ee6' }, h("slot", { key: '5c129aec5c94eab2c906204ff804fadeac4ad38e', name: "description" }))), h("slot", { key: 'ab1bcf9fd4b3879d09d4b7fcf2dcc706aa2db68e', name: "right" }), this.selected && h("x-icon", { key: '9770334e1166306380245812f06cc694a8fbefd9', name: "check" })));
    }
    static get is() { return "x-select-option"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element value"
                },
                "attribute": "value",
                "reflect": false
            },
            "selected": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element selected state"
                },
                "attribute": "selected",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element disabled state"
                },
                "attribute": "disabled",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "matched": {}
        };
    }
    static get methods() {
        return {
            "getValue": {
                "complexType": {
                    "signature": "() => Promise<string>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string>"
                },
                "docs": {
                    "text": "Get the value of the option",
                    "tags": []
                }
            },
            "getElementOptionText": {
                "complexType": {
                    "signature": "() => Promise<string>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLSpanElement": {
                            "location": "global",
                            "id": "global::HTMLSpanElement"
                        }
                    },
                    "return": "Promise<string>"
                },
                "docs": {
                    "text": "Return only the inner text of the option",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "click",
                "method": "onClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
