/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, QueryList, ViewChild } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { FormFieldAbstract } from '../form/form-field.abstract';
import { getBooleanValue } from '../../utils/get-boolean-value.util';
import { PrefixDirective } from '../../directives/prefix.directive';
import { SuffixDirective } from '../../directives/suffix.directive';
var InputComponent = /** @class */ (function (_super) {
    tslib_1.__extends(InputComponent, _super);
    function InputComponent() {
        var _this = _super.call(this) || this;
        _this.onBlurEmitter = new EventEmitter();
        _this.onChangeEmitter = new EventEmitter();
        _this.onFocusEmitter = new EventEmitter();
        return _this;
    }
    /**
     * @return {?}
     */
    InputComponent.prototype.ngOnInit = /**
     * @return {?}
     */
    function () {
        this.initValues();
    };
    /**
     * @param {?} changes
     * @return {?}
     */
    InputComponent.prototype.ngOnChanges = /**
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        var valueInput = changes.valueInput;
        if (valueInput && valueInput.currentValue !== valueInput.previousValue) {
            this.value = valueInput.currentValue;
        }
    };
    /**
     * @return {?}
     */
    InputComponent.prototype.initValues = /**
     * @return {?}
     */
    function () {
        var defaultProps = InputComponent.defaultProps;
        this.autocomplete = this.autocompleteInput || defaultProps.autocomplete;
        this.className = this.classNameInput || defaultProps.className;
        this.disabled = getBooleanValue(this.disabledInput, defaultProps.disabled);
        this.floatLabel = this.floatLabelInput || defaultProps.floatLabel;
        this.hasCounter = getBooleanValue(this.hasCounterInput, defaultProps.hasCounter);
        this.id = this.idInput || defaultProps.id;
        this.maxLength = this.maxLengthInput || defaultProps.maxLength;
        this.name = this.nameInput || defaultProps.name;
        this.placeholder = this.placeholderInput || defaultProps.placeholder;
        this.required = getBooleanValue(this.requiredInput, defaultProps.required);
        this.type = this.typeInput || defaultProps.type;
        this.validateOnBlur = getBooleanValue(this.validateOnBlurInput, defaultProps.validateOnBlur);
        this.validateOnChange = getBooleanValue(this.validateOnChangeInput, defaultProps.validateOnChange);
        this.value = this.valueInput || defaultProps.value;
        this.isFocused = false;
        this.isTouched = false;
    };
    /**
     * @param {?} event
     * @return {?}
     */
    InputComponent.prototype.onBlur = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        var nativeElement = this.formControlWrapperRef.nativeElement;
        var relatedTarget = event.relatedTarget;
        this.onBlurEmitter.emit(event);
        if (this.validateOnBlur && (!this.floatLabel || relatedTarget !== nativeElement)) {
            this.isTouched = true;
            this.isFocused = false;
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    InputComponent.prototype.onFocus = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        if (!this.disabled) {
            this.isFocused = true;
            this.onFocusEmitter.emit(event);
            this.inputRef.nativeElement.focus();
            this.onTouched();
        }
    };
    /**
     * @param {?} event
     * @return {?}
     */
    InputComponent.prototype.onChange = /**
     * @param {?} event
     * @return {?}
     */
    function (event) {
        var value = event.target.value;
        this.value = value;
        this.onChangeEmitter.emit(event);
        this.onInputChange(value);
    };
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    InputComponent.prototype.setDisabledState = /**
     * @param {?} isDisabled
     * @return {?}
     */
    function (isDisabled) {
        this.disabled = isDisabled;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    InputComponent.prototype.writeValue = /**
     * @param {?} value
     * @return {?}
     */
    function (value) {
        this.value = value;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    InputComponent.prototype.registerOnChange = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onInputChange = fn;
    };
    /**
     * @param {?} fn
     * @return {?}
     */
    InputComponent.prototype.registerOnTouched = /**
     * @param {?} fn
     * @return {?}
     */
    function (fn) {
        this.onTouched = fn;
    };
    /**
     * @param {?} value
     * @return {?}
     */
    InputComponent.prototype.onInputChange = /**
     * @param {?} value
     * @return {?}
     */
    function (value) { };
    /**
     * @return {?}
     */
    InputComponent.prototype.onTouched = /**
     * @return {?}
     */
    function () { };
    InputComponent.defaultProps = {
        autocomplete: 'none',
        className: '',
        disabled: false,
        floatLabel: '',
        hasCounter: false,
        id: null,
        maxLength: 500,
        name: '',
        placeholder: '',
        required: false,
        type: 'text',
        validateOnBlur: true,
        validateOnChange: true,
        value: ''
    };
    InputComponent.decorators = [
        { type: Component, args: [{
                    providers: [{
                            provide: FormFieldAbstract,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return InputComponent; }))
                        }, {
                            multi: true,
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef((/**
                             * @return {?}
                             */
                            function () { return InputComponent; }))
                        }],
                    selector: 'materialize-input',
                    template: "<div class=\"form-control-container\"\n  tabindex=\"1\"\n  \n  (blur)=\"onBlur($event)\"\n  (focus)=\"onFocus($event)\"\n\n  [ngClass]=\"className\"\n  [class.float-label]=\"floatLabel\"\n  [class.active]=\"value || placeholder\"\n  [class.focused]=\"isFocused\"\n  [class.disabled]=\"disabled\"\n\n  #formControlWrapper>\n\n  <div class=\"form-control-prefix-container\" *ngIf=\"materializePrefixQueryList.length\">\n    <ng-content select=\"[materializePrefix]\"></ng-content>\n  </div>\n\n  <div class=\"form-control-wrapper\">\n    <div class=\"form-control-float-label\">{{ floatLabel }}</div>\n\n    <input class=\"form-control\"\n      (input)=\"onChange($event)\"\n      (blur)=\"onBlur($event)\"\n      (focus)=\"onFocus($event)\"\n\n      [autocomplete]=\"autocomplete\"\n      [disabled]=\"disabled\"\n      [attr.id]=\"id\"\n      [maxLength]=\"maxLength\"\n      [name]=\"name\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [type]=\"type\"\n      [value]=\"value\"\n\n      #input\n    />\n\n    <materialize-icon className=\"form-icon-error\" name=\"error\" size=\"lg\"></materialize-icon>\n  </div>\n\n  <div class=\"form-control-suffix-container\" *ngIf=\"materializeSuffixQueryList.length\">\n    <ng-content select=\"[materializeSuffix]\"></ng-content>\n  </div>\n</div>\n\n<materialize-form-message type=\"info\" *ngIf=\"hasCounter\">{{ value.length }} / {{ maxLength }}</materialize-form-message>\n",
                    styles: [".form-control-container{background-color:#f4f3f4;border-bottom:1px solid #6a6a6a;border-radius:4px 4px 0 0;display:flex;flex-direction:row;outline:0;position:relative}.form-control-container::after{background-color:#5707eb;bottom:-1px;content:'';height:2px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:width 250ms;width:0;z-index:10}.float-label.form-control-container .form-control{padding-top:24px}.active.form-control-container .form-control-float-label,.focused.form-control-container .form-control-float-label{font-size:12px;top:0;-webkit-transform:unset;transform:unset}.focused.form-control-container .form-control-float-label{color:#5707eb}.focused.form-control-container::after{width:100%}.focused.form-control-container .form-label{color:#5707eb}.focused.form-control-container .form-control{caret-color:#5707eb}.disabled.form-control-container .form-control-wrapper{border-bottom-color:#f4f3f4;cursor:not-allowed}.disabled.form-control-container .form-control,.disabled.form-control-container .form-control-float-label{cursor:not-allowed}.disabled.form-control-container .form-control,.disabled.form-control-container .form-control-float-label,.disabled.form-control-container .form-label{color:#dcdbdc}.form-control-wrapper{position:relative;width:100%}.form-control-wrapper ::ng-deep .form-icon-error{color:#a22027;display:none;position:absolute;right:12px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10}.form-control{background-color:transparent;border:0;box-sizing:border-box;color:#000;font-family:Roboto;font-size:16px;font-weight:300;height:100%;max-width:100%;outline:0;padding:12px;resize:vertical;width:100%}.ng-touched.ng-dirty.ng-invalid:host .form-control-container::after{background-color:#a22027;width:100%}.ng-touched.ng-dirty.ng-invalid:host .form-control-float-label{color:#a22027}.ng-touched.ng-dirty.ng-invalid:host .form-control{caret-color:#a22027;padding-right:48px}.ng-touched.ng-dirty.ng-invalid:host .form-control-wrapper ::ng-deep .form-icon-error{display:block}.form-control-float-label{background-color:#f4f3f4;color:#6a6a6a;cursor:text;font-family:Roboto;font-size:16px;font-weight:300;left:0;padding:8px 12px 6px;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:250ms;width:100%;z-index:10}.form-control-prefix-container,.form-control-suffix-container{align-items:center;color:#000;display:flex;font-family:Roboto;font-size:16px;font-weight:300;line-height:16px}.form-control-prefix-container{padding-left:8px}.form-control-suffix-container{padding-right:8px}"]
                }] }
    ];
    /** @nocollapse */
    InputComponent.ctorParameters = function () { return []; };
    InputComponent.propDecorators = {
        inputRef: [{ type: ViewChild, args: ['input',] }],
        formControlWrapperRef: [{ type: ViewChild, args: ['formControlWrapper',] }],
        materializePrefixQueryList: [{ type: ContentChildren, args: [PrefixDirective,] }],
        materializeSuffixQueryList: [{ type: ContentChildren, args: [SuffixDirective,] }],
        onFocusEmitter: [{ type: Output, args: ['onFocus',] }],
        onChangeEmitter: [{ type: Output, args: ['onChange',] }],
        onBlurEmitter: [{ type: Output, args: ['onBlur',] }],
        autocompleteInput: [{ type: Input, args: ['autocomplete',] }],
        classNameInput: [{ type: Input, args: ['className',] }],
        disabledInput: [{ type: Input, args: ['disabled',] }],
        floatLabelInput: [{ type: Input, args: ['floatLabel',] }],
        hasCounterInput: [{ type: Input, args: ['hasCounter',] }],
        idInput: [{ type: Input, args: ['id',] }],
        maxLengthInput: [{ type: Input, args: ['maxLength',] }],
        nameInput: [{ type: Input, args: ['name',] }],
        placeholderInput: [{ type: Input, args: ['placeholder',] }],
        requiredInput: [{ type: Input, args: ['required',] }],
        typeInput: [{ type: Input, args: ['type',] }],
        validateOnBlurInput: [{ type: Input, args: ['validateOnBlur',] }],
        validateOnChangeInput: [{ type: Input, args: ['validateOnChange',] }],
        valueInput: [{ type: Input, args: ['value',] }]
    };
    return InputComponent;
}(FormFieldAbstract));
export { InputComponent };
if (false) {
    /** @type {?} */
    InputComponent.defaultProps;
    /** @type {?} */
    InputComponent.prototype.inputRef;
    /** @type {?} */
    InputComponent.prototype.formControlWrapperRef;
    /** @type {?} */
    InputComponent.prototype.materializePrefixQueryList;
    /** @type {?} */
    InputComponent.prototype.materializeSuffixQueryList;
    /** @type {?} */
    InputComponent.prototype.onFocusEmitter;
    /** @type {?} */
    InputComponent.prototype.onChangeEmitter;
    /** @type {?} */
    InputComponent.prototype.onBlurEmitter;
    /** @type {?} */
    InputComponent.prototype.autocompleteInput;
    /** @type {?} */
    InputComponent.prototype.classNameInput;
    /** @type {?} */
    InputComponent.prototype.disabledInput;
    /** @type {?} */
    InputComponent.prototype.floatLabelInput;
    /** @type {?} */
    InputComponent.prototype.hasCounterInput;
    /** @type {?} */
    InputComponent.prototype.idInput;
    /** @type {?} */
    InputComponent.prototype.maxLengthInput;
    /** @type {?} */
    InputComponent.prototype.nameInput;
    /** @type {?} */
    InputComponent.prototype.placeholderInput;
    /** @type {?} */
    InputComponent.prototype.requiredInput;
    /** @type {?} */
    InputComponent.prototype.typeInput;
    /** @type {?} */
    InputComponent.prototype.validateOnBlurInput;
    /** @type {?} */
    InputComponent.prototype.validateOnChangeInput;
    /** @type {?} */
    InputComponent.prototype.valueInput;
    /** @type {?} */
    InputComponent.prototype.autocomplete;
    /** @type {?} */
    InputComponent.prototype.className;
    /** @type {?} */
    InputComponent.prototype.disabled;
    /** @type {?} */
    InputComponent.prototype.floatLabel;
    /** @type {?} */
    InputComponent.prototype.hasCounter;
    /** @type {?} */
    InputComponent.prototype.id;
    /** @type {?} */
    InputComponent.prototype.isTouched;
    /** @type {?} */
    InputComponent.prototype.isFocused;
    /** @type {?} */
    InputComponent.prototype.maxLength;
    /** @type {?} */
    InputComponent.prototype.name;
    /** @type {?} */
    InputComponent.prototype.placeholder;
    /** @type {?} */
    InputComponent.prototype.required;
    /** @type {?} */
    InputComponent.prototype.type;
    /** @type {?} */
    InputComponent.prototype.validateOnBlur;
    /** @type {?} */
    InputComponent.prototype.validateOnChange;
    /** @type {?} */
    InputComponent.prototype.value;
}
//# sourceMappingURL=data:application/json;base64, 