import { h } from "@stencil/core";
/**
 * InputTag 标签输入框组件
 * 通过回车或者标签关闭按钮添加/删除标签
 */
export class InputTag {
    el;
    /**
     * 绑定值
     */
    modelValue = [];
    /**
     * 输入框尺寸
     */
    size = 'default';
    /**
     * 是否禁用
     * @default false
     */
    disabled = false;
    /**
     * 输入框占位文本
     */
    placeholder;
    /**
     * 输入框最大长度
     */
    maxlength;
    /**
     * 最大标签数量
     */
    max;
    /**
     * 是否可清空
     * @default false
     */
    clearable = false;
    /**
     * 输入框宽度
     */
    width;
    /**
     * 标签类型
     */
    type;
    /**
     * 是否可关闭
     * @default true
     */
    closable = true;
    /**
     * 输入框是否可见
     * @default true
     */
    inputVisible = true;
    inputValue = '';
    isFocused = false;
    inputRef;
    /**
     * 值改变事件
     */
    hbChange;
    /**
     * 移除标签时触发
     */
    hbRemove;
    /**
     * 输入事件
     */
    hbInput;
    handleInput = (e) => {
        const target = e.target;
        this.inputValue = target.value;
        this.hbInput.emit(target.value);
    };
    handleKeyDown = (e) => {
        if (e.key === 'Enter' && this.inputValue.trim()) {
            e.preventDefault();
            this.addTag(this.inputValue.trim());
        }
        else if (e.key === 'Backspace' && !this.inputValue && this.modelValue.length > 0) {
            this.removeTag(this.modelValue[this.modelValue.length - 1]);
        }
    };
    handleFocus = () => {
        this.isFocused = true;
    };
    handleBlur = () => {
        this.isFocused = false;
        if (this.inputValue.trim()) {
            this.addTag(this.inputValue.trim());
        }
    };
    addTag(tag) {
        if (this.max && this.modelValue.length >= this.max) {
            return;
        }
        if (!this.modelValue.includes(tag)) {
            const newValue = [...this.modelValue, tag];
            this.modelValue = newValue;
            this.inputValue = '';
            this.hbChange.emit(newValue);
            if (this.inputRef) {
                this.inputRef.value = '';
            }
        }
    }
    removeTag(tag) {
        const newValue = this.modelValue.filter(t => t !== tag);
        this.modelValue = newValue;
        this.hbChange.emit(newValue);
        this.hbRemove.emit(tag);
    }
    handleClearAll = (e) => {
        e.stopPropagation();
        this.modelValue = [];
        this.hbChange.emit([]);
    };
    render() {
        return (h("div", { key: '8623f46b1c4b3a6fbc2f3e1238695d34f08eac16', class: {
                'hb-input-tag': true,
                [`hb-input-tag--${this.size}`]: true,
                'hb-input-tag--disabled': this.disabled,
                'hb-input-tag--focused': this.isFocused,
            }, style: this.width ? { width: this.width } : undefined }, this.modelValue.map((tag) => (h("span", { class: {
                'hb-input-tag__tag': true,
                [`hb-input-tag__tag--${this.type}`]: !!this.type,
            } }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '16c0936153b04ffb0ad4949f66c7994470b7fb91', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '9995f3650302013f402f8bd3878c5ce974dfbc00', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
    }
    static get is() { return "hb-input-tag"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["input-tag.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["input-tag.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'default' | 'small'",
                    "resolved": "\"default\" | \"large\" | \"small\"",
                    "references": {}
                },
                "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"
            },
            "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
            },
            "maxlength": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u6700\u5927\u957F\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "maxlength",
                "reflect": false
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6700\u5927\u6807\u7B7E\u6570\u91CF"
                },
                "getter": false,
                "setter": false,
                "attribute": "max",
                "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"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u8F93\u5165\u6846\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'success' | 'info' | 'warning' | 'danger'",
                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u6807\u7B7E\u7C7B\u578B"
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false
            },
            "closable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "true"
                        }],
                    "text": "\u662F\u5426\u53EF\u5173\u95ED"
                },
                "getter": false,
                "setter": false,
                "attribute": "closable",
                "reflect": false,
                "defaultValue": "true"
            },
            "inputVisible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "true"
                        }],
                    "text": "\u8F93\u5165\u6846\u662F\u5426\u53EF\u89C1"
                },
                "getter": false,
                "setter": false,
                "attribute": "input-visible",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get states() {
        return {
            "inputValue": {},
            "isFocused": {}
        };
    }
    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": "hbRemove",
                "name": "hbRemove",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u79FB\u9664\u6807\u7B7E\u65F6\u89E6\u53D1"
                },
                "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": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=InputTag.js.map
