/**
 * @fileoverview added by tsickle
 * Generated from: lib/form/tag-input/index.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
// 组件类
import { Component, EventEmitter, Input, Output } from "@angular/core";
export class TagInputComponent {
    constructor() {
        this.value = [];
        this.disabled = false;
        this.error = false;
        this.minlength = 3;
        this.maxlength = 30;
        this.valueChange = new EventEmitter();
        this.focus = new EventEmitter();
        this.blur = new EventEmitter();
        this.keyup = new EventEmitter();
        this.inputError = false;
    }
    /**
     * @return {?}
     */
    get inputMinlength() {
        return this.minlength === undefined ? 3 : this.minlength;
    }
    /**
     * @return {?}
     */
    get inputMaxlength() {
        return this.minlength === undefined ? 30 : this.maxlength;
    }
    /**
     * @return {?}
     */
    ngOnInit() { }
    /**
     * @param {?} tag
     * @return {?}
     */
    onRemoveTag(tag) {
        /** @type {?} */
        const tagsList = this.value.filter((/**
         * @param {?} i
         * @return {?}
         */
        (i) => i !== tag));
        this.valueChange.emit(tagsList);
    }
    /**
     * @param {?} event
     * @param {?=} type
     * @return {?}
     */
    onAddTag(event, type) {
        /** @type {?} */
        const inputValue = event.target.value;
        if (inputValue && this.verifyInputValue(inputValue)) {
            this.valueChange.emit([...this.value, inputValue]);
            event.target.value = "";
        }
        if (!type)
            this.keyup.emit(event);
    }
    /**
     * @param {?} inputValue
     * @return {?}
     */
    verifyInputValue(inputValue) {
        this.inputError = false;
        /** @type {?} */
        const inputValueLength = inputValue.length;
        if (this.value.includes(inputValue) ||
            inputValueLength > this.inputMaxlength ||
            inputValueLength < this.inputMinlength) {
            this.inputError = true;
            return false;
        }
        return true;
    }
    /**
     * @return {?}
     */
    onInput() {
        this.inputError = false;
    }
    /**
     * @return {?}
     */
    onFocus() {
        this.focus.emit();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onBlur(event) {
        this.onAddTag(event, "blur");
        this.blur.emit();
    }
}
TagInputComponent.decorators = [
    { type: Component, args: [{
                selector: "rs-tag-input",
                template: "<div\r\n  class=\"form-tags\"\r\n  [ngClass]=\"{\r\n    disabled: disabled,\r\n    error: inputError || error\r\n  }\"\r\n>\r\n  <div class=\"form-tags-item\" *ngFor=\"let tag of value\">\r\n    <span>{{ tag }}</span>\r\n    <span class=\"form-tags-remove\" (click)=\"onRemoveTag(tag)\"></span>\r\n  </div>\r\n  <input\r\n    class=\"form-tags-input\"\r\n    (keyup.enter)=\"onAddTag($event)\"\r\n    (input)=\"onInput()\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur($event)\"\r\n    autocomplete=\"off\"\r\n    [minLength]=\"inputMinlength\"\r\n    [maxLength]=\"inputMaxlength\"\r\n  />\r\n</div>\r\n",
                styles: [".form-tags{display:flex;flex-flow:row wrap;border-radius:4px;overflow:hidden;gap:4px 8px;padding:3px 4px;min-height:28px;box-shadow:none;border-radius:var(--rs-input-border-radius);border:1px solid var(--rs-input-border-color);background-color:#fff;cursor:pointer}.form-tags:not(.error):not(.disabled):hover{box-shadow:0 0 3px 0 rgba(31,123,255,.4);border-color:var(--rs-input-hover-border-color)}.form-tags:focus-within{border-color:var(--rs-input-focus-border-color);box-shadow:none}.form-tags.error:not(:focus-within){border-color:var(--rs-input-error-border-color)!important}.form-tags.disabled{pointer-events:none;border-color:var(--rs-input-border-color)!important;font-size:var(--rs-input-font-size);color:var(--rs-input-disabled-color)!important;background-color:var(--rs-input-disabled-bg)!important;-webkit-text-fill-color:var(--rs-input-disabled-color)!important}.form-tags.disabled .form-tags-input{background-color:var(--rs-input-disabled-bg)!important}.form-tags .form-tags-input{flex:auto;width:auto;padding:0 4px;border:none;outline:0;font-size:var(--rs-input-font-size);color:var(--rs-input-color)!important}.form-tags .form-tags-item{box-sizing:border-box;height:20px;padding:0 8px;border:1px solid #eaedf0;border-radius:12px;background-color:#f8fafb;color:#44566c;font-family:Arial;font-size:11px;font-style:normal;font-weight:400;line-height:12px;display:flex;flex-flow:row nowrap;align-items:center;position:relative}.form-tags .form-tags-item .form-tags-remove{visibility:hidden;width:20px;height:20px;border:1px solid #dbe1e7;border-radius:20px;background-color:#fff;line-height:18px;text-align:center;position:absolute;top:-1px;right:-1px}.form-tags .form-tags-item .form-tags-remove::after{content:url(/assets/img/tag-remove.svg);cursor:pointer}.form-tags .form-tags-item:hover .form-tags-remove{visibility:visible}"]
            }] }
];
TagInputComponent.propDecorators = {
    value: [{ type: Input }],
    fields: [{ type: Input }],
    disabled: [{ type: Input }],
    error: [{ type: Input }],
    minlength: [{ type: Input, args: ["inputMinlength",] }],
    maxlength: [{ type: Input, args: ["inputMaxlength",] }],
    valueChange: [{ type: Output }],
    focus: [{ type: Output }],
    blur: [{ type: Output }],
    keyup: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    TagInputComponent.prototype.value;
    /** @type {?} */
    TagInputComponent.prototype.fields;
    /** @type {?} */
    TagInputComponent.prototype.disabled;
    /** @type {?} */
    TagInputComponent.prototype.error;
    /** @type {?} */
    TagInputComponent.prototype.minlength;
    /** @type {?} */
    TagInputComponent.prototype.maxlength;
    /** @type {?} */
    TagInputComponent.prototype.valueChange;
    /** @type {?} */
    TagInputComponent.prototype.focus;
    /** @type {?} */
    TagInputComponent.prototype.blur;
    /** @type {?} */
    TagInputComponent.prototype.keyup;
    /** @type {?} */
    TagInputComponent.prototype.inputError;
}
//# sourceMappingURL=data:application/json;base64, 