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: '5f0fc8f9e2790e1e0ae55729a723dfa7087b0803', value: this.value, disabled: this.disabled, matched: this.matched, selected: this.selected }, h("slot", { key: '1c65cdb2c915436e269b5d3ced1101e47ea10546', name: "left" }), h("div", { key: '3f2e889f0716edf5143a3593e6244f98d0d4d901' }, h("span", { key: 'ec81cbb3acf654413daf4a1291ce1fca715dcefd' }, h("slot", { key: 'fdb885c6d391bb691799c41b373f3bc416fbc0e1' })), h("small", { key: 'd67250259d5fe230f28c0a077305b57cfef7f272' }, h("slot", { key: '9ddd93f3a4e24cce82f8f2cf8ccd33e56be5473d', name: "description" }))), h("slot", { key: '6c6ff8894aa464ef546a983208c13faf4fc2c8d4', name: "right" }), this.selected && h("x-icon", { key: '7007ec166e067fbcedeb09c76652c3c5c9fc1647', 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
            }];
    }
}
