import { Component, EventEmitter, forwardRef, Inject, Input, Optional, Output, ViewChild, } from '@angular/core';
import { COMPOSITION_BUFFER_MODE, NG_VALIDATORS, NG_VALUE_ACCESSOR, } from '@angular/forms';
import { EvoControlStates } from '../../common/evo-control-state-manager/evo-control-states.enum';
import { EvoBaseControl } from '../../common/evo-base-control';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime, map, takeUntil, tap } from 'rxjs/operators';
import { enterZone } from '../../operators';
import * as IMask from 'imask';
import * as i0 from "@angular/core";
import * as i1 from "../evo-loader/evo-circular-loader.component";
import * as i2 from "../evo-icon/evo-icon.component";
import * as i3 from "../evo-control-error/evo-control-error.component";
import * as i4 from "../../directives/evo-ui-class.directive";
import * as i5 from "@angular/common";
export var EvoInputSizes;
(function (EvoInputSizes) {
    EvoInputSizes["small"] = "small";
    EvoInputSizes["normal"] = "normal";
})(EvoInputSizes || (EvoInputSizes = {}));
export var EvoInputTheme;
(function (EvoInputTheme) {
    EvoInputTheme["default"] = "default";
    EvoInputTheme["rounded"] = "rounded";
})(EvoInputTheme || (EvoInputTheme = {}));
export class EvoInputComponent extends EvoBaseControl {
    constructor(zone, changeDetector, _renderer, _compositionMode, injector) {
        super(injector);
        this.zone = zone;
        this.changeDetector = changeDetector;
        this._renderer = _renderer;
        this._compositionMode = _compositionMode;
        this.injector = injector;
        this.type = 'text';
        this.disabled = false;
        this.loading = false;
        this.prefix = '';
        this.inputDebounce = 50;
        this.unmask = false;
        this.clearable = false;
        this.maskValidation = false;
        this.blur = new EventEmitter();
        this.size = EvoInputSizes.normal;
        this.theme = EvoInputTheme.default;
        this.customTooltipChecked = false;
        this.uiStates = {
            hasCustomTooltip: false,
            isTooltipVisible: false,
            isFocused: false,
        };
        this.tooltipVisibilityTimeout = false;
        this.destroy$ = new Subject();
        /** Whether the user is creating a composition string (IME events). */
        this._composing = false;
        this.onChange = (_value) => { };
        this.onTouched = () => { };
    }
    set setValue(value) {
        this._value = value;
    }
    set setSize(size) {
        if (EvoInputSizes[size]) {
            this.size = EvoInputSizes[size];
        }
    }
    set setTheme(theme) {
        if (EvoInputTheme[theme]) {
            this.theme = EvoInputTheme[theme];
        }
    }
    get isDisabled() {
        if (this.loading) {
            return true;
        }
        return this.disabled;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        if (value || this._value) {
            this._value = this.removePrefix(value);
            this.changeDetector.markForCheck();
        }
    }
    get inputClass() {
        return {
            focused: this.uiStates.isFocused,
            disabled: this.isDisabled,
            valid: this.currentState[EvoControlStates.valid],
            invalid: this.currentState[EvoControlStates.invalid],
            [`size-${this.size}`]: this.size !== EvoInputSizes.normal,
            [`theme-${this.theme}`]: true,
        };
    }
    get hasAdditional() {
        return !!this.tooltip || this.uiStates.hasCustomTooltip || !!this.icon;
    }
    set maskValue(value) {
        const normalizedValue = value ?? '';
        if (this.iMask) {
            if (this.unmask === 'typed') {
                this.iMask.typedValue = normalizedValue;
            }
            else if (this.unmask) {
                this.iMask.unmaskedValue = normalizedValue;
            }
            else {
                this.iMask.value = normalizedValue;
            }
        }
        else {
            this.writeToElement(normalizedValue);
        }
    }
    get maskValue() {
        if (!this.iMask) {
            return this.inputElement.nativeElement.value;
        }
        if (this.unmask === 'typed') {
            return this.iMask.typedValue;
        }
        if (this.unmask) {
            return this.iMask.unmaskedValue;
        }
        return this.iMask.value;
    }
    get isClearable() {
        return this.clearable && !this.disabled;
    }
    ngOnInit() {
        const inputEl = this.inputElement.nativeElement;
        this.zone.runOutsideAngular(() => {
            if (this.mask) {
                this.createMaskInstance(this.mask);
            }
            fromEvent(inputEl, 'input')
                .pipe(debounceTime(this.inputDebounce), map((e) => {
                if (this.iMask) {
                    return this.maskValue;
                }
                return e.target.value;
            }), enterZone(this.zone), tap((value) => {
                this.onInputChange(value);
            }), takeUntil(this.destroy$))
                .subscribe();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        if (this.iMask) {
            this.destroyMask();
        }
    }
    ngOnChanges(changes) {
        if (!changes) {
            return;
        }
        const { mask } = changes;
        if (mask && !mask.firstChange) {
            const newMaskOptions = mask.currentValue;
            if (newMaskOptions) {
                if (this.iMask) {
                    this.iMask.updateOptions(newMaskOptions);
                }
                else {
                    this.createMaskInstance(newMaskOptions);
                }
            }
            else {
                this.destroyMask();
            }
        }
    }
    ngAfterViewInit() {
        if (this.autoFocus) {
            this.inputElement.nativeElement.focus();
        }
        this.checkCustomTooltip();
    }
    writeToElement(value) {
        this._renderer.setProperty(this.inputElement.nativeElement, 'value', value);
    }
    writeValue(value) {
        if (value === this._value) {
            return;
        }
        this.value = value;
        if (this.mask) {
            this.maskValue = value;
        }
        else {
            this.writeToElement(value);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(state) {
        this.disabled = state;
        this.changeDetector.detectChanges();
    }
    onInputChange(value) {
        if (value || this._value) {
            this._value = this.removePrefix(value);
            this.onChange(this.prefix + (this._value || ''));
            this.changeDetector.markForCheck();
        }
    }
    onFocus() {
        if (!this.uiStates.isFocused) {
            this.uiStates.isFocused = true;
        }
    }
    onBlur() {
        this.uiStates.isFocused = false;
        this.onTouched();
        this.blur.emit();
    }
    onTooltipClick(event) {
        event.preventDefault();
        event.stopPropagation();
    }
    onClear() {
        this.writeValue('');
    }
    hideTooltip() {
        this.tooltipVisibilityTimeout = true;
        setTimeout(() => {
            if (this.tooltipVisibilityTimeout) {
                this.uiStates.isTooltipVisible = false;
            }
        }, 25);
    }
    showTooltip() {
        this.uiStates.isTooltipVisible = true;
        this.tooltipVisibilityTimeout = false;
    }
    // Composition handling is taken from:
    // https://github.com/angular/angular/blob/11.0.3/packages/forms/src/directives/default_value_accessor.ts#L152
    _compositionStart() {
        this._composing = true;
    }
    _compositionEnd(value) {
        this._composing = false;
        if (this._compositionMode) {
            this.value = value;
        }
    }
    validate() {
        if (this.maskValidation && this.mask && !this.iMask.masked.isComplete) {
            return { mask: true };
        }
        return null;
    }
    removePrefix(value) {
        if (typeof value === 'string' && value.indexOf(this.prefix) === 0) {
            return value.replace(this.prefix, '');
        }
        return value;
    }
    createMaskInstance(opts) {
        this.iMask = new IMask.InputMask(this.inputElement.nativeElement, opts);
    }
    destroyMask() {
        this.iMask?.destroy();
        this.iMask = null;
    }
    checkCustomTooltip() {
        this.uiStates.hasCustomTooltip =
            this.tooltipElement &&
                this.tooltipElement.nativeElement &&
                this.tooltipElement.nativeElement.children.length > 0;
        this.customTooltipChecked = true;
        this.changeDetector.detectChanges();
    }
}
EvoInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoInputComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: COMPOSITION_BUFFER_MODE, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
EvoInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoInputComponent, selector: "evo-input", inputs: { autoFocus: "autoFocus", dataCp: ["data-cp", "dataCp"], icon: "icon", mask: "mask", placeholder: "placeholder", tooltip: "tooltip", type: "type", disabled: "disabled", loading: "loading", prefix: "prefix", autocomplete: "autocomplete", inputDebounce: "inputDebounce", unmask: "unmask", clearable: "clearable", maskValidation: "maskValidation", setValue: ["value", "setValue"], setSize: ["size", "setSize"], setTheme: ["theme", "setTheme"] }, outputs: { blur: "blur" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => EvoInputComponent),
            multi: true,
        },
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => EvoInputComponent),
            multi: true,
        },
    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "tooltipElement", first: true, predicate: ["tooltipContainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n    <div class=\"evo-input__prefix-content\">\n        <ng-content select=\"[evoInputPrefixContent]\"></ng-content>\n    </div>\n    <div class=\"evo-input__prefix-icon\">\n        <ng-content select=\"[evoInputIcon]\"></ng-content>\n    </div>\n    <span\n        class=\"evo-input__prefix\" *ngIf=\"prefix\"\n        [evoUiClass]=\"{focused: !isDisabled && !!value || uiStates.isFocused }\"\n    >{{prefix}}</span>\n    <input\n        #input\n        class=\"evo-input__field\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (compositionstart)=\"_compositionStart()\"\n        (compositionend)=\"_compositionEnd($event.target.value)\"\n        type=\"{{ type }}\"\n        [attr.autocomplete]=\"autocomplete\"\n        placeholder=\"{{ placeholder }}\"\n        [attr.data-cp]=\"dataCp\"\n        [disabled]=\"isDisabled\"\n    >\n    <ng-container *ngIf=\"loading; else sideBlock\">\n        <evo-circular-loader  class=\"evo-input__loading-spinner\"></evo-circular-loader>\n    </ng-container>\n    <ng-template #sideBlock>\n        <div\n            *ngIf=\"isClearable\"\n            class=\"evo-input__clearable\"\n            (click)=\"onClear()\">\n            <evo-icon shape=\"decline\" class=\"evo-input__icon-clear\"></evo-icon>\n        </div>\n        <div class=\"evo-input__additional\" *ngIf=\"hasAdditional\">\n            <evo-icon\n                shape=\"help\" class=\"evo-input__tooltip\"\n                *ngIf=\"tooltip || uiStates.hasCustomTooltip\"\n                (mouseenter)=\"showTooltip()\"\n                (mouseleave)=\"hideTooltip()\"\n                (click)=\"onTooltipClick($event)\"\n            ></evo-icon>\n            <div class=\"evo-input__icon\" *ngIf=\"icon\">\n                <img [attr.src]=\"icon\">\n            </div>\n        </div>\n    </ng-template>\n    <div\n        *ngIf=\"!customTooltipChecked || uiStates.isTooltipVisible\"\n        [hidden]=\"!customTooltipChecked\"\n        (click)=\"onTooltipClick($event)\"\n        (mouseenter)=\"showTooltip()\"\n        (mouseleave)=\"hideTooltip()\"\n        #tooltipContainer\n        [ngClass]=\"{'evo-input__tooltip-container': tooltip}\"\n    >\n        {{ tooltip }}\n        <ng-content select=\"[tooltip]\"></ng-content>\n    </div>\n</label>\n<evo-control-error\n    *ngIf=\"showErrors\"\n    [errors]=\"control.errors\"\n    [errorsMessages]=\"errorsMessages\"\n></evo-control-error>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}:host{display:inline-block;--evo-input-prefix-content-margin: 4px 8px 4px 4px}.evo-input{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 8px;--evo-input-padding-bottom: 8px;position:relative;cursor:text}.evo-input_focused{border:solid 1px #74706F}.evo-input_disabled{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}.evo-input_invalid{border-color:#ff1817!important}.evo-input_theme-default{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 4px;--evo-input-padding-bottom: 4px}.evo-input_theme-default.evo-input_size-small .evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input_theme-rounded{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small{--evo-input-border-radius: 4px;--evo-input-line-height: 24px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px}.evo-input_theme-rounded.evo-input_size-small .evo-input__field:last-child{--evo-input-padding-right: 12px}.evo-input_size-small{height:32px}.evo-input_size-small .evo-input__icon{margin-right:8px}.evo-input_size-small .evo-input__icon img{max-height:16px}.evo-input_size-small .evo-input__tooltip-container{top:100%}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(100% - 28px)}@media (min-width: 1200px){.evo-input_size-small .evo-input__tooltip-container{top:calc(100% + 4px)}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(50% - 6px)}}.evo-input__prefix-icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-left:8px;fill:#91b1b8}.evo-input__prefix-icon:empty{display:none}.evo-input__prefix-icon:not(:empty)~.evo-input__field{--evo-input-padding-left: 8px}.evo-input__prefix-content{display:inline-flex;flex-shrink:0;justify-content:center;align-items:center;margin:var(--evo-input-prefix-content-margin)}.evo-input__prefix-content:empty{display:none}.evo-input__prefix-content:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__field{width:100%;height:100%;margin:0;padding:var(--evo-input-padding-top) var(--evo-input-padding-right) var(--evo-input-padding-bottom) var(--evo-input-padding-left);color:inherit;font-weight:inherit;font-size:inherit;border:none;border-radius:inherit;outline:none}.evo-input__field::-webkit-input-placeholder{color:#9b9b9b}.evo-input__field::-moz-placeholder{color:#9b9b9b;opacity:1}.evo-input__field:-ms-input-placeholder{color:#9b9b9b}.evo-input__field:disabled{color:#b0b0b0;background-color:#f9fafb!important}.evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input__prefix{padding-left:12px;transition:color .2s;color:#9b9b9b}.evo-input__prefix:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__tooltip{flex:0 0 24px;width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon-clear{width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon{margin:0 8px}.evo-input__icon img{display:block;width:100%;max-width:60px;height:auto;max-height:22px}.evo-input__tooltip-container{position:absolute;top:calc(100% - 2px);left:0;z-index:1;display:flex;width:100%;padding:10px 10px 10px 20px;color:#212121;line-height:normal;white-space:normal;background-color:#fff8e6;border-radius:4px;box-shadow:0 4px 12px #0003;cursor:default}.evo-input__tooltip-container[hidden]{display:none!important}.evo-input__tooltip-container:before{position:absolute;top:-20px;left:calc(100% - 34px);border:10px solid transparent;border-bottom-color:#fff8e6;pointer-events:none;content:\"\"}@media (min-width: 1200px){.evo-input__tooltip-container{left:calc(50% - 22px)}.evo-input__tooltip-container:before{left:calc(50% - 12px)}}.evo-input__clearable{display:flex;justify-content:center;align-items:center}.evo-input__clearable+.evo-input__additional{margin-left:-10px}.evo-input__additional{display:flex;justify-content:center;align-items:center}.evo-input__additional:not(:last-child) .evo-input__icon{margin-right:8px}.evo-input__additional+.evo-input__loading-spinner{margin-left:0}.evo-input__loading-spinner{flex:0 0 24px;width:24px;height:24px;margin:0 8px;--evo-circular-loader-color: #91B1B8}\n"], components: [{ type: i1.EvoCircularLoaderComponent, selector: "evo-circular-loader" }, { type: i2.EvoIconComponent, selector: "evo-icon", inputs: ["shape", "svgWidth", "svgHeight", "svgViewBox"] }, { type: i3.EvoControlErrorComponent, selector: "evo-control-error", inputs: ["errors", "errorsMessages", "showCount"] }], directives: [{ type: i4.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-input', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => EvoInputComponent),
                            multi: true,
                        },
                        {
                            provide: NG_VALIDATORS,
                            useExisting: forwardRef(() => EvoInputComponent),
                            multi: true,
                        },
                    ], template: "<label class=\"evo-input\" [evoUiClass]=\"inputClass\">\n    <div class=\"evo-input__prefix-content\">\n        <ng-content select=\"[evoInputPrefixContent]\"></ng-content>\n    </div>\n    <div class=\"evo-input__prefix-icon\">\n        <ng-content select=\"[evoInputIcon]\"></ng-content>\n    </div>\n    <span\n        class=\"evo-input__prefix\" *ngIf=\"prefix\"\n        [evoUiClass]=\"{focused: !isDisabled && !!value || uiStates.isFocused }\"\n    >{{prefix}}</span>\n    <input\n        #input\n        class=\"evo-input__field\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (compositionstart)=\"_compositionStart()\"\n        (compositionend)=\"_compositionEnd($event.target.value)\"\n        type=\"{{ type }}\"\n        [attr.autocomplete]=\"autocomplete\"\n        placeholder=\"{{ placeholder }}\"\n        [attr.data-cp]=\"dataCp\"\n        [disabled]=\"isDisabled\"\n    >\n    <ng-container *ngIf=\"loading; else sideBlock\">\n        <evo-circular-loader  class=\"evo-input__loading-spinner\"></evo-circular-loader>\n    </ng-container>\n    <ng-template #sideBlock>\n        <div\n            *ngIf=\"isClearable\"\n            class=\"evo-input__clearable\"\n            (click)=\"onClear()\">\n            <evo-icon shape=\"decline\" class=\"evo-input__icon-clear\"></evo-icon>\n        </div>\n        <div class=\"evo-input__additional\" *ngIf=\"hasAdditional\">\n            <evo-icon\n                shape=\"help\" class=\"evo-input__tooltip\"\n                *ngIf=\"tooltip || uiStates.hasCustomTooltip\"\n                (mouseenter)=\"showTooltip()\"\n                (mouseleave)=\"hideTooltip()\"\n                (click)=\"onTooltipClick($event)\"\n            ></evo-icon>\n            <div class=\"evo-input__icon\" *ngIf=\"icon\">\n                <img [attr.src]=\"icon\">\n            </div>\n        </div>\n    </ng-template>\n    <div\n        *ngIf=\"!customTooltipChecked || uiStates.isTooltipVisible\"\n        [hidden]=\"!customTooltipChecked\"\n        (click)=\"onTooltipClick($event)\"\n        (mouseenter)=\"showTooltip()\"\n        (mouseleave)=\"hideTooltip()\"\n        #tooltipContainer\n        [ngClass]=\"{'evo-input__tooltip-container': tooltip}\"\n    >\n        {{ tooltip }}\n        <ng-content select=\"[tooltip]\"></ng-content>\n    </div>\n</label>\n<evo-control-error\n    *ngIf=\"showErrors\"\n    [errors]=\"control.errors\"\n    [errorsMessages]=\"errorsMessages\"\n></evo-control-error>\n", styles: ["@keyframes evo-fx-blink{50%{transform:scale(1);opacity:1}to{opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:50vw 50%}to{background-position:100vw 50%}}@keyframes evo-ellipsis-animation{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}:host{display:inline-block;--evo-input-prefix-content-margin: 4px 8px 4px 4px}.evo-input{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 8px;--evo-input-padding-bottom: 8px;position:relative;cursor:text}.evo-input_focused{border:solid 1px #74706F}.evo-input_disabled{color:#b0b0b0!important;background-color:#f9fafb!important;border:1px solid #E3E3E3!important;cursor:default;pointer-events:none}.evo-input_invalid{border-color:#ff1817!important}.evo-input_theme-default{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-height: 32px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-default.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-default.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px;--evo-input-padding-right: 12px;--evo-input-padding-top: 4px;--evo-input-padding-bottom: 4px}.evo-input_theme-default.evo-input_size-small .evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input_theme-rounded{--evo-input-height: 40px;--evo-input-border-radius: 4px;--evo-input-font-size: 14px;--evo-input-line-height: 24px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small{--evo-input-border-radius: 4px;--evo-input-line-height: 24px;--evo-input-font-size: 14px;--evo-input-height: 40px;--evo-input-border-radius: 256px;display:flex;align-items:center;height:var(--evo-input-height);color:#212121;font-weight:400;font-size:var(--evo-input-font-size);font-family:var(--evo-font);line-height:var(--evo-input-line-height);white-space:nowrap;background-color:#fff;border:1px solid #C6C6C6;border-radius:var(--evo-input-border-radius);outline:none;transition:color .3s,box-shadow .3s,background .3s,border .3s}.evo-input_theme-rounded.evo-input_size-small:hover{border:1px solid #9B9B9B}.evo-input_theme-rounded.evo-input_size-small .evo-input__field{--evo-input-padding-left: 12px}.evo-input_theme-rounded.evo-input_size-small .evo-input__field:last-child{--evo-input-padding-right: 12px}.evo-input_size-small{height:32px}.evo-input_size-small .evo-input__icon{margin-right:8px}.evo-input_size-small .evo-input__icon img{max-height:16px}.evo-input_size-small .evo-input__tooltip-container{top:100%}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(100% - 28px)}@media (min-width: 1200px){.evo-input_size-small .evo-input__tooltip-container{top:calc(100% + 4px)}.evo-input_size-small .evo-input__tooltip-container:before{left:calc(50% - 6px)}}.evo-input__prefix-icon{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-left:8px;fill:#91b1b8}.evo-input__prefix-icon:empty{display:none}.evo-input__prefix-icon:not(:empty)~.evo-input__field{--evo-input-padding-left: 8px}.evo-input__prefix-content{display:inline-flex;flex-shrink:0;justify-content:center;align-items:center;margin:var(--evo-input-prefix-content-margin)}.evo-input__prefix-content:empty{display:none}.evo-input__prefix-content:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__field{width:100%;height:100%;margin:0;padding:var(--evo-input-padding-top) var(--evo-input-padding-right) var(--evo-input-padding-bottom) var(--evo-input-padding-left);color:inherit;font-weight:inherit;font-size:inherit;border:none;border-radius:inherit;outline:none}.evo-input__field::-webkit-input-placeholder{color:#9b9b9b}.evo-input__field::-moz-placeholder{color:#9b9b9b;opacity:1}.evo-input__field:-ms-input-placeholder{color:#9b9b9b}.evo-input__field:disabled{color:#b0b0b0;background-color:#f9fafb!important}.evo-input__field:not(:last-child){--evo-input-padding-right: 0}.evo-input__prefix{padding-left:12px;transition:color .2s;color:#9b9b9b}.evo-input__prefix:not(:empty)~.evo-input__field{--evo-input-padding-left: 0}.evo-input__tooltip{flex:0 0 24px;width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon-clear{width:24px;height:24px;margin:0 8px;cursor:pointer;-webkit-user-select:none;user-select:none;fill:#91b1b8}.evo-input__icon{margin:0 8px}.evo-input__icon img{display:block;width:100%;max-width:60px;height:auto;max-height:22px}.evo-input__tooltip-container{position:absolute;top:calc(100% - 2px);left:0;z-index:1;display:flex;width:100%;padding:10px 10px 10px 20px;color:#212121;line-height:normal;white-space:normal;background-color:#fff8e6;border-radius:4px;box-shadow:0 4px 12px #0003;cursor:default}.evo-input__tooltip-container[hidden]{display:none!important}.evo-input__tooltip-container:before{position:absolute;top:-20px;left:calc(100% - 34px);border:10px solid transparent;border-bottom-color:#fff8e6;pointer-events:none;content:\"\"}@media (min-width: 1200px){.evo-input__tooltip-container{left:calc(50% - 22px)}.evo-input__tooltip-container:before{left:calc(50% - 12px)}}.evo-input__clearable{display:flex;justify-content:center;align-items:center}.evo-input__clearable+.evo-input__additional{margin-left:-10px}.evo-input__additional{display:flex;justify-content:center;align-items:center}.evo-input__additional:not(:last-child) .evo-input__icon{margin-right:8px}.evo-input__additional+.evo-input__loading-spinner{margin-left:0}.evo-input__loading-spinner{flex:0 0 24px;width:24px;height:24px;margin:0 8px;--evo-circular-loader-color: #91B1B8}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [COMPOSITION_BUFFER_MODE]
                }] }, { type: i0.Injector }]; }, propDecorators: { autoFocus: [{
                type: Input
            }], dataCp: [{
                type: Input,
                args: ['data-cp']
            }], icon: [{
                type: Input
            }], mask: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], tooltip: [{
                type: Input
            }], type: [{
                type: Input
            }], disabled: [{
                type: Input
            }], loading: [{
                type: Input
            }], prefix: [{
                type: Input
            }], autocomplete: [{
                type: Input
            }], inputDebounce: [{
                type: Input
            }], unmask: [{
                type: Input
            }], clearable: [{
                type: Input
            }], maskValidation: [{
                type: Input
            }], blur: [{
                type: Output
            }], inputElement: [{
                type: ViewChild,
                args: ['input', { static: true }]
            }], tooltipElement: [{
                type: ViewChild,
                args: ['tooltipContainer', { static: true }]
            }], setValue: [{
                type: Input,
                args: ['value']
            }], setSize: [{
                type: Input,
                args: ['size']
            }], setTheme: [{
                type: Input,
                args: ['theme']
            }] } });
//# sourceMappingURL=data:application/json;base64, 