@pepperi-addons/ngx-lib 0.3.15-beta.60 → 0.3.15-beta.61

package/bundles/pepperi-addons-ngx-lib-textbox.umd.js

@@ -4,567 +4,567 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].textbox = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.icon, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['textbox-icon'], global['pepperi-addons']['ngx-lib']['field-title'], global.translate));
 }(this, (function (exports, core, common, forms, core$2, button, formField, input, icon$1, ngxLib, icon, textboxIcon, fieldTitle, core$1) { 'use strict';
 
-    /**
-     * This is a text box input component that can be use to
-     *
-     * @export
-     * @class PepTextboxComponent
-     * @implements {OnChanges}
-     * @implements {OnInit}
-     * @implements {OnDestroy}
-     */
-    var PepTextboxComponent = /** @class */ (function () {
-        function PepTextboxComponent(fb, customizationService, renderer, element, translate, utilitiesService) {
-            this.fb = fb;
-            this.customizationService = customizationService;
-            this.renderer = renderer;
-            this.element = element;
-            this.translate = translate;
-            this.utilitiesService = utilitiesService;
-            this.dataQa = '';
-            this._key = '';
-            this._value = '';
-            this._formattedValue = '';
-            /**
-             * 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 = ngxLib.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;
-            /**
-             * The value change event.
-             *
-             * @type {EventEmitter<string>}
-             * @memberof PepTextboxComponent
-             */
-            this.valueChange = new core.EventEmitter();
-            this.formValidationChange = new core.EventEmitter();
-            this._calculateFormattedValue = true;
-            this.controlType = 'textbox';
-            this.standAlone = false;
-            this.isInEditMode = false;
-            this.isInFocus = false;
-        }
-        Object.defineProperty(PepTextboxComponent.prototype, "key", {
-            get: function () {
-                return this._key;
-            },
-            /**
-             * The text box key
-             *
-             * @memberof PepTextboxComponent
-             */
-            set: function (value) {
-                this._key = value;
-                this.dataQa = value;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTextboxComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            /**
-             * The value of the text box.
-             *
-             * @memberof PepTextboxComponent
-             */
-            set: function (value) {
-                if (!value) {
-                    value = '';
-                }
-                this._value = value;
-                this.setFormattedValue(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTextboxComponent.prototype, "formattedValue", {
-            get: function () {
-                return this._formattedValue;
-            },
-            /**
-             * The formatted value.
-             *
-             * @memberof PepTextboxComponent
-             */
-            set: function (value) {
-                // Do nothing.
-                // if (!value) {
-                //     value = '';
-                // }
-                // if (this._calculateFormattedValue) {
-                //     this._calculateFormattedValue = false;
-                // }
-                // this.setFormattedValue(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTextboxComponent.prototype, "type", {
-            get: function () {
-                return this._type;
-            },
-            set: function (value) {
-                this._type = value;
-                if (this.value) {
-                    this.setFormattedValue(this.value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTextboxComponent.prototype, "visible", {
-            get: function () {
-                return this._visible;
-            },
-            set: function (visible) {
-                this._visible = visible;
-                if (visible) {
-                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-                }
-                else {
-                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepTextboxComponent.prototype, "calculateFormattedValue", {
-            get: function () {
-                return this._calculateFormattedValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepTextboxComponent.prototype.setFormattedValue = function (value) {
-            if (this._calculateFormattedValue) {
-                if (this.type === 'currency') {
-                    this._formattedValue = this.utilitiesService.formatCurrency(value, this.accessory);
-                }
-                else if (this.type === 'percentage') {
-                    this._formattedValue = this.utilitiesService.formatPercent(value);
-                }
-                else if (this.type === 'real') {
-                    this._formattedValue = this.utilitiesService.formatDecimal(value);
-                }
-                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;
-            }
-            this.updateFormFieldValue();
-        };
-        PepTextboxComponent.prototype.updateFormFieldValue = function () {
-            this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue, this.parentFieldKey);
-        };
-        Object.defineProperty(PepTextboxComponent.prototype, "displayValue", {
-            get: function () {
-                var res = '';
-                if (this.type == 'link') {
-                    res = this.formattedValue;
-                }
-                else if (this.isNumberType()) {
-                    res = this.isInFocus ? (this.value.length > 0 ? parseFloat(this.value).toString() : '') : this.formattedValue;
-                }
-                else {
-                    res = this.isInFocus ? this.value : this.formattedValue;
-                }
-                return res;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepTextboxComponent.prototype.setDefaultForm = function () {
-            var pepField = new ngxLib.PepTextboxField({
-                key: this.key,
-                value: this.value,
-                mandatory: this.mandatory,
-                readonly: this.readonly,
-                disabled: this.disabled,
-                maxFieldCharacters: this.maxFieldCharacters,
-                type: this.type,
-                minValue: this.minValue,
-                maxValue: this.maxValue,
-            });
-            this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
-        };
-        PepTextboxComponent.prototype.ngOnInit = function () {
-            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, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-                if (!this.renderTitle) {
-                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-                }
-            }
-            this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
-            this.updateFormFieldValue();
-        };
-        PepTextboxComponent.prototype.ngOnChanges = function (changes) {
-            if (this.standAlone) {
-                this.setDefaultForm();
-            }
-            this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
-        };
-        PepTextboxComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        PepTextboxComponent.prototype.onFocus = function (event) {
-            this.isInFocus = true;
-            // select the value in focus (DI-18246 improvement)
-            setTimeout(function () {
-                var eventTarget = event.target || event.srcElement;
-                if (eventTarget) {
-                    eventTarget.select();
-                }
-            }, 0);
-        };
-        PepTextboxComponent.prototype.isDecimal = function () {
-            var res = false;
-            if (this.isNumberType()) {
-                if (this.type === 'currency' || this.type === 'real') {
-                    res = true;
-                }
-            }
-            return res;
-        };
-        PepTextboxComponent.prototype.isNumberType = function () {
-            return (this.type === 'percentage' ||
-                this.type === 'int' ||
-                this.type === 'currency' ||
-                this.type === 'real');
-        };
-        PepTextboxComponent.prototype.isValueValid = function (value) {
-            var res = false;
-            if (this.isNumberType()) {
-                if (value === '') {
-                    res = this.mandatory ? false : true;
-                }
-                else {
-                    var numberValue = this.utilitiesService.coerceNumberProperty(value);
-                    res =
-                        numberValue >= this.minValue &&
-                            numberValue <= this.maxValue;
-                }
-            }
-            else {
-                // TODO: Maybe need to check other types.
-                res = true;
-            }
-            return res;
-        };
-        PepTextboxComponent.prototype.isDifferentValue = function (value) {
-            var res = false;
-            if (this.isNumberType()) {
-                if (this.value === '' || value === '') {
-                    res = true;
-                }
-                else {
-                    var currentValue = this.utilitiesService.coerceNumberProperty(this.value);
-                    var newValue = this.utilitiesService.coerceNumberProperty(value);
-                    res = currentValue !== newValue;
-                }
-            }
-            else {
-                res = true;
-            }
-            return res;
-        };
-        PepTextboxComponent.prototype.onChange = function (e) {
-            var value = e.target ? e.target.value : e;
-            this.valueChange.emit(value);
-        };
-        PepTextboxComponent.prototype.onBlur = function (e) {
-            this.isInFocus = false;
-            var value = e.target ? e.target.value : e;
-            if (value !== this.value && this.isDifferentValue(value)) {
-                // If renderError is false and the new value is not valid.
-                if (!this.renderError && !this.isValueValid(value)) {
-                    this.renderer.setProperty(this.input.nativeElement, 'value', this.value);
-                }
-                else {
-                    this.value = value;
-                    // // If the user is setting the formatted value then set the value till the user format it and return it back.
-                    // if (!this._calculateFormattedValue) {
-                    //     this._formattedValue = value;
-                    // }
-                    this.valueChange.emit(value);
-                }
-            }
-            if (this.isInEditMode) {
-                this.isInEditMode = false;
-            }
-        };
-        PepTextboxComponent.prototype.anchorClicked = function () {
-            var 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;
-                }
-            }
-        };
-        PepTextboxComponent.prototype.cardTemplateClicked = function (event) {
-            var _this = this;
-            this.isInEditMode = true;
-            setTimeout(function () {
-                _this.input.nativeElement.focus();
-            }, 0);
-        };
-        return PepTextboxComponent;
-    }());
-    PepTextboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-textbox',
-                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput 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 }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\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 #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            </mat-error>\n\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\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    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}", ""]
-                },] }
-    ];
-    PepTextboxComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: ngxLib.PepCustomizationService },
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: core$1.TranslateService },
-        { type: ngxLib.PepUtilitiesService }
-    ]; };
-    PepTextboxComponent.propDecorators = {
-        dataQa: [{ type: core.HostBinding, args: ['attr.data-qa',] }],
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        formattedValue: [{ type: core.Input }],
-        accessory: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        type: [{ type: core.Input }],
-        mandatory: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        maxFieldCharacters: [{ type: core.Input }],
-        hint: [{ type: core.Input }],
-        textColor: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ type: core.Input }],
-        minValue: [{ type: core.Input }],
-        maxValue: [{ type: core.Input }],
-        visible: [{ type: core.Input }],
-        form: [{ type: core.Input }],
-        isActive: [{ type: core.Input }],
-        showTitle: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        renderError: [{ type: core.Input }],
-        renderSymbol: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        parentFieldKey: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }],
-        formValidationChange: [{ type: core.Output }],
-        input: [{ type: core.ViewChild, args: ['input',] }]
+    /**
+     * This is a text box input component that can be use to
+     *
+     * @export
+     * @class PepTextboxComponent
+     * @implements {OnChanges}
+     * @implements {OnInit}
+     * @implements {OnDestroy}
+     */
+    var PepTextboxComponent = /** @class */ (function () {
+        function PepTextboxComponent(fb, customizationService, renderer, element, translate, utilitiesService) {
+            this.fb = fb;
+            this.customizationService = customizationService;
+            this.renderer = renderer;
+            this.element = element;
+            this.translate = translate;
+            this.utilitiesService = utilitiesService;
+            this.dataQa = '';
+            this._key = '';
+            this._value = '';
+            this._formattedValue = '';
+            /**
+             * 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 = ngxLib.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;
+            /**
+             * The value change event.
+             *
+             * @type {EventEmitter<string>}
+             * @memberof PepTextboxComponent
+             */
+            this.valueChange = new core.EventEmitter();
+            this.formValidationChange = new core.EventEmitter();
+            this._calculateFormattedValue = true;
+            this.controlType = 'textbox';
+            this.standAlone = false;
+            this.isInEditMode = false;
+            this.isInFocus = false;
+        }
+        Object.defineProperty(PepTextboxComponent.prototype, "key", {
+            get: function () {
+                return this._key;
+            },
+            /**
+             * The text box key
+             *
+             * @memberof PepTextboxComponent
+             */
+            set: function (value) {
+                this._key = value;
+                this.dataQa = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTextboxComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            /**
+             * The value of the text box.
+             *
+             * @memberof PepTextboxComponent
+             */
+            set: function (value) {
+                if (!value) {
+                    value = '';
+                }
+                this._value = value;
+                this.setFormattedValue(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTextboxComponent.prototype, "formattedValue", {
+            get: function () {
+                return this._formattedValue;
+            },
+            /**
+             * The formatted value.
+             *
+             * @memberof PepTextboxComponent
+             */
+            set: function (value) {
+                // Do nothing.
+                // if (!value) {
+                //     value = '';
+                // }
+                // if (this._calculateFormattedValue) {
+                //     this._calculateFormattedValue = false;
+                // }
+                // this.setFormattedValue(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTextboxComponent.prototype, "type", {
+            get: function () {
+                return this._type;
+            },
+            set: function (value) {
+                this._type = value;
+                if (this.value) {
+                    this.setFormattedValue(this.value);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTextboxComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (visible) {
+                this._visible = visible;
+                if (visible) {
+                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                }
+                else {
+                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepTextboxComponent.prototype, "calculateFormattedValue", {
+            get: function () {
+                return this._calculateFormattedValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepTextboxComponent.prototype.setFormattedValue = function (value) {
+            if (this._calculateFormattedValue) {
+                if (this.type === 'currency') {
+                    this._formattedValue = this.utilitiesService.formatCurrency(value, this.accessory);
+                }
+                else if (this.type === 'percentage') {
+                    this._formattedValue = this.utilitiesService.formatPercent(value);
+                }
+                else if (this.type === 'real') {
+                    this._formattedValue = this.utilitiesService.formatDecimal(value);
+                }
+                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;
+            }
+            this.updateFormFieldValue();
+        };
+        PepTextboxComponent.prototype.updateFormFieldValue = function () {
+            this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue, this.parentFieldKey);
+        };
+        Object.defineProperty(PepTextboxComponent.prototype, "displayValue", {
+            get: function () {
+                var res = '';
+                if (this.type == 'link') {
+                    res = this.formattedValue;
+                }
+                else if (this.isNumberType()) {
+                    res = this.isInFocus ? (this.value.length > 0 ? parseFloat(this.value).toString() : '') : this.formattedValue;
+                }
+                else {
+                    res = this.isInFocus ? this.value : this.formattedValue;
+                }
+                return res;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepTextboxComponent.prototype.setDefaultForm = function () {
+            var pepField = new ngxLib.PepTextboxField({
+                key: this.key,
+                value: this.value,
+                mandatory: this.mandatory,
+                readonly: this.readonly,
+                disabled: this.disabled,
+                maxFieldCharacters: this.maxFieldCharacters,
+                type: this.type,
+                minValue: this.minValue,
+                maxValue: this.maxValue,
+            });
+            this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
+        };
+        PepTextboxComponent.prototype.ngOnInit = function () {
+            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, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
+            }
+            this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
+            this.updateFormFieldValue();
+        };
+        PepTextboxComponent.prototype.ngOnChanges = function (changes) {
+            if (this.standAlone) {
+                this.setDefaultForm();
+            }
+            this.readonly = this.type === 'duration' ? true : this.readonly; // Hack until we develop Timer UI for editing Duration field
+        };
+        PepTextboxComponent.prototype.ngOnDestroy = function () {
+            //
+        };
+        PepTextboxComponent.prototype.onFocus = function (event) {
+            this.isInFocus = true;
+            // select the value in focus (DI-18246 improvement)
+            setTimeout(function () {
+                var eventTarget = event.target || event.srcElement;
+                if (eventTarget) {
+                    eventTarget.select();
+                }
+            }, 0);
+        };
+        PepTextboxComponent.prototype.isDecimal = function () {
+            var res = false;
+            if (this.isNumberType()) {
+                if (this.type === 'currency' || this.type === 'real') {
+                    res = true;
+                }
+            }
+            return res;
+        };
+        PepTextboxComponent.prototype.isNumberType = function () {
+            return (this.type === 'percentage' ||
+                this.type === 'int' ||
+                this.type === 'currency' ||
+                this.type === 'real');
+        };
+        PepTextboxComponent.prototype.isValueValid = function (value) {
+            var res = false;
+            if (this.isNumberType()) {
+                if (value === '') {
+                    res = this.mandatory ? false : true;
+                }
+                else {
+                    var numberValue = this.utilitiesService.coerceNumberProperty(value);
+                    res =
+                        numberValue >= this.minValue &&
+                            numberValue <= this.maxValue;
+                }
+            }
+            else {
+                // TODO: Maybe need to check other types.
+                res = true;
+            }
+            return res;
+        };
+        PepTextboxComponent.prototype.isDifferentValue = function (value) {
+            var res = false;
+            if (this.isNumberType()) {
+                if (this.value === '' || value === '') {
+                    res = true;
+                }
+                else {
+                    var currentValue = this.utilitiesService.coerceNumberProperty(this.value);
+                    var newValue = this.utilitiesService.coerceNumberProperty(value);
+                    res = currentValue !== newValue;
+                }
+            }
+            else {
+                res = true;
+            }
+            return res;
+        };
+        PepTextboxComponent.prototype.onChange = function (e) {
+            var value = e.target ? e.target.value : e;
+            this.valueChange.emit(value);
+        };
+        PepTextboxComponent.prototype.onBlur = function (e) {
+            this.isInFocus = false;
+            var value = e.target ? e.target.value : e;
+            if (value !== this.value && this.isDifferentValue(value)) {
+                // If renderError is false and the new value is not valid.
+                if (!this.renderError && !this.isValueValid(value)) {
+                    this.renderer.setProperty(this.input.nativeElement, 'value', this.value);
+                }
+                else {
+                    this.value = value;
+                    // // If the user is setting the formatted value then set the value till the user format it and return it back.
+                    // if (!this._calculateFormattedValue) {
+                    //     this._formattedValue = value;
+                    // }
+                    this.valueChange.emit(value);
+                }
+            }
+            if (this.isInEditMode) {
+                this.isInEditMode = false;
+            }
+        };
+        PepTextboxComponent.prototype.anchorClicked = function () {
+            var 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;
+                }
+            }
+        };
+        PepTextboxComponent.prototype.cardTemplateClicked = function (event) {
+            var _this = this;
+            this.isInEditMode = true;
+            setTimeout(function () {
+                _this.input.nativeElement.focus();
+            }, 0);
+        };
+        return PepTextboxComponent;
+    }());
+    PepTextboxComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-textbox',
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <input #input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput 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 }}\" [formControlName]=\"key\" [type]=\"type\" [value]=\"displayValue\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">\n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherError\">\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 #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            </mat-error>\n\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\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (keyup)=\"onKeyUp($event)\"  -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\"\n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" (blur)=\"onBlur($event)\" (change)=\"onChange($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    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}", ""]
+                },] }
+    ];
+    PepTextboxComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: ngxLib.PepCustomizationService },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: core$1.TranslateService },
+        { type: ngxLib.PepUtilitiesService }
+    ]; };
+    PepTextboxComponent.propDecorators = {
+        dataQa: [{ type: core.HostBinding, args: ['attr.data-qa',] }],
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        formattedValue: [{ type: core.Input }],
+        accessory: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        type: [{ type: core.Input }],
+        mandatory: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        maxFieldCharacters: [{ type: core.Input }],
+        hint: [{ type: core.Input }],
+        textColor: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ type: core.Input }],
+        minValue: [{ type: core.Input }],
+        maxValue: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
+        form: [{ type: core.Input }],
+        isActive: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        renderError: [{ type: core.Input }],
+        renderSymbol: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        parentFieldKey: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }],
+        formValidationChange: [{ type: core.Output }],
+        input: [{ type: core.ViewChild, args: ['input',] }]
     };
 
-    var PepTextboxValidationDirective = /** @class */ (function () {
-        function PepTextboxValidationDirective(hostElement, validatorService) {
-            this.hostElement = hostElement;
-            this.validatorService = validatorService;
-            this.type = 'text';
-            this.previousValue = '';
-        }
-        PepTextboxValidationDirective.prototype.ngOnInit = function () {
-            //
-        };
-        PepTextboxValidationDirective.prototype.isNumber = function () {
-            return this.isInteger() || this.isDecimal();
-        };
-        PepTextboxValidationDirective.prototype.isInteger = function () {
-            return this.type === 'int';
-        };
-        PepTextboxValidationDirective.prototype.isDecimal = function () {
-            return (this.type === 'currency' ||
-                this.type === 'percentage' ||
-                this.type === 'real');
-        };
-        PepTextboxValidationDirective.prototype.isPhone = function () {
-            return this.type === 'phone';
-        };
-        PepTextboxValidationDirective.prototype.isText = function () {
-            return (this.type === 'email' ||
-                this.type === 'link' ||
-                this.type === 'text');
-        };
-        PepTextboxValidationDirective.prototype.onChange = function (e) {
-            this.validateValue(this.hostElement.nativeElement.value);
-        };
-        PepTextboxValidationDirective.prototype.onKeyDown = function (e) {
-            var originalValue = e.target['value'];
-            if (this.isNumber()) {
-                // save value before keydown event
-                this.previousValue = originalValue;
-                var isNumber = this.validatorService.isNumber(e, this.isDecimal());
-                if (isNumber)
-                    return;
-                else
-                    e.preventDefault();
-            }
-            else if (this.isPhone()) {
-                var isPhone = this.validatorService.isPhone(e);
-                if (isPhone)
-                    return;
-                else
-                    e.preventDefault();
-            }
-        };
-        PepTextboxValidationDirective.prototype.validateValue = function (value) {
-            if (this.isNumber()) {
-                var newValue = this.validatorService.validateNumber(value, this.isDecimal());
-                this.hostElement.nativeElement['value'] = newValue ? newValue : 0;
-            }
-            else if (this.isPhone()) {
-                // test phone with regular expression, when
-                // phone is invalid, replace it with the previousValue
-                var valid = this.validatorService.validatePhone(value);
-                this.hostElement.nativeElement['value'] = valid
-                    ? value
-                    : this.previousValue;
-            }
-            else if (this.isText()) {
-                this.hostElement.nativeElement['value'] = value;
-            }
-        };
-        return PepTextboxValidationDirective;
-    }());
-    PepTextboxValidationDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[pepTextboxValidation]',
-                },] }
-    ];
-    PepTextboxValidationDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: ngxLib.PepValidatorService }
-    ]; };
-    PepTextboxValidationDirective.propDecorators = {
-        type: [{ type: core.Input }],
-        onChange: [{ type: core.HostListener, args: ['change', ['$event'],] }],
-        onKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
+    var PepTextboxValidationDirective = /** @class */ (function () {
+        function PepTextboxValidationDirective(hostElement, validatorService) {
+            this.hostElement = hostElement;
+            this.validatorService = validatorService;
+            this.type = 'text';
+            this.previousValue = '';
+        }
+        PepTextboxValidationDirective.prototype.ngOnInit = function () {
+            //
+        };
+        PepTextboxValidationDirective.prototype.isNumber = function () {
+            return this.isInteger() || this.isDecimal();
+        };
+        PepTextboxValidationDirective.prototype.isInteger = function () {
+            return this.type === 'int';
+        };
+        PepTextboxValidationDirective.prototype.isDecimal = function () {
+            return (this.type === 'currency' ||
+                this.type === 'percentage' ||
+                this.type === 'real');
+        };
+        PepTextboxValidationDirective.prototype.isPhone = function () {
+            return this.type === 'phone';
+        };
+        PepTextboxValidationDirective.prototype.isText = function () {
+            return (this.type === 'email' ||
+                this.type === 'link' ||
+                this.type === 'text');
+        };
+        PepTextboxValidationDirective.prototype.onChange = function (e) {
+            this.validateValue(this.hostElement.nativeElement.value);
+        };
+        PepTextboxValidationDirective.prototype.onKeyDown = function (e) {
+            var originalValue = e.target['value'];
+            if (this.isNumber()) {
+                // save value before keydown event
+                this.previousValue = originalValue;
+                var isNumber = this.validatorService.isNumber(e, this.isDecimal());
+                if (isNumber)
+                    return;
+                else
+                    e.preventDefault();
+            }
+            else if (this.isPhone()) {
+                var isPhone = this.validatorService.isPhone(e);
+                if (isPhone)
+                    return;
+                else
+                    e.preventDefault();
+            }
+        };
+        PepTextboxValidationDirective.prototype.validateValue = function (value) {
+            if (this.isNumber()) {
+                var newValue = this.validatorService.validateNumber(value, this.isDecimal());
+                this.hostElement.nativeElement['value'] = newValue ? newValue : 0;
+            }
+            else if (this.isPhone()) {
+                // test phone with regular expression, when
+                // phone is invalid, replace it with the previousValue
+                var valid = this.validatorService.validatePhone(value);
+                this.hostElement.nativeElement['value'] = valid
+                    ? value
+                    : this.previousValue;
+            }
+            else if (this.isText()) {
+                this.hostElement.nativeElement['value'] = value;
+            }
+        };
+        return PepTextboxValidationDirective;
+    }());
+    PepTextboxValidationDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[pepTextboxValidation]',
+                },] }
+    ];
+    PepTextboxValidationDirective.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: ngxLib.PepValidatorService }
+    ]; };
+    PepTextboxValidationDirective.propDecorators = {
+        type: [{ type: core.Input }],
+        onChange: [{ type: core.HostListener, args: ['change', ['$event'],] }],
+        onKeyDown: [{ type: core.HostListener, args: ['keydown', ['$event'],] }]
     };
 
