/**
 * @fileoverview added by tsickle
 * Generated from: components/input/input.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/*
 MIT License

 Copyright (c) 2019 Temainfo Software

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
import { Component, Input, ViewChild, Output, Optional, Inject, EventEmitter, Renderer2, ElementRef, ChangeDetectorRef, Self, } from '@angular/core';
import { InputMask } from './core/input-mask';
import { NgControl, } from '@angular/forms';
import { CdkOverlayOrigin } from '@angular/cdk/overlay';
import { ValueAccessorBase } from './core/value-accessor';
import { INPUT_CONFIG } from './core/input.config';
import { Subscription } from 'rxjs';
/**
 * Input Component personalized with few features.
 *
 * import { InputModule } from 'truly-ui';
 *
 * \@Component({
 *  selector: 'my-app-comp',
 *  template: '
 *  <tl-input
 *   [(ngModel)]="title"
 *   [iconBefore]="'ion-email'"
 *   [iconAfter]="'ion-email'"
 *   [textBefore]="'R$'"
 *   [textAfter]="'00,00'"
 *   [placeholder]="'Meu Input'"
 *   [clearButton]="true"
 *   [readonly]="true"
 *   [disabled]="true"
 *   [toUpperCase]="true">
 *  </tl-input>
 *  '
 * })
 */
