@pepperi-addons/ngx-lib 0.3.15-beta.12 → 0.3.15-beta.15

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

@@ -4,401 +4,401 @@
     (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'].link = {}), 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';
 
-    var IsUrlPipe = /** @class */ (function () {
-        function IsUrlPipe() {
-        }
-        IsUrlPipe.prototype.transform = function (value) {
-            var regex = /^((http(s?)|ftp)\:\/\/)(www\.)|(www\.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.*)/;
-            return regex.test(value);
-        };
-        return IsUrlPipe;
-    }());
-    IsUrlPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'isUrl'
-                },] }
+    var IsUrlPipe = /** @class */ (function () {
+        function IsUrlPipe() {
+        }
+        IsUrlPipe.prototype.transform = function (value) {
+            var regex = /^((http(s?)|ftp)\:\/\/)(www\.)|(www\.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.*)/;
+            return regex.test(value);
+        };
+        return IsUrlPipe;
+    }());
+    IsUrlPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'isUrl'
+                },] }
     ];
 
-    /**
-     * This is a text box input component that can be use to
-     *
-     * @export
-     * @class PepTextboxComponent
-     * @implements {OnChanges}
-     * @implements {OnInit}
-     * @implements {OnDestroy}
-     */
-    var PepLinkComponent = /** @class */ (function () {
-        function PepLinkComponent(fb, customizationService, renderer, element, translate, utilitiesService, isUrlPipe) {
-            this.fb = fb;
-            this.customizationService = customizationService;
-            this.renderer = renderer;
-            this.element = element;
-            this.translate = translate;
-            this.utilitiesService = utilitiesService;
-            this.isUrlPipe = isUrlPipe;
-            this.dataQa = '';
-            this._key = '';
-            this._value = '';
-            this._formattedValue = null;
-            /**
-             * 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 = 'link';
-            /**
-             * 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._visible = true;
-            this.form = null;
-            this.isActive = false;
-            this.showTitle = true;
-            this.renderTitle = true;
-            this.renderError = true;
-            this.renderSymbol = true;
-            this.layoutType = 'form';
-            /**
-             * The value change event.
-             *
-             * @type {EventEmitter<string>}
-             * @memberof PepTextboxComponent
-             */
-            this.valueChange = new core.EventEmitter();
-            this.formValidationChange = new core.EventEmitter();
-            this.elementClick = new core.EventEmitter();
-            this._calculateFormattedValue = true;
-            this.controlType = 'link';
-            this.standAlone = false;
-            this.isInEditMode = false;
-            this.isUrl = false;
-            this.isInFocus = false;
-        }
-        Object.defineProperty(PepLinkComponent.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(PepLinkComponent.prototype, "value", {
-            get: function () {
-                return this._value;
-            },
-            /**
-             * The value of the text box.
-             *
-             * @memberof PepTextboxComponent
-             */
-            set: function (value) {
-                if (!value) {
-                    value = '';
-                }
-                this._value = value;
-                if (this._calculateFormattedValue) {
-                    this.setFormattedValue(value);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepLinkComponent.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(PepLinkComponent.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(PepLinkComponent.prototype, "calculateFormattedValue", {
-            get: function () {
-                return this._calculateFormattedValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepLinkComponent.prototype.setFormattedValue = function (value) {
-            if (this._calculateFormattedValue) {
-                this._formattedValue = value;
-            }
-            else {
-                this._formattedValue = value;
-            }
-            this.updateFormFieldValue();
-        };
-        PepLinkComponent.prototype.updateFormFieldValue = function () {
-            this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue);
-        };
-        Object.defineProperty(PepLinkComponent.prototype, "displayValue", {
-            get: function () {
-                var res = this.formattedValue;
-                return res;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepLinkComponent.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,
-            });
-            this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
-        };
-        PepLinkComponent.prototype.ngOnInit = function () {
-            if (this.form === null) {
-                this.standAlone = true;
-                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.updateFormFieldValue();
-        };
-        PepLinkComponent.prototype.ngOnChanges = function (changes) {
-            if (this.standAlone) {
-                this.setDefaultForm();
-            }
-        };
-        PepLinkComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        PepLinkComponent.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);
-        };
-        PepLinkComponent.prototype.isValueValid = function (value) {
-            // TODO: Maybe need to check other types.
-            var res = true;
-            return res;
-        };
-        PepLinkComponent.prototype.onChange = function (e) {
-            var value = e.target ? e.target.value : e;
-            this.valueChange.emit(value);
-        };
-        PepLinkComponent.prototype.onBlur = function (e) {
-            this.isInFocus = false;
-            var value = e.target ? e.target.value : e;
-            if (value !== this.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;
-            }
-        };
-        PepLinkComponent.prototype.onClick = function () {
-            var output = {
-                key: this.key,
-                value: this.value,
-                controlType: this.controlType
-            };
-            this.elementClick.emit(output);
-        };
-        PepLinkComponent.prototype.anchorClicked = function () {
-            var currentValue = this.value;
-            if (currentValue.trim().length > 0) {
-                var output = {
-                    key: this.key,
-                    value: this.value,
-                    controlType: this.controlType
-                };
-                this.elementClick.emit(output);
-                if (this.isUrlPipe.transform(currentValue)) {
-                    window.open(currentValue);
-                }
-            }
-        };
-        PepLinkComponent.prototype.cardTemplateClicked = function (event) {
-            var _this = this;
-            this.isInEditMode = true;
-            setTimeout(function () {
-                _this.input.nativeElement.focus();
-            }, 0);
-        };
-        return PepLinkComponent;
-    }());
-    PepLinkComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-link',
-                    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\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"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)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{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                    <!-- TODO: Show error if it's not a valid link -->\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 *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\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                <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n                <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\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}"]
-                },] }
-    ];
-    PepLinkComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: ngxLib.PepCustomizationService },
-        { type: core.Renderer2 },
-        { type: core.ElementRef },
-        { type: core$1.TranslateService },
-        { type: ngxLib.PepUtilitiesService },
-        { type: IsUrlPipe }
-    ]; };
-    PepLinkComponent.propDecorators = {
-        dataQa: [{ type: core.HostBinding, args: ['attr.data-qa',] }],
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        formattedValue: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        mandatory: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        maxFieldCharacters: [{ type: core.Input }],
-        textColor: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ 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 }],
-        valueChange: [{ type: core.Output }],
-        formValidationChange: [{ type: core.Output }],
-        elementClick: [{ 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 PepLinkComponent = /** @class */ (function () {
+        function PepLinkComponent(fb, customizationService, renderer, element, translate, utilitiesService, isUrlPipe) {
+            this.fb = fb;
+            this.customizationService = customizationService;
+            this.renderer = renderer;
+            this.element = element;
+            this.translate = translate;
+            this.utilitiesService = utilitiesService;
+            this.isUrlPipe = isUrlPipe;
+            this.dataQa = '';
+            this._key = '';
+            this._value = '';
+            this._formattedValue = null;
+            /**
+             * 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 = 'link';
+            /**
+             * 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._visible = true;
+            this.form = null;
+            this.isActive = false;
+            this.showTitle = true;
+            this.renderTitle = true;
+            this.renderError = true;
+            this.renderSymbol = true;
+            this.layoutType = 'form';
+            /**
+             * The value change event.
+             *
+             * @type {EventEmitter<string>}
+             * @memberof PepTextboxComponent
+             */
+            this.valueChange = new core.EventEmitter();
+            this.formValidationChange = new core.EventEmitter();
+            this.elementClick = new core.EventEmitter();
+            this._calculateFormattedValue = true;
+            this.controlType = 'link';
+            this.standAlone = false;
+            this.isInEditMode = false;
+            this.isUrl = false;
+            this.isInFocus = false;
+        }
+        Object.defineProperty(PepLinkComponent.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(PepLinkComponent.prototype, "value", {
+            get: function () {
+                return this._value;
+            },
+            /**
+             * The value of the text box.
+             *
+             * @memberof PepTextboxComponent
+             */
+            set: function (value) {
+                if (!value) {
+                    value = '';
+                }
+                this._value = value;
+                if (this._calculateFormattedValue) {
+                    this.setFormattedValue(value);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepLinkComponent.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(PepLinkComponent.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(PepLinkComponent.prototype, "calculateFormattedValue", {
+            get: function () {
+                return this._calculateFormattedValue;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepLinkComponent.prototype.setFormattedValue = function (value) {
+            if (this._calculateFormattedValue) {
+                this._formattedValue = value;
+            }
+            else {
+                this._formattedValue = value;
+            }
+            this.updateFormFieldValue();
+        };
+        PepLinkComponent.prototype.updateFormFieldValue = function () {
+            this.customizationService.updateFormFieldValue(this.form, this.key, this.formattedValue);
+        };
+        Object.defineProperty(PepLinkComponent.prototype, "displayValue", {
+            get: function () {
+                var res = this.formattedValue;
+                return res;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepLinkComponent.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,
+            });
+            this.form = this.customizationService.getDefaultFromGroup(pepField, this.renderError);
+        };
+        PepLinkComponent.prototype.ngOnInit = function () {
+            if (this.form === null) {
+                this.standAlone = true;
+                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.updateFormFieldValue();
+        };
+        PepLinkComponent.prototype.ngOnChanges = function (changes) {
+            if (this.standAlone) {
+                this.setDefaultForm();
+            }
+        };
+        PepLinkComponent.prototype.ngOnDestroy = function () {
+            //
+        };
+        PepLinkComponent.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);
+        };
+        PepLinkComponent.prototype.isValueValid = function (value) {
+            // TODO: Maybe need to check other types.
+            var res = true;
+            return res;
+        };
+        PepLinkComponent.prototype.onChange = function (e) {
+            var value = e.target ? e.target.value : e;
+            this.valueChange.emit(value);
+        };
+        PepLinkComponent.prototype.onBlur = function (e) {
+            this.isInFocus = false;
+            var value = e.target ? e.target.value : e;
+            if (value !== this.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;
+            }
+        };
+        PepLinkComponent.prototype.onClick = function () {
+            var output = {
+                key: this.key,
+                value: this.value,
+                controlType: this.controlType
+            };
+            this.elementClick.emit(output);
+        };
+        PepLinkComponent.prototype.anchorClicked = function () {
+            var currentValue = this.value;
+            if (currentValue.trim().length > 0) {
+                var output = {
+                    key: this.key,
+                    value: this.value,
+                    controlType: this.controlType
+                };
+                this.elementClick.emit(output);
+                if (this.isUrlPipe.transform(currentValue)) {
+                    window.open(currentValue);
+                }
+            }
+        };
+        PepLinkComponent.prototype.cardTemplateClicked = function (event) {
+            var _this = this;
+            this.isInEditMode = true;
+            setTimeout(function () {
+                _this.input.nativeElement.focus();
+            }, 0);
+        };
+        return PepLinkComponent;
+    }());
+    PepLinkComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-link',
+                    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\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"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)\" [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0}\" />\n\n            <span *ngIf=\"disabled && formattedValue?.length > 0\" class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \">\n                    {{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                    <!-- TODO: Show error if it's not a valid link -->\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 *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n        </ng-container>\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                <a *ngIf=\"formattedValue != null && (value ? value : formattedValue) | isUrl\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    target=\"_blank\" href=\"{{ value ? value : formattedValue }}\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\n                <a *ngIf=\"formattedValue != null && !((value ? value : formattedValue) | isUrl)\" [id]=\"key\"\n                    class=\"color-link body-sm pep-report-input\"\n                    [ngClass]=\"{'disable': (disabled && value === '')}\" title=\"{{ formattedValue }}\"\n                    href=\"javascript:void(0)\" (click)=\"onClick()\">{{\n                    formattedValue }}</a>\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}"]
+                },] }
+    ];
+    PepLinkComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: ngxLib.PepCustomizationService },
+        { type: core.Renderer2 },
+        { type: core.ElementRef },
+        { type: core$1.TranslateService },
+        { type: ngxLib.PepUtilitiesService },
+        { type: IsUrlPipe }
+    ]; };
+    PepLinkComponent.propDecorators = {
+        dataQa: [{ type: core.HostBinding, args: ['attr.data-qa',] }],
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        formattedValue: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        placeholder: [{ type: core.Input }],
+        mandatory: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        maxFieldCharacters: [{ type: core.Input }],
+        textColor: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ 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 }],
+        valueChange: [{ type: core.Output }],
+        formValidationChange: [{ type: core.Output }],
+        elementClick: [{ type: core.Output }],
+        input: [{ type: core.ViewChild, args: ['input',] }]
     };
 
-    var PepLinkModule = /** @class */ (function () {
-        function PepLinkModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([icon.pepIconSystemEdit]);
-        }
-        return PepLinkModule;
-    }());
-    PepLinkModule.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: [PepLinkComponent],
-                    declarations: [
-                        PepLinkComponent,
-                        //   PepTextboxValidationDirective,
-                        IsUrlPipe
-                    ],
-                    providers: [IsUrlPipe]
-                },] }
-    ];
-    PepLinkModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepLinkModule = /** @class */ (function () {
+        function PepLinkModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([icon.pepIconSystemEdit]);
+        }
+        return PepLinkModule;
+    }());
+    PepLinkModule.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: [PepLinkComponent],
+                    declarations: [
+                        PepLinkComponent,
+                        //   PepTextboxValidationDirective,
+                        IsUrlPipe
+                    ],
+                    providers: [IsUrlPipe]
+                },] }
+    ];
+    PepLinkModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    /*
-     * Public API Surface of ngx-lib/link
+    /*
+     * Public API Surface of ngx-lib/link
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepLinkComponent = PepLinkComponent;