-    var PepTextboxModule = /** @class */ (function () {
-        function PepTextboxModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([icon.pepIconSystemEdit]);
-        }
-        return PepTextboxModule;
-    }());
-    PepTextboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        // Material modules,
-                        core$2.MatCommonModule,
-                        button.MatButtonModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        icon$1.MatIconModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule,
-                        fieldTitle.PepFieldTitleModule,
-                        textboxIcon.PepTextboxIconModule,
-                    ],
-                    exports: [PepTextboxComponent],
-                    declarations: [PepTextboxComponent, PepTextboxValidationDirective],
-                },] }
-    ];
-    PepTextboxModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepTextboxModule = /** @class */ (function () {
+        function PepTextboxModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([icon.pepIconSystemEdit]);
+        }
+        return PepTextboxModule;
+    }());
+    PepTextboxModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        // Material modules,
+                        core$2.MatCommonModule,
+                        button.MatButtonModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        icon$1.MatIconModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule,
+                        fieldTitle.PepFieldTitleModule,
+                        textboxIcon.PepTextboxIconModule,
+                    ],
+                    exports: [PepTextboxComponent],
+                    declarations: [PepTextboxComponent, PepTextboxValidationDirective],
+                },] }
+    ];
+    PepTextboxModule.ctorParameters = function () { return [
+        { type: icon.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.
      */
 
     exports.PepTextboxComponent = PepTextboxComponent;