import { h } from "@stencil/core";
/**
 * Checkbox 多选框组件
 * 一组备选项中进行多选
 */
export class Checkbox {
    /**
     * 绑定值
     */
    modelValue = false;
    /**
     * 当前值（用于单个 checkbox）
     */
    value;
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否选中
     * @default false
     */
    checked = false;
    /**
     * 是否不确定状态
     * @default false
     */
    indeterminate = false;
    /**
     * 原生 name 属性
     */
    name;
    /**
     * 原生 id 属性
     */
    checkboxId;
    /**
     * 文本标签
     */
    label;
    /**
     * 是否显示边框
     * @default false
     */
    border = false;
    /**
     * 尺寸
     */
    size = 'default';
    /**
     * 值改变事件
     */
    hbChange;
    isChecked = false;
    handleValueChange() {
        this.updateChecked();
    }
    componentDidLoad() {
        this.updateChecked();
    }
    updateChecked() {
        if (this.value !== undefined) {
            // 在 checkbox group 中
            const modelValue = this.modelValue;
            this.isChecked = Array.isArray(modelValue) && modelValue.includes(this.value);
        }
        else {
            // 单个 checkbox
            this.isChecked = this.checked || this.modelValue;
        }
    }
    handleChange = (e) => {
        const target = e.target;
        if (this.disabled) {
            e.preventDefault();
            return;
        }
        if (this.value !== undefined) {
            // 在 checkbox group 中
            const modelValue = this.modelValue || [];
            let newValue;
            if (target.checked) {
                newValue = [...modelValue, this.value];
            }
            else {
                newValue = modelValue.filter(v => v !== this.value);
            }
            this.modelValue = newValue;
            this.hbChange.emit(newValue);
        }
        else {
            // 单个 checkbox
            this.modelValue = target.checked;
            this.isChecked = target.checked;
            this.hbChange.emit(target.checked);
        }
    };
    render() {
        const inputId = this.checkboxId || `hb-checkbox-${Math.random().toString(36).substr(2, 9)}`;
        return (h("label", { key: '4a8a921d4acee922e78022b7a2d9acbbe4c81ca9', class: {
                'hb-checkbox': true,
                'hb-checkbox--checked': this.isChecked,
                'hb-checkbox--disabled': this.disabled,
                'hb-checkbox--border': this.border,
                [`hb-checkbox--${this.size}`]: true,
            } }, h("span", { key: '53b12cc28cdb425aae8313b82e42c3d6495ba29b', class: "hb-checkbox__input" }, h("input", { key: '91bf4e03b846281ba487dbe66a7e89ecd90cec47', type: "checkbox", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, class: "hb-checkbox__original" }), h("span", { key: 'f8c2cf109ccd867a11d90202b2ccc9e65a24f209', class: {
                'hb-checkbox__inner': true,
                'hb-checkbox__inner--indeterminate': this.indeterminate,
            } })), (this.label || this.value !== undefined) && (h("span", { key: '388050b4cc69b3d760ba7d3ae9f115adeb3e47f0', class: "hb-checkbox__label" }, h("slot", { key: '3368be81921aa59e5114bb975e8821aab60ec396' }, this.label || this.value)))));
    }
    static get is() { return "hb-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["checkbox.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["checkbox.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean | (string | number)[]",
                    "resolved": "(string | number)[] | boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u5F53\u524D\u503C\uFF08\u7528\u4E8E\u5355\u4E2A checkbox\uFF09"
                },
                "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"
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u4E0D\u786E\u5B9A\u72B6\u6001"
                },
                "getter": false,
                "setter": false,
                "attribute": "indeterminate",
                "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
            },
            "checkboxId": {
                "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": "checkbox-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": "boolean | (string | number)[]",
                    "resolved": "(string | number)[] | boolean",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }, {
                "propName": "checked",
                "methodName": "handleValueChange"
            }, {
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=Checkbox.js.map
