@pepperi-addons/ngx-lib 0.4.1-beta.54 → 0.4.1-beta.56

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

@@ -25,687 +25,693 @@ import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i2 from '@ngx-translate/core';
 
-class PepTextboxValidationDirective {
-    constructor(hostElement, utilitiesService, validatorService) {
-        this.hostElement = hostElement;
-        this.utilitiesService = utilitiesService;
-        this.validatorService = validatorService;
-        this.type = 'text';
-        this.previousValue = '';
-    }
-    ngOnInit() {
-        //
-    }
-    isNumber() {
-        return this.isInteger() || this.isDecimal();
-    }
-    isInteger() {
-        return this.type === 'int';
-    }
-    isDecimal() {
-        return (this.type === 'currency' ||
-            this.type === 'percentage' ||
-            this.type === 'real');
-    }
-    isPhone() {
-        return this.type === 'phone';
-    }
-    isText() {
-        return (this.type === 'email' ||
-            this.type === 'link' ||
-            this.type === 'text');
-    }
-    onChange(e) {
-        this.validateValue(this.hostElement.nativeElement.value);
-    }
-    onKeyDown(e) {
-        const originalValue = e.target['value'];
-        if (this.isNumber()) {
-            // save value before keydown event
-            this.previousValue = originalValue;
-            const isNumber = this.validatorService.isNumber(e, this.isDecimal());
-            if (isNumber)
-                return;
-            else
-                e.preventDefault();
-        }
-        else if (this.isPhone()) {
-            const isPhone = this.validatorService.isPhone(e);
-            if (isPhone)
-                return;
-            else
-                e.preventDefault();
-        }
-    }
-    validateValue(value) {
-        console.log(`validateValue start value is - ${value}`);
-        if (this.isNumber()) {
-            const newValue = this.validatorService.validateNumber(value, this.isDecimal());
-            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
-            // phone is invalid, replace it with the previousValue
-            const valid = this.validatorService.validatePhone(value);
-            this.hostElement.nativeElement['value'] = valid
-                ? value
-                : this.previousValue;
-        }
-        else if (this.isText()) {
-            this.hostElement.nativeElement['value'] = value;
-        }
-    }
-}
-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.PepUtilitiesService }, { type: i1.PepValidatorService }]; }, propDecorators: { type: [{
-                type: Input
-            }], onChange: [{
-                type: HostListener,
-                args: ['change', ['$event']]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
+class PepTextboxValidationDirective {
+    constructor(hostElement, utilitiesService, validatorService) {
+        this.hostElement = hostElement;
+        this.utilitiesService = utilitiesService;
+        this.validatorService = validatorService;
+        this.type = 'text';
+        this.previousValue = '';
+    }
+    ngOnInit() {
+        //
+    }
+    isNumber() {
+        return this.isInteger() || this.isDecimal();
+    }
+    isInteger() {
+        return this.type === 'int';
+    }
+    isDecimal() {
+        return (this.type === 'currency' ||
+            this.type === 'percentage' ||
+            this.type === 'real');
+    }
+    isPhone() {
+        return this.type === 'phone';
+    }
+    isText() {
+        return (this.type === 'email' ||
+            this.type === 'link' ||
+            this.type === 'text');
+    }
+    onChange(e) {
+        this.validateValue(this.hostElement.nativeElement.value);
+    }
+    onKeyDown(e) {
+        const originalValue = e.target['value'];
+        if (this.isNumber()) {
+            // save value before keydown event
+            this.previousValue = originalValue;
+            const isNumber = this.validatorService.isNumber(e, this.isDecimal());
+            if (isNumber)
+                return;
+            else
+                e.preventDefault();
+        }
+        else if (this.isPhone()) {
+            const isPhone = this.validatorService.isPhone(e);
+            if (isPhone)
+                return;
+            else
+                e.preventDefault();
+        }
+    }
+    validateValue(value) {
+        console.log(`validateValue start value is - ${value}`);
+        if (this.isNumber()) {
+            const newValue = this.validatorService.validateNumber(value, this.isDecimal());
+            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
+            // phone is invalid, replace it with the previousValue
+            const valid = this.validatorService.validatePhone(value);
+            this.hostElement.nativeElement['value'] = valid
+                ? value
+                : this.previousValue;
+        }
+        else if (this.isText()) {
+            this.hostElement.nativeElement['value'] = value;
+        }
+    }
+}
+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.PepUtilitiesService }, { type: i1.PepValidatorService }]; }, propDecorators: { type: [{
+                type: Input
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
-// 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
- *
- * @export
- * @class PepTextboxComponent
- * @implements {OnChanges}
- * @implements {OnInit}
- * @implements {OnDestroy}
- */
-class PepTextboxComponent {
-    constructor(customizationService, renderer, element, translate, utilitiesService) {
-        this.customizationService = customizationService;
-        this.renderer = renderer;
-        this.element = element;
-        this.translate = translate;
-        this.utilitiesService = utilitiesService;
-        this.dataQa = '';
-        this._key = '';
-        this._value = '';
-        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;
-        /**
-         * The accessory sign.
-         *
-         * @memberof PepTextboxComponent
-         */
-        this.accessory = '';
-        /**
-         * The title of the textbox.
-         *
-         * @memberof PepTextboxComponent
-         */
-        this.label = '';
-        /**
-         * The placeholder (relevant only for children - if parent isn't null).
-         *
-         * @memberof PepTextboxComponent
-         */
-        this.placeholder = '';
-        /**
-         * The type of the textbox.
-         *
-         * @type {PepTextboxFieldType}
-         * @memberof PepTextboxComponent
-         */
-        this._type = 'text';
-        /**
-         * If the textbox is mandatory
-         *
-         * @memberof PepTextboxComponent
-         */
-        this._mandatory = false;
-        // TODO: Check if should remove disabled and keep only readonly.
-        /**
-         * If the textbox is disabled.
-         *
-         * @memberof PepTextboxComponent
-         */
-        this.disabled = false;
-        /**
-         * If the textbox is readonly
-         *
-         * @memberof PepTextboxComponent
-         */
-        this.readonly = false;
-        this.textColor = '';
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.rowSpan = 1;
-        // @Input() lastFocusField: any;
-        this.minValue = NaN;
-        this.maxValue = NaN;
-        this._visible = true;
-        this.form = null;
-        this.isActive = false;
-        this.showTitle = true;
-        this.renderTitle = true;
-        this.renderError = true;
-        this.renderSymbol = true;
-        this.layoutType = 'form';
-        this.parentFieldKey = null;
-        this.regex = null;
-        this.regexError = '';
-        /**
-         * The value change event.
-         *
-         * @type {EventEmitter<string>}
-         * @memberof PepTextboxComponent
-         */
-        this.valueChange = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this._calculateFormattedValue = true;
-        this.controlType = 'textbox';
-        this.standAlone = false;
-        this.isInEditMode = false;
-        this._isInFocus = false;
-        // matcher = new TextErrorStateMatcher();
-        // protected displayValue$: 
-        this._displayValueSubject = new BehaviorSubject('');
-        this.isInFocus = false;
-    }
-    /**
-     * The text box key
-     *
-     * @memberof PepTextboxComponent
-     */
-    set key(value) {
-        this._key = value;
-        this.dataQa = value;
-    }
-    get key() {
-        return this._key;
-    }
-    /**
-     * The value of the text box.
-     *
-     * @memberof PepTextboxComponent
-     */
-    set value(value) {
-        if (!value) {
-            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;
-    }
-    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);
-        // }
-        // return res;
-    }
-    set minFractionDigits(value) {
-        this._minFractionDigits = value;
-        this.setFormattedValue(this.value);
-        this.changeDisplayValue();
-    }
-    get minFractionDigits() {
-        return this._minFractionDigits;
-    }
-    set maxFractionDigits(value) {
-        this._maxFractionDigits = value;
-        this.setFormattedValue(this.value);
-        this.changeDisplayValue();
-    }
-    get maxFractionDigits() {
-        return this._maxFractionDigits;
-    }
-    set type(value) {
-        this._type = value;
-        if (this.value) {
-            this.setFormattedValue(this.value);
-            this.changeDisplayValue();
-        }
-    }
-    get type() {
-        return this._type;
-    }
-    set mandatory(value) {
-        this._mandatory = value;
-    }
-    get mandatory() {
-        return this._mandatory;
-    }
-    set visible(visible) {
-        this._visible = visible;
-        if (visible) {
-            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-        }
-        else {
-            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-        }
-    }
-    get visible() {
-        return this._visible;
-    }
-    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());
-    }
-    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);
-            }
-            else if (this.type === 'percentage') {
-                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);
-            }
-            else if (this.type === 'int') {
-                this.formattedValue = this.utilitiesService.formatNumber(value);
-            }
-            else if (this.type === 'duration') {
-                this.formattedValue = this.utilitiesService.formatDuration(value, { duration: 'seconds' });
-            }
-            else {
-                this.formattedValue = value;
-            }
-        }
-        else {
-            this.formattedValue = value;
-        }
-        // console.log(`setFormattedValue after - value is ${this.formattedValue}`);
-        this.updateFormFieldValue();
-    }
-    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);
-    }
-    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 : this.formattedValue;
-        }
-        else {
-            res = this.isInFocus ? this.value : this.formattedValue;
-        }
-        this.notifyDisplayValueChange(res);
-        // console.log('changeDisplayValue ' + res);
-    }
-    setDefaultForm() {
-        const pepField = new PepTextboxField({
-            key: this.key,
-            value: this.valueAsCurrentCulture,
-            mandatory: this.mandatory,
-            readonly: this.readonly,
-            disabled: this.disabled,
-            maxFieldCharacters: this.maxFieldCharacters,
-            type: this.type,
-            minValue: this.minValue,
-            maxValue: this.maxValue,
-            regex: this.regex
-        });
-        this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
-    }
-    ngOnInit() {
-        if (this.form === null) {
-            this.standAlone = true;
-            this.minValue =
-                isNaN(this.minValue) && !isNaN(this.maxValue)
-                    ? 0
-                    : this.minValue;
-            this.maxValue =
-                isNaN(this.maxValue) && !isNaN(this.minValue)
-                    ? 99999
-                    : this.maxValue;
-            this.setDefaultForm();
-            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-            if (!this.renderTitle) {
-                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'));
-        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 || this.regexError.length === 0)) {
-            this.translate.get('MESSAGES.ERROR_INVALID_PATTERN').subscribe(text => this.regexError = text);
-        }
-        this.updateFormFieldValue(true);
-    }
-    ngOnChanges(changes) {
-        if (this.standAlone) {
-            this.setDefaultForm();
-        }
-        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
-    }
-    ngOnDestroy() {
-        //
-    }
-    onFocus(event) {
-        this.isInFocus = true;
-        // select the value in focus (DI-18246 improvement)
-        setTimeout(() => {
-            if (this.isInFocus) {
-                const eventTarget = event.target || event.srcElement;
-                if (eventTarget) {
-                    eventTarget.select();
-                }
-            }
-        }, 0);
-    }
-    isDecimal() {
-        let res = false;
-        if (this.isNumberType()) {
-            if (this.type === 'currency' || this.type === 'real') {
-                res = true;
-            }
-        }
-        return res;
-    }
-    isNumberType() {
-        return (this.type === 'percentage' ||
-            this.type === 'int' ||
-            this.type === 'currency' ||
-            this.type === 'real');
-    }
-    isValueValid(value) {
-        let res = false;
-        if (this.isNumberType()) {
-            if (value === '') {
-                res = this.mandatory ? false : true;
-            }
-            else {
-                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 {
-            // TODO: Maybe need to check other types.
-            res = true;
-        }
-        return res;
-    }
-    isDifferentValue(value) {
-        let res = false;
-        if (this.isNumberType()) {
-            if ((this.value === '' || value === '')) {
-                res = true;
-            }
-            else {
-                res = this.utilitiesService.isEqualNumber(this.valueAsCurrentCulture, value) === false;
-            }
-        }
-        else {
-            res = true;
-        }
-        return res;
-    }
-    onChange(e) {
-        const value = e.target ? e.target.value : e;
-        // console.log(`onChange value is ${value}`);
-        this.valueChange.emit(value);
-    }
-    onBlur(e) {
-        const value = e.target ? e.target.value : e;
-        // 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;
-        if (currentValue.trim().length > 0) {
-            switch (this.type) {
-                case 'email':
-                    window.open('mailto:' + currentValue, 'email');
-                    break;
-                case 'phone':
-                    window.open('tel:' + currentValue, 'tel');
-                    break;
-                case 'link':
-                    window.open(currentValue);
-                    break;
-                default:
-                    break;
-            }
-        }
-    }
-    cardTemplateClicked(event) {
-        this.isInEditMode = true;
-        setTimeout(() => {
-            this.input.nativeElement.focus();
-        }, 0);
-    }
-}
-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", 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", 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            <!-- (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)\"\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=\"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)\"\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            <!-- (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)\"\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=\"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)\"\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']
-            }], key: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], minFractionDigits: [{
-                type: Input
-            }], maxFractionDigits: [{
-                type: Input
-            }], accessory: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], mandatory: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], maxFieldCharacters: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], xAlignment: [{
-                type: Input
-            }], rowSpan: [{
-                type: Input
-            }], minValue: [{
-                type: Input
-            }], maxValue: [{
-                type: Input
-            }], visible: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], isActive: [{
-                type: Input
-            }], showTitle: [{
-                type: Input
-            }], renderTitle: [{
-                type: Input
-            }], renderError: [{
-                type: Input
-            }], renderSymbol: [{
-                type: Input
-            }], layoutType: [{
-                type: Input
-            }], parentFieldKey: [{
-                type: Input
-            }], regex: [{
-                type: Input
-            }], regexError: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], formValidationChange: [{
-                type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }], isInFocus: [{
-                type: Input
+// 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
+ *
+ * @export
+ * @class PepTextboxComponent
+ * @implements {OnChanges}
+ * @implements {OnInit}
+ * @implements {OnDestroy}
+ */
+class PepTextboxComponent {
+    constructor(customizationService, renderer, element, translate, utilitiesService) {
+        this.customizationService = customizationService;
+        this.renderer = renderer;
+        this.element = element;
+        this.translate = translate;
+        this.utilitiesService = utilitiesService;
+        this.dataQa = '';
+        this._key = '';
+        this._value = '';
+        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;
+        /**
+         * The accessory sign.
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.accessory = '';
+        /**
+         * The title of the textbox.
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.label = '';
+        /**
+         * The placeholder (relevant only for children - if parent isn't null).
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.placeholder = '';
+        /**
+         * The type of the textbox.
+         *
+         * @type {PepTextboxFieldType}
+         * @memberof PepTextboxComponent
+         */
+        this._type = 'text';
+        /**
+         * If the textbox is mandatory
+         *
+         * @memberof PepTextboxComponent
+         */
+        this._mandatory = false;
+        // TODO: Check if should remove disabled and keep only readonly.
+        /**
+         * If the textbox is disabled.
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.disabled = false;
+        /**
+         * If the textbox is readonly
+         *
+         * @memberof PepTextboxComponent
+         */
+        this.readonly = false;
+        this.textColor = '';
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.rowSpan = 1;
+        // @Input() lastFocusField: any;
+        this.minValue = NaN;
+        this.maxValue = NaN;
+        this._visible = true;
+        this.form = null;
+        this.isActive = false;
+        this.showTitle = true;
+        this.renderTitle = true;
+        this.renderError = true;
+        this.renderSymbol = true;
+        this.layoutType = 'form';
+        this.parentFieldKey = null;
+        this.regex = null;
+        this.regexError = '';
+        /**
+         * The value change event.
+         *
+         * @type {EventEmitter<string>}
+         * @memberof PepTextboxComponent
+         */
+        this.valueChange = new EventEmitter();
+        this.formValidationChange = new EventEmitter();
+        this.keydown = new EventEmitter();
+        this._calculateFormattedValue = true;
+        this.controlType = 'textbox';
+        this.standAlone = false;
+        this.isInEditMode = false;
+        this._isInFocus = false;
+        // matcher = new TextErrorStateMatcher();
+        // protected displayValue$: 
+        this._displayValueSubject = new BehaviorSubject('');
+        this.isInFocus = false;
+    }
+    /**
+     * The text box key
+     *
+     * @memberof PepTextboxComponent
+     */
+    set key(value) {
+        this._key = value;
+        this.dataQa = value;
+    }
+    get key() {
+        return this._key;
+    }
+    /**
+     * The value of the text box.
+     *
+     * @memberof PepTextboxComponent
+     */
+    set value(value) {
+        if (!value) {
+            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;
+    }
+    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);
+        // }
+        // return res;
+    }
+    set minFractionDigits(value) {
+        this._minFractionDigits = value;
+        this.setFormattedValue(this.value);
+        this.changeDisplayValue();
+    }
+    get minFractionDigits() {
+        return this._minFractionDigits;
+    }
+    set maxFractionDigits(value) {
+        this._maxFractionDigits = value;
+        this.setFormattedValue(this.value);
+        this.changeDisplayValue();
+    }
+    get maxFractionDigits() {
+        return this._maxFractionDigits;
+    }
+    set type(value) {
+        this._type = value;
+        if (this.value) {
+            this.setFormattedValue(this.value);
+            this.changeDisplayValue();
+        }
+    }
+    get type() {
+        return this._type;
+    }
+    set mandatory(value) {
+        this._mandatory = value;
+    }
+    get mandatory() {
+        return this._mandatory;
+    }
+    set visible(visible) {
+        this._visible = visible;
+        if (visible) {
+            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+        }
+        else {
+            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    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());
+    }
+    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);
+            }
+            else if (this.type === 'percentage') {
+                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);
+            }
+            else if (this.type === 'int') {
+                this.formattedValue = this.utilitiesService.formatNumber(value);
+            }
+            else if (this.type === 'duration') {
+                this.formattedValue = this.utilitiesService.formatDuration(value, { duration: 'seconds' });
+            }
+            else {
+                this.formattedValue = value;
+            }
+        }
+        else {
+            this.formattedValue = value;
+        }
+        // console.log(`setFormattedValue after - value is ${this.formattedValue}`);
+        this.updateFormFieldValue();
+    }
+    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);
+    }
+    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 : this.formattedValue;
+        }
+        else {
+            res = this.isInFocus ? this.value : this.formattedValue;
+        }
+        this.notifyDisplayValueChange(res);
+        // console.log('changeDisplayValue ' + res);
+    }
+    setDefaultForm() {
+        const pepField = new PepTextboxField({
+            key: this.key,
+            value: this.valueAsCurrentCulture,
+            mandatory: this.mandatory,
+            readonly: this.readonly,
+            disabled: this.disabled,
+            maxFieldCharacters: this.maxFieldCharacters,
+            type: this.type,
+            minValue: this.minValue,
+            maxValue: this.maxValue,
+            regex: this.regex
+        });
+        this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
+    }
+    ngOnInit() {
+        if (this.form === null) {
+            this.standAlone = true;
+            this.minValue =
+                isNaN(this.minValue) && !isNaN(this.maxValue)
+                    ? 0
+                    : this.minValue;
+            this.maxValue =
+                isNaN(this.maxValue) && !isNaN(this.minValue)
+                    ? 99999
+                    : this.maxValue;
+            this.setDefaultForm();
+            this.renderer.addClass(this.element.nativeElement, PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            if (!this.renderTitle) {
+                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'));
+        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 || this.regexError.length === 0)) {
+            this.translate.get('MESSAGES.ERROR_INVALID_PATTERN').subscribe(text => this.regexError = text);
+        }
+        this.updateFormFieldValue(true);
+    }
+    ngOnChanges(changes) {
+        if (this.standAlone) {
+            this.setDefaultForm();
+        }
+        this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
+    }
+    ngOnDestroy() {
+        //
+    }
+    onFocus(event) {
+        this.isInFocus = true;
+        // select the value in focus (DI-18246 improvement)
+        setTimeout(() => {
+            if (this.isInFocus) {
+                const eventTarget = event.target || event.srcElement;
+                if (eventTarget) {
+                    eventTarget.select();
+                }
+            }
+        }, 0);
+    }
+    isDecimal() {
+        let res = false;
+        if (this.isNumberType()) {
+            if (this.type === 'currency' || this.type === 'real') {
+                res = true;
+            }
+        }
+        return res;
+    }
+    isNumberType() {
+        return (this.type === 'percentage' ||
+            this.type === 'int' ||
+            this.type === 'currency' ||
+            this.type === 'real');
+    }
+    isValueValid(value) {
+        let res = false;
+        if (this.isNumberType()) {
+            if (value === '') {
+                res = this.mandatory ? false : true;
+            }
+            else {
+                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 {
+            // TODO: Maybe need to check other types.
+            res = true;
+        }
+        return res;
+    }
+    isDifferentValue(value) {
+        let res = false;
+        if (this.isNumberType()) {
+            if ((this.value === '' || value === '')) {
+                res = true;
+            }
+            else {
+                res = this.utilitiesService.isEqualNumber(this.valueAsCurrentCulture, value) === false;
+            }
+        }
+        else {
+            res = true;
+        }
+        return res;
+    }
+    onChange(e) {
+        const value = e.target ? e.target.value : e;
+        // console.log(`onChange value is ${value}`);
+        this.valueChange.emit(value);
+    }
+    onKeydown(event) {
+        this.keydown.emit(event);
+    }
+    onBlur(e) {
+        const value = e.target ? e.target.value : e;
+        // 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;
+        if (currentValue.trim().length > 0) {
+            switch (this.type) {
+                case 'email':
+                    window.open('mailto:' + currentValue, 'email');
+                    break;
+                case 'phone':
+                    window.open('tel:' + currentValue, 'tel');
+                    break;
+                case 'link':
+                    window.open(currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    cardTemplateClicked(event) {
+        this.isInEditMode = true;
+        setTimeout(() => {
+            this.input.nativeElement.focus();
+        }, 0);
+    }
+}
+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", 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", formValidationChange: "formValidationChange", keydown: "keydown" }, 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)\" (keydown)=\"onKeydown($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=\"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)\" (keydown)=\"onKeydown($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            <!-- (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)\" (keydown)=\"onKeydown($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=\"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)\" (keydown)=\"onKeydown($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']
+            }], key: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], minFractionDigits: [{
+                type: Input
+            }], maxFractionDigits: [{
+                type: Input
+            }], accessory: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], mandatory: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], maxFieldCharacters: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], renderTitle: [{
+                type: Input
+            }], renderError: [{
+                type: Input
+            }], renderSymbol: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], parentFieldKey: [{
+                type: Input
+            }], regex: [{
+                type: Input
+            }], regexError: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], keydown: [{
+                type: Output
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], isInFocus: [{
+                type: Input
             }] } });
 
