import { h } from "@stencil/core";
/**
 * Switch 开关组件
 * 表示两种相互对立的状态间的切换，多用于触发「开/关」
 */
export class Switch {
    /**
     * 绑定值
     */
    modelValue = false;
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否显示文字描述
     * @default false
     */
    activeText;
    /**
     * 关闭时的文字描述
     */
    inactiveText;
    /**
     * 打开时的背景色
     */
    activeColor;
    /**
     * 关闭时的背景色
     */
    inactiveColor;
    /**
     * 打开时的值
     * @default true
     */
    activeValue = true;
    /**
     * 关闭时的值
     * @default false
     */
    inactiveValue = false;
    /**
     * 宽度
     */
    width;
    /**
     * 是否内联提示
     * @default false
     */
    inlinePrompt = false;
    /**
     * 值改变事件
     */
    hbChange;
    handleChange = (e) => {
        if (this.disabled) {
            e.preventDefault();
            return;
        }
        const checked = e.target.checked;
        const value = checked ? this.activeValue : this.inactiveValue;
        this.modelValue = checked;
        this.hbChange.emit(value);
    };
    render() {
        const isChecked = this.modelValue === this.activeValue;
        const width = this.width || (this.activeText || this.inactiveText ? 60 : 40);
        return (h("label", { key: '1604fb9d4cee4a550e4d17cfde2804795c975b49', class: {
                'hb-switch': true,
                'hb-switch--checked': isChecked,
                'hb-switch--disabled': this.disabled,
            }, style: {
                '--hb-switch-width': `${width}px`,
                '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',
                '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',
            } }, h("input", { key: 'bcf5f240a911b79fe93a06c03d4defc9da535007', type: "checkbox", class: "hb-switch__original", role: "switch", "aria-checked": isChecked ? 'true' : 'false', checked: isChecked, disabled: this.disabled, onChange: this.handleChange, "aria-label": this.activeText || this.inactiveText || undefined }), h("span", { key: 'c021d1bda42d0a888b5620182e9839bdcda2acfd', class: "hb-switch__core" }, this.activeText || this.inactiveText ? (h("span", { class: "hb-switch__inner" }, isChecked ? this.activeText : this.inactiveText)) : null)));
    }
    static get is() { return "hb-switch"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["switch.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["switch.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "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"
            },
            "activeText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u6587\u5B57\u63CF\u8FF0"
                },
                "getter": false,
                "setter": false,
                "attribute": "active-text",
                "reflect": false
            },
            "inactiveText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u65F6\u7684\u6587\u5B57\u63CF\u8FF0"
                },
                "getter": false,
                "setter": false,
                "attribute": "inactive-text",
                "reflect": false
            },
            "activeColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "active-color",
                "reflect": false
            },
            "inactiveColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272"
                },
                "getter": false,
                "setter": false,
                "attribute": "inactive-color",
                "reflect": false
            },
            "activeValue": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "boolean | string | number",
                    "resolved": "boolean | number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "true"
                        }],
                    "text": "\u6253\u5F00\u65F6\u7684\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "active-value",
                "reflect": false,
                "defaultValue": "true"
            },
            "inactiveValue": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "boolean | string | number",
                    "resolved": "boolean | number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u5173\u95ED\u65F6\u7684\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "inactive-value",
                "reflect": false,
                "defaultValue": "false"
            },
            "width": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false
            },
            "inlinePrompt": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u5185\u8054\u63D0\u793A"
                },
                "getter": false,
                "setter": false,
                "attribute": "inline-prompt",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    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": "boolean | number | string",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=Switch.js.map
