/**
 * @fileoverview added by tsickle
 * Generated from: form/form-input/form-input.component.ts
 * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { __extends } from "tslib";
/*!
 * Copyright 2020 VMware, Inc.
 * SPDX-License-Identifier: BSD-2-Clause
 */
import { Component, ElementRef, EventEmitter, Input, Optional, Output, Self, ViewChild, } from '@angular/core';
import { NgControl } from '@angular/forms';
import { BaseFormControl, defaultValidatorForControl } from '../base-form-control';
/**
 * A {\@link FormControl} that contains an input that supports string, number and datetime-local input types
 *
 * Example:
 *      <vcd-form-input
 *          type="number"
 *          [formControlName]="Fields.port"
 *          [placeholder]="'port'|translate"
 *          [label]="'network.services.firewall.sourcePort'|translate">
 *      </vcd-form-input>
 */
var FormInputComponent = /** @class */ (function (_super) {
    __extends(FormInputComponent, _super);
    function FormInputComponent(controlDirective) {
        var _this = _super.call(this, controlDirective) || this;
        /**
         * Input 'placeholder' field.
         */
        _this.placeholder = null;
        /**
         * Minimum value allowed.
         * (This is an input specified in the component attribute.)
         */
        _this.min = Number.MIN_SAFE_INTEGER;
        /**
         * Maximum value allowed.
         * (This is an input specified in the component attribute.)
         */
        _this.max = Number.MAX_SAFE_INTEGER;
        /**
         * Input 'type' field.
         */
        _this.type = 'text';
        /**
         * Input 'size' field.
         */
        _this.size = null;
        /**
         * Maximum number of characters (in UTF-16 code units) that the user can enter.
         */
        _this.maxlength = null;
        /**
         * The direction for displaying the hint
         */
        _this.hintPosition = 'top-left';
        /**
         * Emitted when enter key is released for callers to handle the event like... closing a filter widget
         * {\@link DatagridNumericFilterComponent.close}
         */
        _this.enterClicked = new EventEmitter(false);
        /**
         * Emitted when escape key is released for callers to handle the event
         */
        _this.escapeClicked = new EventEmitter(false);
        return _this;
    }
    /**
     * Input fields in the vcd-ui app does not support IME input on chrome browser. So in order to fix it, the value
     * being assigned to the form control has to be given to the input HTML element's value using the 'viewChild' query
     * selector inside writeValue function.
     */
    /**
     * Input fields in the vcd-ui app does not support IME input on chrome browser. So in order to fix it, the value
     * being assigned to the form control has to be given to the input HTML element's value using the 'viewChild' query
     * selector inside writeValue function.
     * @param {?} value
     * @return {?}
     */
    FormInputComponent.prototype.writeValue = /**
     * Input fields in the vcd-ui app does not support IME input on chrome browser. So in order to fix it, the value
     * being assigned to the form control has to be given to the input HTML element's value using the 'viewChild' query
     * selector inside writeValue function.
     * @param {?} value
     * @return {?}
     */
    function (value) {
        // The textInput view child element is undefined the first time. So, the initial value is stored in a variable
        // to assign it later to the input field value.
        this.initialValue = value;
        if (!this.textInput) {
            return;
        }
        if (typeof value === 'number') {
            value = value.toString(10);
        }
        if (this.type === 'datetime-local') {
            value = getFormattedDateValue(value);
        }
        this.textInput.nativeElement.value = value;
    };
    /**
     * @return {?}
     */
    FormInputComponent.prototype.ngAfterViewInit = /**
     * @return {?}
     */
    function () {
        var _this = this;
        // The textInput view child element is only defined after this life cycle hook. So, the writeValue is called
        // here.
        this.writeValue(this.initialValue);
        if (this.type === 'number') {
            defaultValidatorForControl(this.formControl, (/**
             * @return {?}
             */
            function () { return _this.validateNumber(); }));
        }
    };
    /**
     * @return {?}
     */
    FormInputComponent.prototype.inputChanged = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var value = this.textInput.nativeElement.value;
        this.initialValue = value;
        if (this.type === 'number') {
            if (!value) {
                this.onChange(value);
            }
            else {
                this.onChange(parseFloat(value));
            }
            return;
        }
        if (this.type === 'datetime-local' && value !== '') {
            /** @type {?} */
            var isoDateValue = new Date(getFormattedDateValue(value)).toISOString();
            this.onChange(isoDateValue);
            return;
        }
        this.onChange(value);
    };
    /**
     * Move the focus to the input element.
     * Its content is also selected for quick editing.
     */
    /**
     * Move the focus to the input element.
     * Its content is also selected for quick editing.
     * @return {?}
     */
    FormInputComponent.prototype.focus = /**
     * Move the focus to the input element.
     * Its content is also selected for quick editing.
     * @return {?}
     */
    function () {
        if (!this.textInput) {
            return;
        }
        this.textInput.nativeElement.focus();
        this.textInput.nativeElement.select();
    };
    /**
     * Default validator that looks at the input's [validity](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
     */
    /**
     * Default validator that looks at the input's [validity](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
     * @return {?}
     */
    FormInputComponent.prototype.validateNumber = /**
     * Default validator that looks at the input's [validity](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
     * @return {?}
     */
    function () {
        var _a;
        return ((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.nativeElement.validity.badInput) ? { 'vcd.cc.bad.input': true } : null;
    };
    FormInputComponent.decorators = [
        { type: Component, args: [{
                    selector: 'vcd-form-input',
                    template: "<div class=\"form-group\">\n    <div class=\"clr-form-control\" [vcdResponsiveInput]=\"{ disabled: !isResponsive }\">\n        <label *ngIf=\"label\" class=\"clr-control-label\" [for]=\"id\" [ngClass]=\"{ 'required-field': showAsterisk }\">{{\n            label\n        }}</label>\n        <div class=\"clr-control-container\" [ngClass]=\"{ 'clr-error': showErrors }\">\n            <div class=\"clr-input-wrapper\">\n                <input\n                    [attr.type]=\"type\"\n                    [id]=\"id\"\n                    class=\"clr-input\"\n                    #textInput\n                    (input)=\"inputChanged()\"\n                    [disabled]=\"disabled\"\n                    [attr.placeholder]=\"placeholder\"\n                    [attr.size]=\"size\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [attr.maxlength]=\"maxlength\"\n                    [attr.aria-required]=\"showAsterisk\"\n                    [attr.aria-describedby]=\"showErrors ? errorsId : descriptionId\"\n                    (blur)=\"inputChanged()\"\n                    (keyup.enter)=\"enterClicked.emit(true)\"\n                    (keyup.escape)=\"escapeClicked.emit(true)\"\n                />\n                <clr-icon *ngIf=\"showErrors && !hint\" class=\"clr-validate-icon\" shape=\"exclamation-circle\"></clr-icon>\n                <ng-content select=\"aside\"></ng-content>\n                <clr-signpost *ngIf=\"hint\">\n                    <clr-signpost-content [clrPosition]=\"hintPosition\" *clrIfOpen>\n                        <p>{{ hint }}</p>\n                    </clr-signpost-content>\n                </clr-signpost>\n            </div>\n            <span class=\"clr-subtext\" *ngIf=\"showErrors\" [id]=\"errorsId\">\n                <div *ngFor=\"let key of errorKeys\">\n                    <div>{{ key | translate: formControl.value:min.toString():max }}</div>\n                </div>\n            </span>\n            <span class=\"clr-subtext\" *ngIf=\"!showErrors && description\" [id]=\"descriptionId\">\n                {{ description }}\n            </span>\n        </div>\n    </div>\n</div>\n<div class=\"clr-subtext\">\n    <ng-content select=\"footer\"></ng-content>\n</div>\n",
                    styles: [".required-field:after{content:\"*\";color:red;padding-left:5px}.form-group ::ng-deep aside{display:inline-block}clr-signpost-content p:first-child{margin-top:0;white-space:pre-line}", ".form-group.hide-label{padding-left:0}:host-context(.modal):not(.adjust-aside-left) .form-label{flex-grow:1}:host-context(.modal):not(.adjust-aside-left) .form-label>input{width:100%}.form-group-description{margin-bottom:15px}"]
                }] }
    ];
    /** @nocollapse */
    FormInputComponent.ctorParameters = function () { return [
        { type: NgControl, decorators: [{ type: Self }, { type: Optional }] }
    ]; };
    FormInputComponent.propDecorators = {
        placeholder: [{ type: Input }],
        min: [{ type: Input }],
        max: [{ type: Input }],
        type: [{ type: Input }],
        size: [{ type: Input }],
        maxlength: [{ type: Input }],
        hintPosition: [{ type: Input }],
        hint: [{ type: Input }],
        textInput: [{ type: ViewChild, args: ['textInput', { static: true },] }],
        enterClicked: [{ type: Output }],
        escapeClicked: [{ type: Output }]
    };
    return FormInputComponent;
}(BaseFormControl));
export { FormInputComponent };
if (false) {
    /**
     * Input 'placeholder' field.
     * @type {?}
     */
    FormInputComponent.prototype.placeholder;
    /**
     * Minimum value allowed.
     * (This is an input specified in the component attribute.)
     * @type {?}
     */
    FormInputComponent.prototype.min;
    /**
     * Maximum value allowed.
     * (This is an input specified in the component attribute.)
     * @type {?}
     */
    FormInputComponent.prototype.max;
    /**
     * Input 'type' field.
     * @type {?}
     */
    FormInputComponent.prototype.type;
    /**
     * Input 'size' field.
     * @type {?}
     */
    FormInputComponent.prototype.size;
    /**
     * Maximum number of characters (in UTF-16 code units) that the user can enter.
     * @type {?}
     */
    FormInputComponent.prototype.maxlength;
    /**
     * The direction for displaying the hint
     * @type {?}
     */
    FormInputComponent.prototype.hintPosition;
    /**
     * Hint to display in the content of a signpost
     * @type {?}
     */
    FormInputComponent.prototype.hint;
    /**
     * The input field element
     * @type {?}
     */
    FormInputComponent.prototype.textInput;
    /**
     * Emitted when enter key is released for callers to handle the event like... closing a filter widget
     * {\@link DatagridNumericFilterComponent.close}
     * @type {?}
     */
    FormInputComponent.prototype.enterClicked;
    /**
     * Emitted when escape key is released for callers to handle the event
     * @type {?}
     */
    FormInputComponent.prototype.escapeClicked;
}
/**
 * To format a date string into a value which can be given to the input html element
 * @param {?} value
 * @return {?}
 */
export function getFormattedDateValue(value) {
    /** @type {?} */
    var date = new Date(value);
    return (date.getFullYear() +
        '-' +
        pad(date.getMonth() + 1) +
        '-' +
        pad(date.getDate()) +
        'T' +
        pad(date.getHours()) +
        ':' +
        pad(date.getMinutes()));
}
/**
 * @param {?} num
 * @return {?}
 */
export function pad(num) {
    if (num < 10) {
        return '0' + num;
    }
    return num;
}
//# sourceMappingURL=data:application/json;base64, 