var _form, _validator, _subscription, _toBoolReverse, _formatNumber, _lengthError, _setLengthValidate, _customValidator, _updateValidator;
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { FormControl, NgForm, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { ZuiB, ZuiF, ZuiN } from '@material-zui/core';
import { INVALID_EMAIL, INVALID_PATTERN, MAX_LENGTH_MSG, MAX_MSG, MIN_LENGTH_MSG, MIN_MSG, REQUIRED } from '../constants';
export class ZUIInputComponent {
    constructor() {
        this.name = ZuiF.uuid();
        this.align = 'left';
        this.rows = 2;
        this.spellcheckVal = false;
        this.autosizeVal = false;
        this.requiredVal = false;
        this.autofocusVal = false;
        this.disabledVal = false;
        this.disabledErrorVal = false;
        this.tooltipDisabled = true;
        this.tooltipPosition = 'above';
        this.fullWidth = true;
        this.showClearIcon = true;
        this.hideArrows = true;
        this.formatCurrency = true;
        this.allowToggle = true;
        this.disabledValidate = false;
        /** "string" | "number" | "password" | "email" | "textarea" */
        this.type = 'string';
        this.optionsDefault = { thousands: '.', prefix: '', precision: 0, align: 'left', nullable: true };
        this.optionsVal = this.optionsDefault;
        this.validatorMessageDefault = { required: REQUIRED, pattern: INVALID_PATTERN, email: INVALID_EMAIL };
        this.validatorMessageVal = this.validatorMessageDefault;
        /** "legacy" | "standard" | "fill" | "outline"*/
        this.appearance = 'outline';
        _form.set(this, void 0);
        _validator.set(this, void 0);
        this.modelChange = new EventEmitter();
        this.prefixAction = new EventEmitter();
        this.suffixAction = new EventEmitter();
        _subscription.set(this, new Subscription());
        this.formControl = new FormControl();
        this.visibility = false;
        _toBoolReverse.set(this, (val) => (typeof val === 'string' && val !== null && val !== undefined ? false : !val));
        _formatNumber.set(this, (value) => ZuiN.format(value, { thousands: this.optionsVal.thousands }));
        _lengthError.set(this, (message, number) => `${message} ${number ? __classPrivateFieldGet(this, _formatNumber).call(this, number) : ''}`);
        _setLengthValidate.set(this, (validatorMessage) => {
            let { minlength, maxlength, min, max } = validatorMessage !== null && validatorMessage !== void 0 ? validatorMessage : {};
            if (!maxlength)
                maxlength = __classPrivateFieldGet(this, _lengthError).call(this, MAX_LENGTH_MSG, this.maxLength);
            if (!minlength)
                minlength = __classPrivateFieldGet(this, _lengthError).call(this, MIN_LENGTH_MSG, this.minLength);
            if (!max)
                max = __classPrivateFieldGet(this, _lengthError).call(this, MAX_MSG, this.max);
            if (!min)
                min = __classPrivateFieldGet(this, _lengthError).call(this, MIN_MSG, this.min);
            this.validatorMessageVal = Object.assign(Object.assign(Object.assign({}, this.validatorMessageDefault), validatorMessage), { minlength, maxlength, min, max });
        });
        _customValidator.set(this, () => (c) => __awaiter(this, void 0, void 0, function* () {
            const validator = __classPrivateFieldGet(this, _validator).call(this, c === null || c === void 0 ? void 0 : c.value);
            let validatorMsg = null;
            let validatorError = !!validator;
            if (typeof validator === 'string') {
                validatorMsg = validator;
            }
            else if (typeof validator === 'boolean') {
                validatorError = !validator;
            }
            else if (validator instanceof Promise) {
                const resultValidator = yield validator;
                if (typeof resultValidator === 'string') {
                    validatorMsg = resultValidator;
                }
                else if (typeof resultValidator === 'boolean') {
                    validatorError = !resultValidator;
                }
            }
            return validatorError ? { validatorError, validatorMsg } : null;
        }));
        _updateValidator.set(this, () => {
            this.formControl.clearAsyncValidators();
            const asyncValidators = [];
            if (__classPrivateFieldGet(this, _validator))
                asyncValidators.push(__classPrivateFieldGet(this, _customValidator).call(this));
            this.formControl.setAsyncValidators(asyncValidators);
            this.formControl.updateValueAndValidity();
            if (this.validateFirstVal)
                this.formControl.markAllAsTouched();
        });
    }
    set spellcheck(val) {
        this.spellcheckVal = ZuiB.toBool(val);
    }
    set autosize(val) {
        this.autosizeVal = ZuiB.toBool(val);
    }
    set required(val) {
        this.requiredVal = ZuiB.toBool(val);
    }
    set autofocus(val) {
        this.autofocusVal = ZuiB.toBool(val);
    }
    set disabled(val) {
        this.disabledVal = ZuiB.toBool(val);
    }
    set disabledError(val) {
        this.disabledErrorVal = ZuiB.toBool(val);
    }
    set showTooltip(val) {
        this.tooltipDisabled = ZuiB.toBoolReverse(val);
    }
    set noFullWidth(val) {
        this.fullWidth = __classPrivateFieldGet(this, _toBoolReverse).call(this, val);
    }
    set hideClearIcon(val) {
        this.showClearIcon = __classPrivateFieldGet(this, _toBoolReverse).call(this, val);
    }
    set showArrows(val) {
        this.hideArrows = __classPrivateFieldGet(this, _toBoolReverse).call(this, val);
    }
    set noCurrency(val) {
        this.formatCurrency = __classPrivateFieldGet(this, _toBoolReverse).call(this, val);
    }
    set disabledToggle(val) {
        this.allowToggle = __classPrivateFieldGet(this, _toBoolReverse).call(this, val);
    }
    set validateFirst(val) {
        this.validateFirstVal = ZuiB.toBool(val);
    }
    /** https://www.npmjs.com/package/ngx-currency */
    set options(val) {
        this.optionsVal = Object.assign(Object.assign({}, this.optionsDefault), val);
    }
    set model(value) {
        this.formControl.setValue(value);
    }
    set form(val) {
        if (val) {
            if (val instanceof NgForm) {
                __classPrivateFieldSet(this, _form, val.form);
            }
            else {
                __classPrivateFieldSet(this, _form, val);
            }
        }
    }
    set validator(validator) {
        __classPrivateFieldSet(this, _validator, validator);
        __classPrivateFieldGet(this, _updateValidator).call(this);
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.subscribe(value => {
            this.modelChange.emit(value);
            if (!this.formControl.touched)
                this.formControl.markAllAsTouched();
        }));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
    ngOnChanges() {
        if (this.width) {
            this.fullWidth = false;
        }
        else {
            this.width = '200px';
        }
        if (!this.autocomplete)
            this.autocomplete = this.type === 'password' ? 'new-password' : 'off';
        if (!this.minRows)
            this.minRows = this.rows;
        if (!this.maxRows)
            this.maxRows = this.rows;
        if (!this.disabledValidate) {
            this.formControl.clearValidators();
            const validators = [];
            if (this.requiredVal)
                validators.push(Validators.required);
            if (this.maxLength)
                validators.push(Validators.maxLength(this.maxLength));
            if (this.minLength)
                validators.push(Validators.minLength(this.minLength));
            if (this.max)
                validators.push(Validators.max(this.max));
            if (this.min)
                validators.push(Validators.min(this.min));
            if (this.pattern)
                validators.push(Validators.pattern(this.pattern));
            this.formControl.setValidators(validators);
        }
        if (this.disabledVal)
            this.formControl.disable();
        if (this.validateFirstVal)
            this.formControl.markAsTouched();
        __classPrivateFieldGet(this, _setLengthValidate).call(this, this.validatorMessage);
    }
    ngAfterViewInit() {
        var _a;
        (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(this.name, this.formControl);
    }
    get error() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        if (!this.disabledValidate) {
            const { required, maxlength, minlength, max, min, pattern, email } = this.validatorMessageVal;
            if ((_a = this.formControl) === null || _a === void 0 ? void 0 : _a.hasError('required'))
                return required;
            if ((_b = this.formControl) === null || _b === void 0 ? void 0 : _b.hasError('maxlength'))
                return maxlength;
            if ((_c = this.formControl) === null || _c === void 0 ? void 0 : _c.hasError('minlength'))
                return minlength;
            if ((_d = this.formControl) === null || _d === void 0 ? void 0 : _d.hasError('max'))
                return max;
            if ((_e = this.formControl) === null || _e === void 0 ? void 0 : _e.hasError('min'))
                return min;
            if ((_f = this.formControl) === null || _f === void 0 ? void 0 : _f.hasError('pattern'))
                return pattern;
            if ((_g = this.formControl) === null || _g === void 0 ? void 0 : _g.hasError('email'))
                return email;
            if (((_h = this.formControl) === null || _h === void 0 ? void 0 : _h.hasError('validatorError')) || ((_j = this.formControl) === null || _j === void 0 ? void 0 : _j.hasError('validatorMsg')))
                return (_k = this.formControl.errors) === null || _k === void 0 ? void 0 : _k.validatorMsg;
        }
        return false;
    }
    get showClearContent() {
        return this.showClearIcon && !this.suffixValue && !this.suffixIcon && this.formControl.value && !this.disabledVal;
    }
    get existsPrefixAction() {
        return this.prefixAction.observers.length > 0;
    }
    get existsSuffixAction() {
        return this.suffixAction.observers.length > 0;
    }
    onChange(_) { }
    registerOnTouched() { }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    writeValue(value) {
        this.formControl.setValue(value);
    }
}
_form = new WeakMap(), _validator = new WeakMap(), _subscription = new WeakMap(), _toBoolReverse = new WeakMap(), _formatNumber = new WeakMap(), _lengthError = new WeakMap(), _setLengthValidate = new WeakMap(), _customValidator = new WeakMap(), _updateValidator = new WeakMap();
ZUIInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-input',
                template: "<mat-form-field\n  *ngIf=\"type === 'string'\"\n  [appearance]=\"appearance\"\n  [class.w-100]=\"fullWidth\"\n  [class.zui-input__disabled-error]=\"disabledErrorVal\"\n  [ngStyle]=\"{width: width}\"\n  [matTooltip]=\"formControl.value\"\n  [matTooltipDisabled]=\"tooltipDisabled\"\n  [matTooltipPosition]=\"tooltipPosition\"\n>\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <ng-container matPrefix>\n    <ng-container *ngIf=\"prefixValue\">\n      <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n      <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"prefixIcon\">\n      <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n        <mat-icon>{{ prefixIcon }}</mat-icon>\n      </button>\n      <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5\">{{ prefixIcon }}</mat-icon>\n    </ng-container>\n  </ng-container>\n\n  <input\n    matInput\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [required]=\"!disabledValidate && requiredVal\"\n    [autocomplete]=\"autocomplete\"\n    [spellcheck]=\"spellcheckVal\"\n    (ngModelChange)=\"onChange($event)\"\n    class=\"text-{{ align }}\"\n  />\n  <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n  <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n  <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n  <ng-container matSuffix>\n    <ng-container *ngIf=\"suffixValue\">\n      <span *ngIf=\"existsSuffixAction\" class=\"text-muted ml-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n      <span *ngIf=\"!existsSuffixAction\" class=\"text-muted ml-5 zui-input-prefix\">{{ suffixValue }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"suffixIcon\">\n      <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n        <mat-icon>{{ suffixIcon }}</mat-icon>\n      </button>\n      <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5\">{{ suffixIcon }}</mat-icon>\n    </ng-container>\n    <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </ng-container>\n</mat-form-field>\n\n<ng-container *ngIf=\"type === 'number'\">\n  <mat-form-field\n    *ngIf=\"formatCurrency\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [class.zui-input__disabled-error]=\"disabledErrorVal\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"formControl.value\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n    <ng-container matPrefix>\n      <ng-container *ngIf=\"prefixValue\">\n        <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n        <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"prefixIcon\">\n        <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n          <mat-icon>{{ prefixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5\">{{ prefixIcon }}</mat-icon>\n      </ng-container>\n    </ng-container>\n\n    <input\n      matInput\n      currencyMask\n      [options]=\"optionsVal\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [spellcheck]=\"spellcheckVal\"\n      class=\"text-{{ align }}\"\n    />\n    <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n    <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n    <ng-container matSuffix>\n      <ng-container *ngIf=\"suffixValue\">\n        <span *ngIf=\"existsSuffixAction\" class=\"text-muted ml-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n        <span *ngIf=\"!existsSuffixAction\" class=\"text-muted ml-5 zui-input-prefix\">{{ suffixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"suffixIcon\">\n        <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n          <mat-icon>{{ suffixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n      </ng-container>\n      <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n    </ng-container>\n  </mat-form-field>\n  <mat-form-field\n    *ngIf=\"!formatCurrency\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [class.zui-input__disabled-error]=\"disabledErrorVal\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"formControl.value\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n    <ng-container matPrefix>\n      <ng-container *ngIf=\"prefixValue\">\n        <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n        <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"prefixIcon\">\n        <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n          <mat-icon>{{ prefixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5\">{{ prefixIcon }}</mat-icon>\n      </ng-container>\n    </ng-container>\n\n    <input\n      matInput\n      [options]=\"optionsVal\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [spellcheck]=\"spellcheckVal\"\n      [class.zui-number-hide-arrows]=\"hideArrows\"\n      type=\"number\"\n      class=\"text-{{ align }}\"\n    />\n    <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n    <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n    <ng-container matSuffix>\n      <ng-container *ngIf=\"suffixValue\">\n        <span *ngIf=\"existsSuffixAction\" class=\"text-muted ml-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n        <span *ngIf=\"!existsSuffixAction\" class=\"text-muted ml-5 zui-input-prefix\">{{ suffixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"suffixIcon\">\n        <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n          <mat-icon>{{ suffixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n      </ng-container>\n      <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n    </ng-container>\n  </mat-form-field>\n</ng-container>\n\n<mat-form-field\n  *ngIf=\"type === 'password'\"\n  [appearance]=\"appearance\"\n  [class.w-100]=\"fullWidth\"\n  [class.zui-input__disabled-error]=\"disabledErrorVal\"\n  [ngStyle]=\"{width: width}\"\n  [matTooltip]=\"formControl.value\"\n  [matTooltipDisabled]=\"tooltipDisabled\"\n  [matTooltipPosition]=\"tooltipPosition\"\n>\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <ng-container matPrefix>\n    <ng-container *ngIf=\"prefixValue\">\n      <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n      <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"prefixIcon\">\n      <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n        <mat-icon>{{ prefixIcon }}</mat-icon>\n      </button>\n      <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5\">{{ prefixIcon }}</mat-icon>\n    </ng-container>\n  </ng-container>\n\n  <input\n    matInput\n    [type]=\"visibility ? 'text' : 'password'\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [required]=\"!disabledValidate && requiredVal\"\n    [autocomplete]=\"autocomplete\"\n    [spellcheck]=\"spellcheckVal\"\n    class=\"text-{{ align }}\"\n  />\n  <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n  <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n  <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n  <ng-container matSuffix>\n    <button *ngIf=\"allowToggle\" mat-icon-button (click)=\"visibility = !visibility\">\n      <mat-icon>{{ visibility ? 'visibility' : 'visibility_off' }}</mat-icon>\n    </button>\n    <ng-container *ngIf=\"!allowToggle\">\n      <ng-container *ngIf=\"suffixValue\">\n        <span *ngIf=\"existsSuffixAction\" class=\"text-muted ml-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n        <span *ngIf=\"!existsSuffixAction\" class=\"text-muted ml-5 zui-input-prefix\">{{ suffixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"suffixIcon\">\n        <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n          <mat-icon>{{ suffixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n      </ng-container>\n      <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n    </ng-container>\n  </ng-container>\n</mat-form-field>\n\n<mat-form-field\n  *ngIf=\"type === 'email'\"\n  [appearance]=\"appearance\"\n  [class.w-100]=\"fullWidth\"\n  [class.zui-input__disabled-error]=\"disabledErrorVal\"\n  [ngStyle]=\"{width: width}\"\n  [matTooltip]=\"formControl.value\"\n  [matTooltipDisabled]=\"tooltipDisabled\"\n  [matTooltipPosition]=\"tooltipPosition\"\n>\n  <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n  <ng-container matPrefix>\n    <ng-container *ngIf=\"prefixValue\">\n      <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n      <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"prefixIcon\">\n      <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n        <mat-icon>{{ prefixIcon }}</mat-icon>\n      </button>\n      <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5\">{{ prefixIcon }}</mat-icon>\n    </ng-container>\n  </ng-container>\n\n  <input\n    matInput\n    email\n    type=\"email\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"placeholder\"\n    [required]=\"!disabledValidate && requiredVal\"\n    [autocomplete]=\"autocomplete\"\n    [spellcheck]=\"spellcheckVal\"\n    class=\"text-{{ align }}\"\n  />\n  <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n  <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n  <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n  <ng-container matSuffix>\n    <ng-container *ngIf=\"suffixValue\">\n      <span *ngIf=\"existsSuffixAction\" class=\"text-muted zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n      <span *ngIf=\"!existsSuffixAction\" class=\"text-muted zui-input-prefix\">{{ suffixValue }}</span>\n    </ng-container>\n    <ng-container *ngIf=\"suffixIcon\">\n      <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n        <mat-icon>{{ suffixIcon }}</mat-icon>\n      </button>\n      <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n    </ng-container>\n    <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n  </ng-container>\n</mat-form-field>\n\n<ng-container *ngIf=\"type === 'textarea'\">\n  <mat-form-field\n    *ngIf=\"autosizeVal\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [class.zui-input__disabled-error]=\"disabledErrorVal\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"formControl.value\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n    class=\"zui-textarea\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n    <ng-container matPrefix>\n      <ng-container *ngIf=\"prefixValue\">\n        <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n        <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"prefixIcon\">\n        <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n          <mat-icon>{{ prefixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5 zui-input-prefix\">{{ prefixIcon }}</mat-icon>\n      </ng-container>\n    </ng-container>\n\n    <textarea\n      matInput\n      class=\"text-{{ align }} zui-hide-scrollbar\"\n      [spellcheck]=\"spellcheckVal\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [rows]=\"rows\"\n    ></textarea>\n    <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n    <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n    <ng-container matSuffix>\n      <ng-container *ngIf=\"suffixValue\">\n        <span *ngIf=\"existsSuffixAction\" class=\"text-muted zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n        <span *ngIf=\"!existsSuffixAction\" class=\"text-muted zui-input-prefix\">{{ suffixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"suffixIcon\">\n        <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n          <mat-icon>{{ suffixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n      </ng-container>\n      <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n    </ng-container>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"!autosizeVal\"\n    [appearance]=\"appearance\"\n    [class.w-100]=\"fullWidth\"\n    [class.zui-input__disabled-error]=\"disabledErrorVal\"\n    [ngStyle]=\"{width: width}\"\n    [matTooltip]=\"formControl.value\"\n    [matTooltipDisabled]=\"tooltipDisabled\"\n    [matTooltipPosition]=\"tooltipPosition\"\n    class=\"zui-textarea\"\n  >\n    <mat-label *ngIf=\"label\">{{ label }}</mat-label>\n    <ng-container matPrefix>\n      <ng-container *ngIf=\"prefixValue\">\n        <span *ngIf=\"existsPrefixAction\" class=\"text-muted mr-5 zui-pointer zui-noselect zui-input-prefix\" (click)=\"prefixAction.emit()\">{{ prefixValue }}</span>\n        <span *ngIf=\"!existsPrefixAction\" class=\"text-muted mr-5 zui-input-prefix\">{{ prefixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"prefixIcon\">\n        <button *ngIf=\"existsPrefixAction\" mat-icon-button (click)=\"prefixAction.emit()\">\n          <mat-icon>{{ prefixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsPrefixAction\" class=\"mr-5 zui-input-prefix\">{{ prefixIcon }}</mat-icon>\n      </ng-container>\n    </ng-container>\n\n    <textarea\n      matInput\n      cdkTextareaAutosize\n      class=\"text-{{ align }} zui-hide-scrollbar\"\n      [spellcheck]=\"spellcheckVal\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeholder\"\n      [required]=\"!disabledValidate && requiredVal\"\n      [autocomplete]=\"autocomplete\"\n      [rows]=\"rows\"\n      [cdkAutosizeMinRows]=\"minRows\"\n      [cdkAutosizeMaxRows]=\"maxRows\"\n    ></textarea>\n    <mat-hint *ngIf=\"hint\" [align]=\"'start'\">{{ hint }}</mat-hint>\n    <mat-hint *ngIf=\"maxLength\" [align]=\"'end'\">{{ formControl?.value?.length || 0 }}/{{ maxLength }}</mat-hint>\n    <mat-error *ngIf=\"error\">{{ error }}</mat-error>\n\n    <ng-container matSuffix>\n      <ng-container *ngIf=\"suffixValue\">\n        <span *ngIf=\"existsSuffixAction\" class=\"text-muted zui-pointer zui-noselect zui-input-prefix\" (click)=\"suffixAction.emit()\">{{ suffixValue }}</span>\n        <span *ngIf=\"!existsSuffixAction\" class=\"text-muted zui-input-prefix\">{{ suffixValue }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"suffixIcon\">\n        <button *ngIf=\"existsSuffixAction\" mat-icon-button (click)=\"suffixAction.emit()\">\n          <mat-icon>{{ suffixIcon }}</mat-icon>\n        </button>\n        <mat-icon *ngIf=\"!existsSuffixAction\" class=\"ml-5 zui-input-prefix\">{{ suffixIcon }}</mat-icon>\n      </ng-container>\n      <button *ngIf=\"showClearContent\" mat-icon-button aria-label=\"Clear\" (click)=\"formControl.setValue('')\"><mat-icon>close</mat-icon></button>\n    </ng-container>\n  </mat-form-field>\n</ng-container>\n",
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        useExisting: forwardRef(() => ZUIInputComponent),
                        multi: true,
                    },
                ],
                styles: [".zui-input-prefix{display:table-caption}.zui-textarea-suffix{margin-top:-10px}:host ::ng-deep .zui-textarea .mat-form-field-infix{display:flex}:host ::ng-deep .zui-input__disabled-error .mat-form-field-wrapper{padding:0}"]
            },] }
];
ZUIInputComponent.propDecorators = {
    width: [{ type: Input }],
    label: [{ type: Input }],
    placeholder: [{ type: Input }],
    pattern: [{ type: Input }],
    hint: [{ type: Input }],
    name: [{ type: Input }],
    prefixValue: [{ type: Input }],
    suffixValue: [{ type: Input }],
    align: [{ type: Input }],
    prefixIcon: [{ type: Input }],
    suffixIcon: [{ type: Input }],
    max: [{ type: Input }],
    min: [{ type: Input }],
    maxLength: [{ type: Input }],
    minLength: [{ type: Input }],
    rows: [{ type: Input }],
    minRows: [{ type: Input }],
    maxRows: [{ type: Input }],
    spellcheck: [{ type: Input }],
    autosize: [{ type: Input }],
    required: [{ type: Input }],
    autofocus: [{ type: Input }],
    disabled: [{ type: Input }],
    disabledError: [{ type: Input }],
    showTooltip: [{ type: Input }],
    tooltipPosition: [{ type: Input }],
    noFullWidth: [{ type: Input }],
    hideClearIcon: [{ type: Input }],
    showArrows: [{ type: Input }],
    noCurrency: [{ type: Input }],
    disabledToggle: [{ type: Input }],
    validateFirst: [{ type: Input }],
    disabledValidate: [{ type: Input }],
    autocomplete: [{ type: Input }],
    type: [{ type: Input }],
    options: [{ type: Input }],
    validatorMessage: [{ type: Input }],
    appearance: [{ type: Input }],
    model: [{ type: Input }],
    form: [{ type: Input }],
    validator: [{ type: Input }],
    modelChange: [{ type: Output }],
    prefixAction: [{ type: Output }],
    suffixAction: [{ type: Output }]
};
//# sourceMappingURL=index.component.js.map