import { __decorate, __param } from "tslib";
import { Component, forwardRef, Inject, InjectionToken, Injector, Input, OnInit, Optional, ViewChild } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, NgForm, NgModel } from '@angular/forms';
import { FormDisabledDirective } from '../form-disabled.directive';
export var INPUT_STRATEGY = new InjectionToken('input custom type strategy');
var InputComponent = /** @class */ (function () {
    function InputComponent(injector, strategy, form, formDisabled) {
        this.injector = injector;
        this.strategy = strategy;
        this.form = form;
        this.formDisabled = formDisabled;
        this.type = 'text';
        this.autocomplete = 'off';
        this.isPasswordVisible = false;
    }
    InputComponent_1 = InputComponent;
    Object.defineProperty(InputComponent.prototype, "setRequired", {
        set: function (value) {
            this.required = coerceBooleanProperty(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "setDisabled", {
        set: function (value) {
            this.disabled = coerceBooleanProperty(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "setAutofocus", {
        set: function (value) {
            this.autofocus = coerceBooleanProperty(value);
        },
        enumerable: true,
        configurable: true
    });
    InputComponent.prototype.ngOnInit = function () {
        this.control = this.injector.get(NgControl, null);
    };
    Object.defineProperty(InputComponent.prototype, "invalid", {
        get: function () {
            var _a, _b, _c;
            return !this.focused && (((_a = this.control) === null || _a === void 0 ? void 0 : _a.touched) || ((_b = this.form) === null || _b === void 0 ? void 0 : _b.submitted)) && ((_c = this.control) === null || _c === void 0 ? void 0 : _c.invalid);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "isFilled", {
        get: function () {
            return this.value !== '' && this.value !== null && this.value !== undefined;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "viewDisabled", {
        get: function () {
            var _a;
            return this.disabled || ((_a = this.formDisabled) === null || _a === void 0 ? void 0 : _a.disabled);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "viewType", {
        get: function () {
            var _a, _b;
            if (this.type === 'password' && this.isPasswordVisible) {
                return 'text';
            }
            return _b = (_a = this.strategy) === null || _a === void 0 ? void 0 : _a.type, (_b !== null && _b !== void 0 ? _b : this.type);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "viewMask", {
        get: function () {
            var _a, _b;
            return _b = (_a = this.strategy) === null || _a === void 0 ? void 0 : _a.mask, (_b !== null && _b !== void 0 ? _b : this.mask);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "viewPlaceholder", {
        get: function () {
            var _a, _b;
            return _b = (_a = this.strategy) === null || _a === void 0 ? void 0 : _a.placeholder, (_b !== null && _b !== void 0 ? _b : this.placeholder);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(InputComponent.prototype, "hasPasswordToggle", {
        get: function () {
            return this.type === 'password';
        },
        enumerable: true,
        configurable: true
    });
    InputComponent.prototype.passwordToggle = function () {
        this.isPasswordVisible = !this.isPasswordVisible;
    };
    InputComponent.prototype.registerOnChange = function (fn) {
        this.onChange = fn;
    };
    InputComponent.prototype.registerOnTouched = function (fn) {
        this.onTouched = fn;
    };
    InputComponent.prototype.writeValue = function (outsideValue) {
        var _a;
        this.value = ((_a = this.strategy) === null || _a === void 0 ? void 0 : _a.parse) ? this.strategy.parse(outsideValue) : outsideValue;
    };
    InputComponent.prototype.setDisabledState = function (isDisabled) {
        this.disabled = isDisabled;
    };
    InputComponent.prototype.updateValue = function (insideValue) {
        var _a;
        this.value = insideValue;
        if (this.onChange) {
            var changedValue = ((_a = this.strategy) === null || _a === void 0 ? void 0 : _a.format) ? this.strategy.format(insideValue) : insideValue;
            this.onChange(changedValue);
        }
        if (this.onTouched) {
            this.onTouched();
        }
    };
    InputComponent.prototype.onFocus = function () {
        this.focused = true;
    };
    InputComponent.prototype.onBlur = function () {
        this.focused = false;
    };
    var InputComponent_1;
    InputComponent.ctorParameters = function () { return [
        { type: Injector },
        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [INPUT_STRATEGY,] }] },
        { type: NgForm, decorators: [{ type: Optional }] },
        { type: FormDisabledDirective, decorators: [{ type: Optional }] }
    ]; };
    __decorate([
        Input()
    ], InputComponent.prototype, "label", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "name", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "type", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "autocomplete", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "approved", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "icon", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "iconColor", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "error", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "mask", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "placeholder", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "value", void 0);
    __decorate([
        Input()
    ], InputComponent.prototype, "size", void 0);
    __decorate([
        ViewChild('model')
    ], InputComponent.prototype, "model", void 0);
    __decorate([
        Input('required')
    ], InputComponent.prototype, "setRequired", null);
    __decorate([
        Input('disabled')
    ], InputComponent.prototype, "setDisabled", null);
    __decorate([
        Input('autofocus')
    ], InputComponent.prototype, "setAutofocus", null);
    InputComponent = InputComponent_1 = __decorate([
        Component({
            selector: 'ui-input',
            template: "<div class=\"input\"\n     [class.input--focused]=\"focused\"\n     [class.input--invalid]=\"invalid\"\n     [class.input--filled]=\"isFilled\"\n     [class.input--disabled]=\"viewDisabled\">\n\n  <label class=\"input__wrapper\">\n    <input #model=\"ngModel\"\n           [(ngModel)]=\"value\"\n           (ngModelChange)=\"updateValue($event)\"\n           (focusin)=\"onFocus()\"\n           (focusout)=\"onBlur()\"\n           [name]=\"name\"\n           [type]=\"viewType\"\n           [disabled]=\"viewDisabled\"\n           [required]=\"required\"\n           [autocomplete]=\"autocomplete\"\n           [autofocus]=\"autofocus\"\n           [imask]=\"viewMask\"\n           class=\"input__value\"/>\n    <span class=\"input__label\"\n          [class.input__label--focused]=\"focused\"\n          [class.input__label--filled]=\"isFilled\"\n          [class.input__label--optional]=\"!required\">{{label}}</span>\n    <span *ngIf=\"viewPlaceholder\"\n          class=\"input__placeholder\"\n          [class.input__placeholder--hidden]=\"!focused || isFilled\">{{viewPlaceholder}}</span>\n  </label>\n\n  <div class=\"input__additional\" *ngIf=\"approved || invalid || icon || hasPasswordToggle\">\n    <div class=\"input__action\" *ngIf=\"hasPasswordToggle; else iconTemplate\">\n      <button type=\"button\" class=\"input__action__button\"\n              [attr.title]=\"isPasswordVisible ? 'Password hidden' : 'Password show'\"\n              (click)=\"passwordToggle()\">\n        <ui-icon [name]=\"isPasswordVisible ? 'eye-off' : 'eye'\" size=\"s\" stroke=\"2\"></ui-icon>\n      </button>\n    </div>\n    <ng-template #iconTemplate>\n      <ng-container\n        [ngTemplateOutlet]=\"approved ? iconApproved : invalid ? iconInvalid : iconDefault\"></ng-container>\n      <ng-template #iconInvalid>\n        <ui-icon name=\"attention-circle\" color=\"error\" size=\"s\" stroke=\"2\" role=\"img\" aria-label=\"Error icon\"></ui-icon>\n      </ng-template>\n      <ng-template #iconApproved>\n        <ui-icon name=\"check\" color=\"success\" size=\"s\" stroke=\"2\" role=\"img\" aria-label=\"Approved icon\"></ui-icon>\n      </ng-template>\n      <ng-template #iconDefault>\n        <ui-icon [name]=\"icon\" [color]=\"iconColor\" *ngIf=\"icon\" size=\"s\" stroke=\"2\" role=\"img\" [attr.aria-label]=\"icon + ' icon'\"></ui-icon>\n      </ng-template>\n    </ng-template>\n  </div>\n\n</div>\n\n<div class=\"error\" *ngIf=\"invalid\">\n  <div *ngFor=\"let error of control.errors | parseMessages\">{{error}}</div>\n</div>\n\n<div class=\"comment\" *ngIf=\"!invalid\">\n  <ng-content></ng-content>\n</div>\n",
            providers: [
                {
                    provide: NG_VALUE_ACCESSOR,
                    useExisting: forwardRef(function () { return InputComponent_1; }),
                    multi: true
                }
            ],
            styles: [".transition{transition:.5s ease-in}.transition-fast{transition:.2s ease-in}:host{display:inline-block;width:100%;color:var(--color-contrast-50)}.input{position:relative;display:flex;width:100%;height:var(--field-height);padding:var(--field-padding);background:var(--field-bg);border:none;box-sizing:border-box;border-radius:var(--radius-regular);margin:0;line-height:1;outline:0;transition:background .2s ease-in-out}.input:after{content:\" \";position:absolute;height:1px;background:0 0;bottom:0;left:1rem;right:1rem}@media not all and (pointer:coarse){.input:hover{--field-bg:var(--field-bg-hover)}}.input--focused:after{background:var(--color-contrast-100)}.input--invalid .input__label{color:var(--color-critical)}.input--invalid.input--filled:after{background:var(--color-error)}.input--disabled{--field-bg:var(--field-bg-disabled);--field-label-color:var(--field-label-color-disabled);cursor:not-allowed}.input--disabled .input__wrapper{pointer-events:none}.input__wrapper{flex:1;position:relative;box-sizing:border-box;overflow:hidden;cursor:text}.input__label{position:absolute;font-size:var(--input-font-size);color:var(--field-label-color);max-width:100%;top:50%;left:0;transform:translate(0,-50%);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;transition:transform .25s,font-size .25s;will-change:transform,font-size;line-height:1}.input__label--optional:after{content:\"(optional)\";display:inline;padding-left:.25rem}.input__label--filled,.input__label--focused{font-size:var(--input-label-focused-font-size);color:var(--color-contrast-40);transform:var(--input-label-focused-translate)}.input__value{position:relative;top:var(--input-value-top);width:100%;box-sizing:border-box;font-size:var(--input-font-size);color:var(--field-value-color);border:0;background:0 0}.input__value:focus{margin:0;outline:0;border:0;background:0 0}.input__additional{display:flex;align-items:center;white-space:nowrap;flex-shrink:0}.input__action{position:relative;cursor:pointer;line-height:0}.input__action__button{color:var(--color-contrast-20);transition:color .2s}.input__action__button:focus-visible{color:var(--color-contrast-100)}.input__action__button:hover{color:var(--color-contrast-100)}.input__placeholder{position:absolute;top:var(--input-value-top);left:0;color:var(--color-contrast-20);font-size:var(--input-font-size);padding:var(--input-wrapper-padding);line-height:1.2;max-width:100%}.input__placeholder--hidden{display:none}.comment,.error{font-size:var(--input-comment-font-size);color:var(--color-contrast-20);padding:var(--field-padding);padding-top:var(--input-comment-padding);line-height:var(--line-height)}.comment:empty,.error:empty{display:none}.error{color:var(--color-error)}"]
        }),
        __param(1, Optional()), __param(1, Inject(INPUT_STRATEGY)),
        __param(2, Optional()),
        __param(3, Optional())
    ], InputComponent);
    return InputComponent;
}());
export { InputComponent };
//# sourceMappingURL=data:application/json;base64, 