-class PepTextboxModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);
-    }
-}
-PepTextboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepTextboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, declarations: [PepTextboxComponent, PepTextboxValidationDirective], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule,
-        PepFieldTitleModule,
-        PepTextboxIconModule], exports: [PepTextboxComponent] });
-PepTextboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule,
-        PepFieldTitleModule,
-        PepTextboxIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        // Material modules,
-                        MatCommonModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepIconModule,
-                        PepFieldTitleModule,
-                        PepTextboxIconModule,
-                    ],
-                    exports: [PepTextboxComponent],
-                    declarations: [PepTextboxComponent, PepTextboxValidationDirective],
-                }]
+class PepTextboxModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([pepIconSystemEdit]);
+    }
+}
+PepTextboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepTextboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, declarations: [PepTextboxComponent, PepTextboxValidationDirective], imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepTextboxIconModule], exports: [PepTextboxComponent] });
+PepTextboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule,
+        PepFieldTitleModule,
+        PepTextboxIconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepIconModule,
+                        PepFieldTitleModule,
+                        PepTextboxIconModule,
+                    ],
+                    exports: [PepTextboxComponent],
+                    declarations: [PepTextboxComponent, PepTextboxValidationDirective],
+                }]
         }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-lib/textbox
+/*
+ * Public API Surface of ngx-lib/textbox
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepTextboxComponent, PepTextboxModule };