import { h } from "@stencil/core";
/**
 * Radio 单选框组件
 * 在一组备选项中进行单选
 */
export class Radio {
    el;
    /**
     * 绑定值
     */
    modelValue;
    /**
     * 单选框的值
     */
    value;
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否选中
     * @default false
     */
    checked = false;
    /**
     * 原生 name 属性
     */
    name;
    /**
     * 原生 id 属性
     */
    radioId;
    /**
     * 文本标签
     */
    label;
    /**
     * 是否显示边框
     * @default false
     */
    border = false;
    /**
     * 尺寸
     */
    size = 'default';
    /**
     * 值改变事件
     */
    hbChange;
    isChecked = false;
    handleValueChange() {
        this.updateChecked();
    }
    componentDidLoad() {
        this.updateChecked();
    }
    updateChecked() {
        if (this.value !== undefined) {
            // 在 radio group 中
            this.isChecked = this.modelValue === this.value;
        }
        else {
            // 单个 radio
            this.isChecked = this.checked;
        }
    }
    handleChange = (e) => {
        const target = e.target;
        if (this.disabled) {
            e.preventDefault();
            return;
        }
        if (this.value !== undefined) {
            // 在 radio group 中
            this.modelValue = this.value;
            this.isChecked = true;
            this.hbChange.emit(this.value);
        }
        else {
            // 单个 radio
            this.isChecked = target.checked;
            if (target.checked && this.value !== undefined) {
                this.hbChange.emit(this.value);
            }
            else {
                this.hbChange.emit(target.checked);
            }
        }
    };
    render() {
        const inputId = this.radioId || `hb-radio-${Math.random().toString(36).substr(2, 9)}`;
        return (h("label", { key: '3f069ee164a78574c94d973e06f435d172170d8c', class: {
                'hb-radio': true,
                'hb-radio--checked': this.isChecked,
                'hb-radio--disabled': this.disabled,
                'hb-radio--border': this.border,
                [`hb-radio--${this.size}`]: true,
            } }, h("span", { key: 'e8e0c6976efa57516d14bba9385f2424400c749c', class: "hb-radio__input" }, h("input", { key: '6a5cf424f748330a8b9214a2ee75f154f599a9ca', type: "radio", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, value: this.value, onChange: this.handleChange, class: "hb-radio__original" }), h("span", { key: '7c2d37231c2b7f28001bfb95014ffc638c324633', class: "hb-radio__inner" })), (this.label || this.value !== undefined) && (h("span", { key: '05980e96a3068f1dfd44719f688eb68c715fde85', class: "hb-radio__label" }, h("slot", { key: '96dfbd6157a555033a3f749032a44272c3a8588b' }, this.label || this.value)))));
    }
    static get is() { return "hb-radio"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["radio.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["radio.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false
            },
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u5355\u9009\u6846\u7684\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u7981\u7528"
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u9009\u4E2D"
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F name \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "radioId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F id \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "radio-id",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6587\u672C\u6807\u7B7E"
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u8FB9\u6846"
                },
                "getter": false,
                "setter": false,
                "attribute": "border",
                "reflect": false,
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "isChecked": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string | number | boolean",
                    "resolved": "boolean | number | string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }, {
                "propName": "checked",
                "methodName": "handleValueChange"
            }, {
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=Radio.js.map