export class TlInput extends ValueAccessorBase {
    /**
     * @param {?} inputConfig
     * @param {?} ngControl
     * @param {?} tlInput
     * @param {?} renderer
     * @param {?} change
     */
    constructor(inputConfig, ngControl, tlInput, renderer, change) {
        super();
        this.inputConfig = inputConfig;
        this.ngControl = ngControl;
        this.tlInput = tlInput;
        this.renderer = renderer;
        this.change = change;
        this.textBefore = '';
        this.textAfter = '';
        this.labelPlacement = 'left';
        this.labelSize = '100px';
        this.name = '';
        this.label = '';
        this.color = 'basic';
        this.iconBefore = '';
        this.iconAfter = '';
        this.clearButton = false;
        this.readonly = null;
        this.required = null;
        this.disabled = null;
        this.autocomplete = 'off';
        this.maxlength = -1;
        this.tabindex = 0;
        this.textAlign = 'left';
        this.mask = '';
        this.placeholder = ' ';
        this.type = 'text';
        this.height = '23px';
        this.withBorder = true;
        this.flatBorder = false;
        this.clear = new EventEmitter();
        this.overlayOrigin = new EventEmitter();
        this.clickAddon = new EventEmitter();
        this.click = new EventEmitter();
        this.focus = new EventEmitter();
        this.blur = new EventEmitter();
        this.valid = new EventEmitter();
        this.completeMask = new EventEmitter();
        this.isShowingMessages = false;
        this.subscription = new Subscription();
        this.setControl();
        this.setOptions(this.inputConfig);
    }
    /**
     * @return {?}
     */
    get control() {
        var _a;
        return (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control;
    }
    /**
     * @return {?}
     */
    setControl() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.overlayOrigin.emit(this.cdkOverlayOrigin);
    }
    /**
     * @return {?}
     */
    ngAfterViewInit() {
        this.handleValidator();
        this.handleRequiredValidator();
        this.handleMask();
    }
    /**
     * @return {?}
     */
    handleRequiredValidator() {
        if (this.control && this.control.errors && this.control.errors.hasOwnProperty('required')) {
            this.required = this.control.errors['required'];
            this.change.detectChanges();
        }
    }
    /**
     * @return {?}
     */
    handleValidator() {
        if (this.control) {
            this.hasValidator = this.control.validator;
            this.change.detectChanges();
        }
    }
    /**
     * @return {?}
     */
    handleMask() {
        if (this.mask) {
            this.fieldMask = new InputMask(this, this.renderer, this.mask);
            this.subscription.add(this.fieldMask.complete.subscribe((/**
             * @return {?}
             */
            () => {
                this.completeMask.emit(true);
            })));
        }
    }
    /**
     * @param {?} $event
     * @param {?} side
     * @return {?}
     */
    onClickAddon($event, side) {
        this.stopEvent($event);
        this.clickAddon.emit({ $event, side });
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onInputClick($event) {
        this.stopEvent($event);
        this.isShowingMessages = true;
        this.click.emit($event);
    }
    /**
     * @param {?} options
     * @return {?}
     */
    setOptions(options) {
        if (options) {
            /** @type {?} */
            const self = this;
            Object.keys(options).forEach((/**
             * @param {?} key
             * @return {?}
             */
            function (key) {
                self[key] = options[key];
            }));
        }
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    stopEvent($event) {
        $event.preventDefault();
        $event.stopPropagation();
    }
    /**
     * @return {?}
     */
    setFocus() {
        this.input.nativeElement.focus();
    }
    /**
     * @return {?}
     */
    getNativeInput() {
        return this.input.nativeElement;
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onInputFocus($event) {
        this.isShowingMessages = true;
        this.focus.emit($event);
    }
    /**
     * @param {?} $event
     * @return {?}
     */
    onInputBlur($event) {
        this.isShowingMessages = false;
        this.blur.emit($event);
        this.propagateTouched();
    }
    /**
     * @param {?=} $event
     * @return {?}
     */
    clearInput($event) {
        this.value = '';
        this.input.nativeElement.focus();
        this.clear.emit($event);
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
TlInput.decorators = [
    { type: Component, args: [{
                selector: 'tl-input',
                template: "<div [class]=\"'tl-input-box ' + color\" #inputBox>\n\n  <tl-label *ngIf=\"label\" [required]=\"required\" [labelTitle]=\"label\" [labelPlacement]=\"labelPlacement\" [labelSize]=\"labelSize\"></tl-label>\n\n  <span *ngIf=\"iconBefore\" (click)=\"onClickAddon($event, 'before')\"\n        [ngClass]=\"{ 'withoutBorder' : !withBorder, '-flatborders': flatBorder }\" class=\"addon -borderleft\">\n    <tl-icon>{{ iconBefore }}</tl-icon>\n  </span>\n\n  <span *ngIf=\"textBefore\" (click)=\"onClickAddon($event, 'before')\" class=\"addon -borderleft\"\n        [ngClass]=\"\n        {\n        'predefined' : textBefore,\n        'withBorder': withBorder,\n        'withoutBorder' : !withBorder,\n        '-flatborders': flatBorder\n        }\">\n    {{textBefore}}\n  </span>\n\n  <div class=\"ui-wrapper-input\" [ngClass]=\"{'-flatborders': flatBorder}\" [style.height]=\"height\">\n    <input [style.padding-right]=\"clearButton ? '20px' : '12px'\"\n           [style.height]=\"height\"\n           #input\n           [type]=\"type\"\n           cdkOverlayOrigin\n           [tabindex]=\"tabindex\"\n           [style.text-align]=\"textAlign\"\n           [disabled]=\"disabled || isDisabled\"\n           class=\"field\"\n           [ngClass]=\"{\n             'ng-invalid': control?.errors,\n             'ng-valid': !control?.errors,\n             'ng-touched': control?.touched,\n             'ng-untouched': control?.untouched,\n             'withValidators': hasValidator,\n             'withoutValidators': !hasValidator,\n             'withBorder': withBorder,\n             'withoutBorder' : !withBorder,\n             '-borderleft': iconBefore || textBefore,\n             '-flatborders': flatBorder,\n             '-borderright': iconAfter || textAfter\n             }\"\n           [attr.readonly]=\"readonly ? true : null\"\n           [attr.required]=\"required ? true : null\"\n           [attr.autocomplete]=\"autocomplete\"\n           [attr.maxlength]=\"maxlength\"\n           [attr.name]=\"name\"\n           [placeholder]=\"placeholder\"\n           [(ngModel)]=\"value\"\n           (click)=\"onInputClick($event)\"\n           (blur)=\"onInputBlur($event)\"\n           (focus)=\"onInputFocus($event)\">\n    <i *ngIf=\"clearButton && value\" (click)=\"clearInput($event)\"\n       class=\"ion ion-ios-close-circle-outline clearButton\">\n    </i>\n  </div>\n\n  <span #afterIcon *ngIf=\"iconAfter\"\n        (click)=\"onClickAddon($event, 'after')\" class=\"addon -borderright\"\n        [ngClass]=\"{ 'withoutBorder' : !withBorder, '-flatborders': flatBorder, '-borderright': iconAfter || textAfter }\">\n    <tl-icon>{{ iconAfter }}</tl-icon>\n  </span>\n\n  <span *ngIf=\"textAfter\" (click)=\"onClickAddon($event, 'after')\" #afterText class=\"addon -borderright\"\n        [ngClass]=\"{ '-predefined' : textAfter, '-flatborders': flatBorder, 'withoutBorder' : !withBorder }\">{{textAfter}}</span>\n</div>\n",
                styles: ["*{box-sizing:border-box}.tl-input-box{border-collapse:separate;display:table;position:relative;width:100%}.tl-input-box .addon{display:table-cell;font-size:14px;font-weight:400;line-height:1;padding:3px 12px;text-align:center;vertical-align:middle;white-space:nowrap;width:1%}.tl-input-box .addon.-borderleft{border-radius:3px 0 0 3px}.tl-input-box .addon.-borderright{border-radius:0 3px 3px 0}.tl-input-box .addon.-clearbutton{border:0;cursor:pointer;font-size:11px;position:absolute;right:4px;top:3px}.tl-input-box .addon.-flatborders{border-radius:0}.tl-input-box .addon.-predefined{font-family:Segoe UI,Lato,\"sans-serif\",Arial}.tl-input-box .addon:hover{cursor:pointer}.tl-input-box>.ui-wrapper-input{align-items:center;display:flex;justify-content:center;position:relative}.tl-input-box>.ui-wrapper-input>.field{border-radius:3px;display:table-cell;font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em;font-weight:400;height:23px;padding:4px 20px 4px 6px;transition:background-color .23s ease-in-out;width:100%}.tl-input-box>.ui-wrapper-input>.field.-borderleft{border-bottom-left-radius:0;border-top-left-radius:0}.tl-input-box>.ui-wrapper-input>.field.-borderright{border-bottom-right-radius:0;border-top-right-radius:0}.tl-input-box>.ui-wrapper-input>.field.-flatborders{border-radius:0}.tl-input-box>.ui-wrapper-input>.field::-moz-placeholder{font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em}.tl-input-box>.ui-wrapper-input>.field:-ms-input-placeholder{font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em}.tl-input-box>.ui-wrapper-input>.field::-ms-input-placeholder{font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em}.tl-input-box>.ui-wrapper-input>.field::placeholder{font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1em}.tl-input-box>.ui-wrapper-input>.field.-disabled{cursor:default!important}.tl-input-box>.ui-wrapper-input>.clearButton{color:#ccc;font-size:22px;padding-right:5px;position:absolute;right:0}.tl-input-box>.ui-wrapper-input>.clearButton:hover{cursor:pointer}"]
            }] }
];
/** @nocollapse */
TlInput.ctorParameters = () => [
    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INPUT_CONFIG,] }] },
    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] },
    { type: ElementRef },
    { type: Renderer2 },
    { type: ChangeDetectorRef }
];
TlInput.propDecorators = {
    textBefore: [{ type: Input }],
    textAfter: [{ type: Input }],
    labelPlacement: [{ type: Input }],
    labelSize: [{ type: Input }],
    name: [{ type: Input }],
    label: [{ type: Input }],
    color: [{ type: Input }],
    iconBefore: [{ type: Input }],
    iconAfter: [{ type: Input }],
    clearButton: [{ type: Input }],
    readonly: [{ type: Input }],
    required: [{ type: Input }],
    disabled: [{ type: Input }],
    autocomplete: [{ type: Input }],
    maxlength: [{ type: Input }],
    tabindex: [{ type: Input }],
    textAlign: [{ type: Input }],
    mask: [{ type: Input }],
    placeholder: [{ type: Input }],
    type: [{ type: Input }],
    height: [{ type: Input }],
    withBorder: [{ type: Input }],
    flatBorder: [{ type: Input }],
    input: [{ type: ViewChild, args: ['input', { static: true },] }],
    inputBox: [{ type: ViewChild, args: ['inputBox', { static: true },] }],
    cdkOverlayOrigin: [{ type: ViewChild, args: [CdkOverlayOrigin, { static: true },] }],
    clear: [{ type: Output }],
    overlayOrigin: [{ type: Output }],
    clickAddon: [{ type: Output }],
    click: [{ type: Output }],
    focus: [{ type: Output }],
    blur: [{ type: Output }],
    valid: [{ type: Output }],
    completeMask: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    TlInput.prototype.textBefore;
    /** @type {?} */
    TlInput.prototype.textAfter;
    /** @type {?} */
    TlInput.prototype.labelPlacement;
    /** @type {?} */
    TlInput.prototype.labelSize;
    /** @type {?} */
    TlInput.prototype.name;
    /** @type {?} */
    TlInput.prototype.label;
    /** @type {?} */
    TlInput.prototype.color;
    /** @type {?} */
    TlInput.prototype.iconBefore;
    /** @type {?} */
    TlInput.prototype.iconAfter;
    /** @type {?} */
    TlInput.prototype.clearButton;
    /** @type {?} */
    TlInput.prototype.readonly;
    /** @type {?} */
    TlInput.prototype.required;
    /** @type {?} */
    TlInput.prototype.disabled;
    /** @type {?} */
    TlInput.prototype.autocomplete;
    /** @type {?} */
    TlInput.prototype.maxlength;
    /** @type {?} */
    TlInput.prototype.tabindex;
    /** @type {?} */
    TlInput.prototype.textAlign;
    /** @type {?} */
    TlInput.prototype.mask;
    /** @type {?} */
    TlInput.prototype.placeholder;
    /** @type {?} */
    TlInput.prototype.type;
    /** @type {?} */
    TlInput.prototype.height;
    /** @type {?} */
    TlInput.prototype.withBorder;
    /** @type {?} */
    TlInput.prototype.flatBorder;
    /** @type {?} */
    TlInput.prototype.input;
    /** @type {?} */
    TlInput.prototype.inputBox;
    /** @type {?} */
    TlInput.prototype.cdkOverlayOrigin;
    /** @type {?} */
    TlInput.prototype.clear;
    /** @type {?} */
    TlInput.prototype.overlayOrigin;
    /** @type {?} */
    TlInput.prototype.clickAddon;
    /** @type {?} */
    TlInput.prototype.click;
    /** @type {?} */
    TlInput.prototype.focus;
    /** @type {?} */
    TlInput.prototype.blur;
    /** @type {?} */
    TlInput.prototype.valid;
    /** @type {?} */
    TlInput.prototype.completeMask;
    /** @type {?} */
    TlInput.prototype.isShowingMessages;
    /** @type {?} */
    TlInput.prototype.fieldMask;
    /** @type {?} */
    TlInput.prototype.hasValidator;
    /**
     * @type {?}
     * @private
     */
    TlInput.prototype.subscription;
    /**
     * @type {?}
     * @private
     */
    TlInput.prototype.inputConfig;
    /** @type {?} */
    TlInput.prototype.ngControl;
    /**
     * @type {?}
     * @private
     */
    TlInput.prototype.tlInput;
    /**
     * @type {?}
     * @private
     */
    TlInput.prototype.renderer;
    /**
     * @type {?}
     * @private
     */
    TlInput.prototype.change;
}
//# sourceMappingURL=data:application/json;base64, 