@pepperi-addons/ngx-lib 0.4.1-yaron.1 → 0.4.2-beta.2

package/fesm2020/pepperi-addons-ngx-lib-textbox.mjs

@@ -3,7 +3,7 @@ import { Directive, Input, HostListener, EventEmitter, Component, ChangeDetectio
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@angular/forms';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatCommonModule } from '@angular/material/core';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -21,11 +21,14 @@ import * as i11 from '@pepperi-addons/ngx-lib/textbox-icon';
 import { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';
 import * as i10 from '@pepperi-addons/ngx-lib/field-title';
 import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
+import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@ngx-translate/core';
 
 class PepTextboxValidationDirective {
-    constructor(hostElement, validatorService) {
+    constructor(hostElement, utilitiesService, validatorService) {
         this.hostElement = hostElement;
+        this.utilitiesService = utilitiesService;
         this.validatorService = validatorService;
         this.type = 'text';
         this.previousValue = '';
@@ -75,9 +78,12 @@ class PepTextboxValidationDirective {
         }
     }
     validateValue(value) {
+        console.log(`validateValue start value is - ${value}`);
         if (this.isNumber()) {
             const newValue = this.validatorService.validateNumber(value, this.isDecimal());
-            this.hostElement.nativeElement['value'] = newValue ? newValue : 0;
+            console.log(`after validateNumber newValue is - ${newValue}`);
+            // Always set to the value input number with '.' decomal separator.
+            this.hostElement.nativeElement['value'] = newValue ? this.utilitiesService.changeDecimalSeparatorWhenItsComma(newValue) : 0;
         }
         else if (this.isPhone()) {
             // test phone with regular expression, when
@@ -92,14 +98,14 @@ class PepTextboxValidationDirective {
         }
     }
 }
-PepTextboxValidationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxValidationDirective, deps: [{ token: i0.ElementRef }, { token: i1.PepValidatorService }], target: i0.ɵɵFactoryTarget.Directive });
+PepTextboxValidationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxValidationDirective, deps: [{ token: i0.ElementRef }, { token: i1.PepUtilitiesService }, { token: i1.PepValidatorService }], target: i0.ɵɵFactoryTarget.Directive });
 PepTextboxValidationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxValidationDirective, selector: "[pepTextboxValidation]", inputs: { type: "type" }, host: { listeners: { "change": "onChange($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxValidationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[pepTextboxValidation]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepValidatorService }]; }, propDecorators: { type: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepUtilitiesService }, { type: i1.PepValidatorService }]; }, propDecorators: { type: [{
                 type: Input
             }], onChange: [{
                 type: HostListener,
@@ -109,13 +115,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-/** error when invalid control is dirty or touched */
-class TextErrorStateMatcher {
-    isErrorState(control, form) {
-        const validateOnDirty = form?.form?.controls?.['validateOnDirty']?.value;
-        return !!(validateOnDirty && control && control.invalid && (control.dirty || control.touched));
-    }
-}
+// Not in use - I don't know why we need this???
+// /** error when invalid control is dirty or touched */
+// export class TextErrorStateMatcher implements ErrorStateMatcher {
+//     isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+//         const validateOnDirty = form?.form?.controls?.['validateOnDirty']?.value;
+//         return !!(validateOnDirty && control && control.invalid && (control.dirty || control.touched));
+//     }
+// }
 /**
  * This is a text box input component that can be use to
  *
@@ -135,7 +142,27 @@ class PepTextboxComponent {
         this.dataQa = '';
         this._key = '';
         this._value = '';
-        this._formattedValue = '';
+        this.formattedValue = '';
+        // private _formattedValue = '';
+        // /**
+        //  * The formatted value.
+        //  *
+        //  * @memberof PepTextboxComponent
+        //  */
+        // @Input()
+        // set formattedValue(value: string) {
+        //     // Do nothing.
+        //     // if (!value) {
+        //     //     value = '';
+        //     // }
+        //     // if (this._calculateFormattedValue) {
+        //     //     this._calculateFormattedValue = false;
+        //     // }
+        //     // this.setFormattedValue(value);
+        // }
+        // get formattedValue(): string {
+        //     return this._formattedValue;
+        // }
         this._minFractionDigits = NaN;
         this._maxFractionDigits = NaN;
         /**
@@ -163,12 +190,13 @@ class PepTextboxComponent {
          * @memberof PepTextboxComponent
          */
         this._type = 'text';
+        this.inputMode = 'text';
         /**
          * If the textbox is mandatory
          *
          * @memberof PepTextboxComponent
          */
-        this.mandatory = false;
+        this._mandatory = false;
         // TODO: Check if should remove disabled and keep only readonly.
         /**
          * If the textbox is disabled.
@@ -197,6 +225,7 @@ class PepTextboxComponent {
         this.renderSymbol = true;
         this.layoutType = 'form';
         this.parentFieldKey = null;
+        this.regex = null;
         this.regexError = '';
         /**
          * The value change event.
@@ -205,12 +234,17 @@ class PepTextboxComponent {
          * @memberof PepTextboxComponent
          */
         this.valueChange = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
+        // @Output()
+        // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+        this.keyup = new EventEmitter();
         this._calculateFormattedValue = true;
         this.controlType = 'textbox';
         this.standAlone = false;
         this.isInEditMode = false;
-        this.matcher = new TextErrorStateMatcher();
+        this._isInFocus = false;
+        // matcher = new TextErrorStateMatcher();
+        // protected displayValue$: 
+        this._displayValueSubject = new BehaviorSubject('');
         this.isInFocus = false;
     }
     /**
@@ -234,33 +268,28 @@ class PepTextboxComponent {
         if (!value) {
             value = '';
         }
-        this._value = value;
-        this.setFormattedValue(value);
+        if (this.isDifferentValue(value)) {
+            // console.log(`set value, value is - ${value}`)
+            this._value = value;
+        }
+        this.setFormattedValue(this.value);
+        this.changeDisplayValue();
     }
     get value() {
         return this._value;
     }
-    /**
-     * The formatted value.
-     *
-     * @memberof PepTextboxComponent
-     */
-    set formattedValue(value) {
-        // Do nothing.
-        // if (!value) {
-        //     value = '';
+    get valueAsCurrentCulture() {
+        return this.utilitiesService.changeDecimalSeparatorWhenItsComma(this.value, true);
+        // let res = this.value;
+        // if (this.isDecimal()) {
+        //     res = this.utilitiesService.formatDecimal(this.value, this.minFractionDigits, this.maxFractionDigits, false);
         // }
-        // if (this._calculateFormattedValue) {
-        //     this._calculateFormattedValue = false;
-        // }
-        // this.setFormattedValue(value);
-    }
-    get formattedValue() {
-        return this._formattedValue;
+        // return res;
     }
     set minFractionDigits(value) {
         this._minFractionDigits = value;
         this.setFormattedValue(this.value);
+        this.changeDisplayValue();
     }
     get minFractionDigits() {
         return this._minFractionDigits;
@@ -268,6 +297,7 @@ class PepTextboxComponent {
     set maxFractionDigits(value) {
         this._maxFractionDigits = value;
         this.setFormattedValue(this.value);
+        this.changeDisplayValue();
     }
     get maxFractionDigits() {
         return this._maxFractionDigits;
@@ -276,11 +306,19 @@ class PepTextboxComponent {
         this._type = value;
         if (this.value) {
             this.setFormattedValue(this.value);
+            this.changeDisplayValue();
+            this.setInputModeAttribute();
         }
     }
     get type() {
         return this._type;
     }
+    set mandatory(value) {
+        this._mandatory = value;
+    }
+    get mandatory() {
+        return this._mandatory;
+    }
     set visible(visible) {
         this._visible = visible;
         if (visible) {
@@ -296,52 +334,97 @@ class PepTextboxComponent {
     get calculateFormattedValue() {
         return this._calculateFormattedValue;
     }
+    set isInFocus(isInFocus) {
+        this._isInFocus = isInFocus;
+        this.setFormattedValue(this.value);
+        this.changeDisplayValue();
+    }
+    get isInFocus() {
+        return this._isInFocus;
+    }
+    get displayValue$() {
+        return this._displayValueSubject.asObservable().pipe(distinctUntilChanged());
+    }
+    setInputModeAttribute() {
+        if (this.type === 'currency' || this.type === 'percentage' || this.type === 'real') {
+            this.inputMode = 'decimal';
+        }
+        else if (this.type === 'int') {
+            this.inputMode = 'numeric';
+        }
+        else if (this.type === 'phone') {
+            this.inputMode = 'tel';
+        }
+        else if (this.type === 'email') {
+            this.inputMode = 'email';
+        }
+        else {
+            this.inputMode = 'text';
+        }
+        if (this.input) {
+            this.renderer.setAttribute(this.input.nativeElement, 'inputmode', this.inputMode);
+        }
+    }
+    notifyDisplayValueChange(value) {
+        this._displayValueSubject.next(value);
+    }
     setFormattedValue(value) {
+        if (this.isInFocus) {
+            return;
+        }
         if (this._calculateFormattedValue) {
+            // console.log(`setFormattedValue before - value is ${value}`);
             if (this.type === 'currency') {
-                this._formattedValue = this.utilitiesService.formatCurrency(value, this.accessory, this.minFractionDigits, this.maxFractionDigits);
+                this.formattedValue = this.utilitiesService.formatCurrency(value, this.accessory, this.minFractionDigits, this.maxFractionDigits);
             }
             else if (this.type === 'percentage') {
-                this._formattedValue = this.utilitiesService.formatPercent(value, this.minFractionDigits, this.maxFractionDigits);
+                this.formattedValue = this.utilitiesService.formatPercent(value, this.minFractionDigits, this.maxFractionDigits);
             }
             else if (this.type === 'real') {
-                this._formattedValue = this.utilitiesService.formatDecimal(value, this.minFractionDigits, this.maxFractionDigits);
+                this.formattedValue = this.utilitiesService.formatDecimal(value, this.minFractionDigits, this.maxFractionDigits);
             }
             else if (this.type === 'int') {
-                this._formattedValue = this.utilitiesService.formatNumber(value);
+                this.formattedValue = this.utilitiesService.formatNumber(value);
             }
             else if (this.type === 'duration') {
-                this._formattedValue = this.utilitiesService.formatDuration(value, { duration: 'seconds' });
+                this.formattedValue = this.utilitiesService.formatDuration(value, { duration: 'seconds' });
             }
             else {
-                this._formattedValue = value;
+                this.formattedValue = value;
             }
         }
         else {
-            this._formattedValue = value;
+            this.formattedValue = value;
         }
+        // console.log(`setFormattedValue after - value is ${this.formattedValue}`);
         this.updateFormFieldValue();
     }
-    updateFormFieldValue() {
-        this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue, this.parentFieldKey);
+    updateFormFieldValue(firstLoad = false) {
+        // Set the formatted value only for the first load cause it's not formatted if we set the value (I don't know why)
+        // Else we set the value - this is important to set the value only cause setting the formatted value will cause bug when the number is with thousand separator
+        this.customizationService.updateFormFieldValue(this.form, this.key, firstLoad ? this.formattedValue : this.value, this.parentFieldKey);
     }
-    get displayValue() {
+    changeDisplayValue() {
         let res = '';
         if (this.type == 'link') {
             res = this.formattedValue;
         }
+        else if (this.isDecimal()) {
+            res = this.isInFocus ? this.valueAsCurrentCulture : this.formattedValue;
+        }
         else if (this.isNumberType()) {
-            res = this.isInFocus ? (this.value.length > 0 ? this.utilitiesService.formatDecimal(this.value, this.minFractionDigits, this.maxFractionDigits) : '') : this.formattedValue;
+            res = this.isInFocus ? this.value : this.formattedValue;
         }
         else {
             res = this.isInFocus ? this.value : this.formattedValue;
         }
-        return res;
+        this.notifyDisplayValueChange(res);
+        // console.log('changeDisplayValue ' + res);
     }
     setDefaultForm() {
         const pepField = new PepTextboxField({
             key: this.key,
-            value: this.value,
+            value: this.valueAsCurrentCulture,
             mandatory: this.mandatory,
             readonly: this.readonly,
             disabled: this.disabled,
@@ -370,14 +453,17 @@ class PepTextboxComponent {
                 this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
             }
         }
-        //flag to indicate whether validation on dirty is required        
-        this.form.addControl('validateOnDirty', new FormControl(this.type === 'text'));
+        // flag to indicate whether validation on dirty is required        
+        // this.form.addControl('validateOnDirty', new FormControl(this.type === 'text'));
         this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
-        //load default error text
-        if (this.type === 'text' && this.regex && !this.regexError) {
+        // load default error text
+        if (this.type === 'text' && this.regex && (!this.regexError || this.regexError.length === 0)) {
             this.translate.get('MESSAGES.ERROR_INVALID_PATTERN').subscribe(text => this.regexError = text);
         }
-        this.updateFormFieldValue();
+        this.updateFormFieldValue(true);
+    }
+    ngAfterViewInit() {
+        this.setInputModeAttribute();
     }
     ngOnChanges(changes) {
         if (this.standAlone) {
@@ -392,9 +478,11 @@ class PepTextboxComponent {
         this.isInFocus = true;
         // select the value in focus (DI-18246 improvement)
         setTimeout(() => {
-            const eventTarget = event.target || event.srcElement;
-            if (eventTarget) {
-                eventTarget.select();
+            if (this.isInFocus) {
+                const eventTarget = event.target || event.srcElement;
+                if (eventTarget) {
+                    eventTarget.select();
+                }
             }
         }, 0);
     }
@@ -420,10 +508,20 @@ class PepTextboxComponent {
                 res = this.mandatory ? false : true;
             }
             else {
-                const numberValue = this.utilitiesService.coerceNumberProperty(value);
-                res =
-                    numberValue >= this.minValue &&
-                        numberValue <= this.maxValue;
+                value = this.utilitiesService.changeDecimalSeparatorWhenItsComma(value);
+                const numberValue = coerceNumberProperty(value);
+                if (!isNaN(this.minValue) && !isNaN(this.maxValue)) {
+                    res = numberValue >= this.minValue && numberValue <= this.maxValue;
+                }
+                else if (!isNaN(this.minValue)) {
+                    res = numberValue >= this.minValue;
+                }
+                else if (!isNaN(this.maxValue)) {
+                    res = numberValue <= this.maxValue;
+                }
+                else {
+                    res = true;
+                }
             }
         }
         else {
@@ -435,13 +533,11 @@ class PepTextboxComponent {
     isDifferentValue(value) {
         let res = false;
         if (this.isNumberType()) {
-            if (this.value === '' || value === '') {
+            if ((this.value === '' || value === '')) {
                 res = true;
             }
             else {
-                const currentValue = this.utilitiesService.coerceNumberProperty(this.value);
-                const newValue = this.utilitiesService.coerceNumberProperty(value);
-                res = currentValue !== newValue;
+                res = this.utilitiesService.isEqualNumber(this.valueAsCurrentCulture, value) === false;
             }
         }
         else {
@@ -451,28 +547,30 @@ class PepTextboxComponent {
     }
     onChange(e) {
         const value = e.target ? e.target.value : e;
+        // console.log(`onChange value is ${value}`);
         this.valueChange.emit(value);
     }
+    onKeyup(event) {
+        this.keyup.emit(event);
+    }
     onBlur(e) {
-        this.isInFocus = false;
         const value = e.target ? e.target.value : e;
-        if (value !== this.value && this.isDifferentValue(value)) {
-            // If renderError is false and the new value is not valid.
-            if (!this.renderError && !this.isValueValid(value)) {
-                this.renderer.setProperty(this.input.nativeElement, 'value', this.value);
-            }
-            else {
-                this.value = value;
-                // // If the user is setting the formatted value then set the value till the user format it and return it back.
-                // if (!this._calculateFormattedValue) {
-                //     this._formattedValue = value;
-                // }
-                this.valueChange.emit(value);
+        // If renderError is false and the new value is not valid.
+        if (!this.renderError && !this.isValueValid(value)) {
+            this.renderer.setProperty(this.input.nativeElement, 'value', this.valueAsCurrentCulture);
+        }
+        else {
+            // For decimal we need to replace the decimal separator back if it's comma (',').
+            const correctValue = this.isDecimal() ? this.utilitiesService.changeDecimalSeparatorWhenItsComma(value) : value;
+            if (correctValue !== this.valueAsCurrentCulture && this.isDifferentValue(value)) {
+                this.value = correctValue;
+                this.valueChange.emit(this.value);
             }
         }
         if (this.isInEditMode) {
             this.isInEditMode = false;
         }
+        this.isInFocus = false;
     }
     anchorClicked() {
         const currentValue = this.value;
@@ -500,10 +598,10 @@ class PepTextboxComponent {
     }
 }
 PepTextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxComponent, deps: [{ token: i1.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TranslateService }, { token: i1.PepUtilitiesService }], target: i0.ɵɵFactoryTarget.Component });
-PepTextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxComponent, selector: "pep-textbox", inputs: { key: "key", value: "value", formattedValue: "formattedValue", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", accessory: "accessory", label: "label", placeholder: "placeholder", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", hint: "hint", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", minValue: "minValue", maxValue: "maxValue", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType", parentFieldKey: "parentFieldKey", regex: "regex", regexError: "regexError" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [errorStateMatcher]=\"matcher\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"form.get(key).errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "directive", type: PepTextboxValidationDirective, selector: "[pepTextboxValidation]", inputs: ["type"] }, { kind: "pipe", type: i1.PepToNumberPipe, name: "pepToNumber" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepTextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxComponent, selector: "pep-textbox", inputs: { key: "key", value: "value", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", accessory: "accessory", label: "label", placeholder: "placeholder", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", hint: "hint", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", minValue: "minValue", maxValue: "maxValue", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType", parentFieldKey: "parentFieldKey", regex: "regex", regexError: "regexError", isInFocus: "isInFocus" }, outputs: { valueChange: "valueChange", keyup: "keyup" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "directive", type: PepTextboxValidationDirective, selector: "[pepTextboxValidation]", inputs: ["type"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.PepToNumberPipe, name: "pepToNumber" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-textbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [errorStateMatcher]=\"matcher\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"form.get(key).errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"] }]
+            args: [{ selector: 'pep-textbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PepCustomizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.TranslateService }, { type: i1.PepUtilitiesService }]; }, propDecorators: { dataQa: [{
                 type: HostBinding,
                 args: ['attr.data-qa']
@@ -511,8 +609,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], value: [{
                 type: Input
-            }], formattedValue: [{
-                type: Input
             }], minFractionDigits: [{
                 type: Input
             }], maxFractionDigits: [{
@@ -569,11 +665,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
-            }], formValidationChange: [{
+            }], keyup: [{
                 type: Output
             }], input: [{
                 type: ViewChild,
                 args: ['input']
+            }], isInFocus: [{
+                type: Input
             }] } });
 
 class PepTextboxModule {
@@ -640,5 +738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PepTextboxComponent, PepTextboxModule, TextErrorStateMatcher };
+export { PepTextboxComponent, PepTextboxModule };
 //# sourceMappingURL=pepperi-addons-ngx-lib-textbox.mjs.map