import { h } from "@stencil/core";
import { hasInputValue, isClearVisible, sizeClassMap } from "../../utils/form-input-base";
/**
 * Input 输入框组件
 * 通过鼠标或键盘输入字符
 */
export class Input {
    el;
    /**
     * 绑定值
     */
    modelValue = '';
    /**
     * 输入框类型
     */
    type = 'text';
    /**
     * 输入框尺寸
     */
    size = 'default';
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 是否只读
     * @default false
     */
    readonly = false;
    /**
     * 输入框占位文本
     */
    placeholder;
    /**
     * 是否可清空
     * @default false
     */
    clearable = false;
    /**
     * 是否显示密码可见性切换
     * @default false
     */
    showPassword = false;
    /**
     * 是否显示字数统计
     * @default false
     */
    showWordLimit = false;
    /**
     * 最大输入长度
     */
    maxlength;
    /**
     * 最小输入长度
     */
    minlength;
    /**
     * 原生 name 属性
     */
    name;
    /**
     * 原生 id 属性
     */
    inputId;
    /**
     * 原生 autocomplete 属性
     */
    autocomplete;
    /**
     * 原生 autofocus 属性
     */
    autofocus = false;
    /**
     * 输入框头部图标
     */
    prefixIcon;
    /**
     * 输入框尾部图标
     */
    suffixIcon;
    /**
     * 输入框行数，仅 type 为 'textarea' 时有效
     */
    rows = 2;
    /**
     * 是否自适应内容高度，仅 type 为 'textarea' 时有效
     */
    autosize = false;
    /**
     * 是否调整 textarea 大小
     */
    resize;
    isFocused = false;
    showClear = false;
    passwordVisible = false;
    inputValue = '';
    inputRef;
    /**
     * 值改变事件
     */
    hbChange;
    /**
     * 输入事件
     */
    hbInput;
    /**
     * 聚焦事件
     */
    hbFocus;
    /**
     * 失焦事件
     */
    hbBlur;
    /**
     * 清空事件
     */
    hbClear;
    handleValueChange() {
        this.inputValue = this.modelValue;
        this.updateClearVisible();
    }
    componentDidLoad() {
        this.inputValue = this.modelValue;
        this.updateClearVisible();
    }
    updateClearVisible() {
        this.showClear = isClearVisible({
            clearable: this.clearable,
            disabled: this.disabled,
            readonly: this.readonly,
            hasValue: hasInputValue(this.inputValue),
        });
    }
    handleInput = (e) => {
        const target = e.target;
        this.inputValue = target.value;
        this.modelValue = target.value;
        this.updateClearVisible();
        this.hbInput.emit(target.value);
    };
    handleChange = (e) => {
        const target = e.target;
        this.hbChange.emit(target.value);
    };
    handleFocus = (e) => {
        this.isFocused = true;
        this.updateClearVisible();
        this.hbFocus.emit(e);
    };
    handleBlur = (e) => {
        this.isFocused = false;
        this.updateClearVisible();
        this.hbBlur.emit(e);
    };
    handleClear = (e) => {
        e.stopPropagation();
        this.inputValue = '';
        this.modelValue = '';
        this.updateClearVisible();
        this.hbClear.emit();
        this.hbChange.emit('');
        if (this.inputRef) {
            this.inputRef.focus();
        }
    };
    togglePasswordVisible = () => {
        this.passwordVisible = !this.passwordVisible;
    };
    getInputType() {
        if (this.type === 'password' && this.showPassword) {
            return this.passwordVisible ? 'text' : 'password';
        }
        return this.type;
    }
    render() {
        const isTextarea = this.type === 'textarea';
        const InputTag = isTextarea ? 'textarea' : 'input';
        return (h("div", { key: '22b51bd1c9e0c3086ed167eea57f3b5818685785', class: {
                ...sizeClassMap('hb-input', this.size),
                'hb-input--disabled': this.disabled,
                'hb-input--focused': this.isFocused,
            } }, this.prefixIcon && (h("span", { key: 'ef3b02d947c45ac282814a0e2e4909f8473469eb', class: "hb-input__prefix" }, h("i", { key: '88f95312bf9aa489d5d27a1f701b2eadc794d7cf', class: this.prefixIcon }))), h(InputTag, { key: 'fe5de1f3dcf5441aebb5bcc943c64d59221211d7', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea && this.resize ? { resize: this.resize } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: 'db106e66989483c48171aad758cd5a443ef7670a', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '3fa676f9860aa3018247c9d61bad432afdea4345', class: "hb-input__suffix-inner hb-input__clear", onClick: this.handleClear }, "\u00D7")), this.type === 'password' && this.showPassword && (h("span", { key: '8911301b65aa3435f7f3b933b9b8de1b055c266e', class: "hb-input__suffix-inner hb-input__password", onClick: this.togglePasswordVisible }, this.passwordVisible ? '👁️' : '👁️‍🗨️')), this.suffixIcon && (h("span", { key: '14fa885ec429419525ea5cd550fc7d9cec9f3ee4', class: "hb-input__suffix-inner" }, h("i", { key: '36995c1f4e5d2c258170e7ad8a012e586d905e62', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '383d7d25fbbb77dad3df3ebbbf4e0b1fc504a4b4', class: "hb-input__count" }, h("span", { key: '564d4a6ac0feae0be61378f52aae3b22872566fb', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
    }
    static get is() { return "hb-input"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["input.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["input.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false,
                "defaultValue": "''"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u7C7B\u578B"
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'text'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ComponentSize",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {
                        "ComponentSize": {
                            "location": "import",
                            "path": "../../utils/form-input-base",
                            "id": "src/utils/form-input-base.ts::ComponentSize"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5C3A\u5BF8"
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "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"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u53EA\u8BFB"
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false
            },
            "clearable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
                },
                "getter": false,
                "setter": false,
                "attribute": "clearable",
                "reflect": false,
                "defaultValue": "false"
            },
            "showPassword": {
                "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\u5BC6\u7801\u53EF\u89C1\u6027\u5207\u6362"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-password",
                "reflect": false,
                "defaultValue": "false"
            },
            "showWordLimit": {
                "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\u5B57\u6570\u7EDF\u8BA1"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-word-limit",
                "reflect": false,
                "defaultValue": "false"
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u8F93\u5165\u957F\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "maxlength",
                "reflect": false
            },
            "minlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5C0F\u8F93\u5165\u957F\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "minlength",
                "reflect": 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
            },
            "inputId": {
                "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": "input-id",
                "reflect": false
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F autocomplete \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "autocomplete",
                "reflect": false
            },
            "autofocus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u539F\u751F autofocus \u5C5E\u6027"
                },
                "getter": false,
                "setter": false,
                "attribute": "autofocus",
                "reflect": false,
                "defaultValue": "false"
            },
            "prefixIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807"
                },
                "getter": false,
                "setter": false,
                "attribute": "prefix-icon",
                "reflect": false
            },
            "suffixIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807"
                },
                "getter": false,
                "setter": false,
                "attribute": "suffix-icon",
                "reflect": false
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u884C\u6570\uFF0C\u4EC5 type \u4E3A 'textarea' \u65F6\u6709\u6548"
                },
                "getter": false,
                "setter": false,
                "attribute": "rows",
                "reflect": false,
                "defaultValue": "2"
            },
            "autosize": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean | { minRows?: number; maxRows?: number }",
                    "resolved": "boolean | { minRows?: number; maxRows?: number; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u4EC5 type \u4E3A 'textarea' \u65F6\u6709\u6548"
                },
                "getter": false,
                "setter": false,
                "attribute": "autosize",
                "reflect": false,
                "defaultValue": "false"
            },
            "resize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'none' | 'both' | 'horizontal' | 'vertical'",
                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u8C03\u6574 textarea \u5927\u5C0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "resize",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "isFocused": {},
            "showClear": {},
            "passwordVisible": {},
            "inputValue": {}
        };
    }
    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",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "hbInput",
                "name": "hbInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "hbFocus",
                "name": "hbFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u805A\u7126\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "hbBlur",
                "name": "hbBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u5931\u7126\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "hbClear",
                "name": "hbClear",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u6E05\u7A7A\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=Input.js.map
