npm - @pepperi-addons/ngx-lib - Versions diffs - 0.4.2-beta.31 → 0.4.2-beta.310 - Mend

@pepperi-addons/ngx-lib 0.4.2-beta.31 → 0.4.2-beta.310

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (408) hide show

package/fesm2020/pepperi-addons-ngx-lib-textarea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-textarea.mjs","sources":["../../../projects/ngx-lib/textarea/textarea.component.ts","../../../projects/ngx-lib/textarea/textarea.component.html","../../../projects/ngx-lib/textarea/textarea.module.ts","../../../projects/ngx-lib/textarea/public-api.ts","../../../projects/ngx-lib/textarea/pepperi-addons-ngx-lib-textarea.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n ElementRef,\n ViewChild,\n OnDestroy,\n Renderer2,\n TemplateRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\n\n@Component({\n selector: 'pep-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss', './textarea.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextareaComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() maxFieldCharacters: number;\n @Input() textColor = '';\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n // @Input() lastFocusField: any;\n\n controlType = 'textarea';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() renderTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @Output()\n keyup: EventEmitter<any> = new EventEmitter<any>();\n\n // @ViewChild('input') input: ElementRef;\n @ViewChild('textAreaDialogTemplate', { read: TemplateRef })\n textAreaDialogTemplate: TemplateRef<any>;\n\n fieldHeight = '';\n standAlone = false;\n isInEditMode = false;\n\n dialogRef: MatDialogRef<any>;\n\n constructor(\n private dialogService: PepDialogService,\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) { }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepTextareaField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n maxFieldCharacters: this.maxFieldCharacters,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n\n if (!this.renderTitle) {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n );\n }\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n onKeyup(event): any {\n this.keyup.emit(event);\n }\n\n onBlur(event: any): void {\n const value = event.target ? event.target.value : event;\n this.changeValue(value);\n\n setTimeout(() => {\n if (this.isInEditMode) {\n this.isInEditMode = false;\n }\n }, 0);\n }\n\n changeValue(value: any): void {\n if (value !== this.value) {\n this.value = value;\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n this.valueChange.emit(value);\n }\n }\n\n cardTemplateClicked(event: any): void {\n this.openDialog();\n }\n\n openDialog(): void {\n const config = this.dialogService.getDialogConfig(\n {\n // maxWidth: '90vw',\n // maxHeight: '90vh'\n },\n 'regular'\n );\n\n this.dialogRef = this.dialogService.openDialog(\n this.textAreaDialogTemplate,\n {},\n config\n );\n\n this.dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeValue(value);\n }\n });\n }\n\n closeDialog(data: any = null): void {\n this.dialogRef?.close(data);\n }\n}\n","<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate let-isFormView=\"isFormView\">\n <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n 'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n 'pep-textarea-card-container': layoutType === 'card'}\">\n <pep-field-title ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled \|\| readonly ? 0 : maxFieldCharacters\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n </pep-field-title>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n (keyup)=\"onKeyup($event)\">\n </textarea>\n <div ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [innerHtml]=\"value \| pepSafeHtml\" [style.height]=\"fieldHeight\">\n </div>\n <!-- <pep-textbox-icon ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon> -->\n <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n [disabled]=\"disabled \|\| readonly\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <mat-error>\n <span class=\"body-xs\"\n [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\n [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </div>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <ng-container ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></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 <ng-container ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-textarea-card-container card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n <span ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n <button ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n [ngClass]=\"{'self-end' : value && value !== ''}\" 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 </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 }\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n <pep-textbox-icon ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <pep-textbox-icon ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n </mat-form-field>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n </ng-template>\n </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n <ng-container pep-dialog-content>\n <!-- <textarea #dialogTextarea [readonly]=\"disabled \|\| readonly\">{{ value }}</textarea> -->\n <textarea #dialogTextarea [readonly]=\"disabled \|\| readonly\" class=\"body-sm\" matInput\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" >\n </textarea>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <ng-container ngIf=\"disabled \|\| readonly; then notEditableBlock; else editableBlock\">\n </ng-container>\n <ng-template #editableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CANCEL' \| translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\"\n (click)=\"closeDialog(dialogTextarea.value)\">\n {{ 'ACTIONS.SAVE' \| translate }}\n </button>\n </ng-template>\n <ng-template #notEditableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CLOSE' \| translate }}\n </button>\n </ng-template>\n </div>\n </pep-dialog>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepTextareaComponent } from './textarea.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n MatIconModule,\n MatDialogModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepTextboxIconModule,\n PepDialogModule,\n ],\n exports: [PepTextareaComponent],\n declarations: [PepTextareaComponent],\n})\nexport class PepTextareaModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n ]);\n }\n}\n","/\n * Public API Surface of ngx-lib/textarea\n /\nexport from './textarea.module';\nexport * from './textarea.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i10","i1"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-textarea.mjs","sources":["../../../projects/ngx-lib/textarea/textarea.component.ts","../../../projects/ngx-lib/textarea/textarea.component.html","../../../projects/ngx-lib/textarea/textarea.module.ts","../../../projects/ngx-lib/textarea/public-api.ts","../../../projects/ngx-lib/textarea/pepperi-addons-ngx-lib-textarea.ts"],"sourcesContent":["import {\n Component,\n OnInit,\n OnChanges,\n Input,\n Output,\n EventEmitter,\n ChangeDetectionStrategy,\n ElementRef,\n ViewChild,\n OnDestroy,\n Renderer2,\n TemplateRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatDialogRef } from '@angular/material/dialog';\nimport {\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n PepTextareaField,\n} from '@pepperi-addons/ngx-lib';\nimport { PepDialogService } from '@pepperi-addons/ngx-lib/dialog';\n\n@Component({\n selector: 'pep-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss', './textarea.component.theme.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepTextareaComponent implements OnChanges, OnInit, OnDestroy {\n @Input() key = '';\n @Input() value = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() readonly = false;\n @Input() maxFieldCharacters: number;\n @Input() textColor = '';\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n this.setFieldHeight();\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n private _visible = true;\n @Input()\n set visible(visible: boolean) {\n this._visible = visible;\n if (visible) {\n this.renderer.removeClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n } else {\n this.renderer.addClass(\n this.element.nativeElement,\n 'hidden-element'\n );\n }\n }\n get visible(): boolean {\n return this._visible;\n }\n\n // @Input() lastFocusField: any;\n\n controlType = 'textarea';\n\n @Input() form: FormGroup = null;\n @Input() isActive = false;\n @Input() showTitle = true;\n @Input() renderTitle = true;\n\n private _layoutType: PepLayoutType = 'form';\n @Input()\n set layoutType(value: PepLayoutType) {\n this._layoutType = value;\n this.setFieldHeight();\n }\n get layoutType(): PepLayoutType {\n return this._layoutType;\n }\n\n @Output()\n valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n @Output()\n keyup: EventEmitter<any> = new EventEmitter<any>();\n\n @Output()\n validationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n // @ViewChild('input') input: ElementRef;\n @ViewChild('textAreaDialogTemplate', { read: TemplateRef })\n textAreaDialogTemplate: TemplateRef<any>;\n\n fieldHeight = '';\n standAlone = false;\n isInEditMode = false;\n\n dialogRef: MatDialogRef<any>;\n\n constructor(\n private dialogService: PepDialogService,\n private customizationService: PepCustomizationService,\n private renderer: Renderer2,\n private element: ElementRef\n ) { }\n\n private setFieldHeight(): void {\n this.fieldHeight = this.customizationService.calculateFieldHeight(\n this.layoutType,\n this.rowSpan,\n this.standAlone\n );\n }\n\n private setDefaultForm(): void {\n const pepField = new PepTextareaField({\n key: this.key,\n value: this.value,\n mandatory: this.mandatory,\n readonly: this.readonly,\n disabled: this.disabled,\n maxFieldCharacters: this.maxFieldCharacters,\n });\n this.form = this.customizationService.getDefaultFromGroup(pepField);\n }\n\n ngOnInit(): void {\n if (this.form === null) {\n this.standAlone = true;\n this.setFieldHeight();\n this.setDefaultForm();\n\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n );\n\n if (!this.renderTitle) {\n this.renderer.addClass(\n this.element.nativeElement,\n PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n );\n }\n }\n }\n\n ngOnChanges(changes: any): void {\n if (this.standAlone) {\n this.setDefaultForm();\n }\n }\n\n ngOnDestroy(): void {\n //\n }\n\n onKeyup(event): any {\n this.keyup.emit(event);\n }\n\n onBlur(event: any): void {\n const value = event.target ? event.target.value : event;\n this.changeValue(value);\n\n setTimeout(() => {\n if (this.isInEditMode) {\n this.isInEditMode = false;\n }\n }, 0);\n }\n\n changeValue(value: any): void {\n if (value !== this.value) {\n this.value = value;\n this.customizationService.updateFormFieldValue(\n this.form,\n this.key,\n value\n );\n\n // Raise this only for stand alone fields, If false then the usage for this field is inside a form. \n // Then the form will take care of raising the (onFormValidationChanged) event\n if (this.standAlone) {\n const isValid = (this.disabled \|\| this.readonly) ? true : this.form.valid; \n this.validationChange.emit(isValid);\n }\n\n this.valueChange.emit(value);\n }\n }\n\n cardTemplateClicked(event: any): void {\n this.openDialog();\n }\n\n openDialog(): void {\n const config = this.dialogService.getDialogConfig(\n {\n // maxWidth: '90vw',\n // maxHeight: '90vh'\n },\n 'regular'\n );\n\n this.dialogRef = this.dialogService.openDialog(\n this.textAreaDialogTemplate,\n {},\n config\n );\n\n this.dialogRef.afterClosed().subscribe((value) => {\n if (value !== undefined && value !== null) {\n this.changeValue(value);\n }\n });\n }\n\n closeDialog(data: any = null): void {\n this.dialogRef?.close(data);\n }\n}\n","<ng-container ngIf=\"form\" [formGroup]=\"form\">\n <ng-template #pepTemplate let-isFormView=\"isFormView\">\n <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n 'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n 'pep-textarea-card-container': layoutType === 'card'}\">\n <pep-field-title ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled \|\| readonly ? 0 : maxFieldCharacters\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n </pep-field-title>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'icon-left': xAlignment === 'left' \|\| xAlignment === 'center', 'icon-right': xAlignment === 'right' }\">\n <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n (keyup)=\"onKeyup($event)\">\n </textarea>\n <div ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [innerHtml]=\"value \| pepSafeHtml\" [style.height]=\"fieldHeight\">\n </div>\n <!-- <pep-textbox-icon ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon> -->\n <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n [disabled]=\"disabled \|\| readonly\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <mat-error>\n <span class=\"body-xs\"\n [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\n [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </div>\n </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <ng-container ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></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 <ng-container ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-textarea-card-container card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n <span ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n <button ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n [ngClass]=\"{'self-end' : value && value !== ''}\" 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 </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 }\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n <pep-textbox-icon ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <pep-textbox-icon ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n </mat-form-field>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n </ng-template>\n </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n <ng-container pep-dialog-content [formGroup]=\"form\">\n <!-- <textarea #dialogTextarea [readonly]=\"disabled \|\| readonly\">{{ value }}</textarea> -->\n <textarea #dialogTextarea [readonly]=\"disabled \|\| readonly\" class=\"body-sm\" matInput\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" >\n </textarea>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <ng-container ngIf=\"disabled \|\| readonly; then notEditableBlock; else editableBlock\">\n </ng-container>\n <ng-template #editableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CANCEL' \| translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\"\n (click)=\"closeDialog(dialogTextarea.value)\">\n {{ 'ACTIONS.SAVE' \| translate }}\n </button>\n </ng-template>\n <ng-template #notEditableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CLOSE' \| translate }}\n </button>\n </ng-template>\n </div>\n </pep-dialog>\n</ng-template>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatDialogModule } from '@angular/material/dialog';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemEdit,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepTextboxIconModule } from '@pepperi-addons/ngx-lib/textbox-icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepTextareaComponent } from './textarea.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n MatIconModule,\n MatDialogModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepFieldTitleModule,\n PepTextboxIconModule,\n PepDialogModule,\n ],\n exports: [PepTextareaComponent],\n declarations: [PepTextareaComponent],\n})\nexport class PepTextareaModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemEdit,\n pepIconSystemClose,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/textarea\n /\nexport from './textarea.module';\nexport * from './textarea.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i10","i1"],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-textbox-icon.mjs CHANGED Viewed

@@ -37,10 +37,10 @@ class PepTextboxIconComponent {
     }
 }
 PepTextboxIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepTextboxIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: { value: "value", label: "label", type: "type", disabled: "disabled" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_coins\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_percent\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_number\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_decimal\">\n    </pep-icon>\n</mat-icon>\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_phone\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_email\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_link\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"system_full_screen\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'richhtmltextarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_datetime\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_cal\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+PepTextboxIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: { value: "value", label: "label", type: "type", disabled: "disabled" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_coins\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_percent\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_number\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_decimal\">\n    </pep-icon>\n</mat-icon>\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_phone\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_email\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_link\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"system_full_screen\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'richhtmltextarea' || type === 'jsoneditor'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_datetime\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_cal\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-textbox-icon', template: "<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_coins\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_percent\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_number\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_decimal\">\n    </pep-icon>\n</mat-icon>\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_phone\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_email\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_link\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"system_full_screen\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'richhtmltextarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_datetime\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_cal\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->", styles: [":host{display:flex}\n"] }]
+            args: [{ selector: 'pep-textbox-icon', template: "<mat-icon *ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_coins\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_percent\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_number\">\n    </pep-icon>\n</mat-icon>\n<mat-icon *ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n    <pep-icon name=\"number_decimal\">\n    </pep-icon>\n</mat-icon>\n<button *ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_phone\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_email\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n    [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n    <mat-icon>\n        <pep-icon name=\"system_link\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"system_full_screen\">\n        </pep-icon>\n    </mat-icon>\n</button>\n<button *ngIf=\"type === 'richhtmltextarea' || type === 'jsoneditor'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_datetime\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<button *ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n    <mat-icon>\n        <pep-icon name=\"time_cal\">\n        </pep-icon>\n    </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" *ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->", styles: [":host{display:flex}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], label: [{

package/fesm2020/pepperi-addons-ngx-lib-textbox-icon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-textbox-icon.mjs","sources":["../../../projects/ngx-lib/textbox-icon/textbox-icon.component.ts","../../../projects/ngx-lib/textbox-icon/textbox-icon.component.html","../../../projects/ngx-lib/textbox-icon/textbox-icon.module.ts","../../../projects/ngx-lib/textbox-icon/public-api.ts","../../../projects/ngx-lib/textbox-icon/pepperi-addons-ngx-lib-textbox-icon.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'pep-textbox-icon',\n templateUrl: './textbox-icon.component.html',\n styleUrls: ['./textbox-icon.component.scss'],\n})\nexport class PepTextboxIconComponent {\n @Input() value: string;\n @Input() label: string;\n @Input() type?: string;\n @Input() disabled: boolean;\n\n test = true;\n @Output() iconClick: EventEmitter<void> = new EventEmitter<void>();\n\n iconButtonClicked(): void {\n const currentValue = this.value;\n if (currentValue && currentValue.toString().trim().length > 0) {\n switch (this.type) {\n case 'email':\n window.open('mailto:' + currentValue, 'email');\n break;\n case 'phone':\n window.open('tel:' + currentValue, 'tel');\n break;\n case 'link':\n window.open(currentValue);\n break;\n default:\n break;\n }\n }\n\n this.iconClick.emit();\n }\n}\n","<mat-icon ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_coins\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_percent\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_number\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_decimal\">\n </pep-icon>\n</mat-icon>\n<button ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_phone\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_email\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_link\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"system_full_screen\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'richhtmltextarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<button ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"time_datetime\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<button ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"time_cal\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\n\n// import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconNumberCoins,\n pepIconNumberPercent,\n pepIconNumberNumber,\n pepIconNumberDecimal,\n pepIconSystemPhone,\n pepIconSystemEmail,\n pepIconSystemLink,\n pepIconSystemFullScreen,\n pepIconSystemEdit,\n pepIconTimeDatetime,\n pepIconTimeCal,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepTextboxIconComponent } from './textbox-icon.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatIconModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepTextboxIconComponent],\n declarations: [PepTextboxIconComponent],\n})\nexport class PepTextboxIconModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconNumberCoins,\n pepIconNumberPercent,\n pepIconNumberNumber,\n pepIconNumberDecimal,\n pepIconSystemPhone,\n pepIconSystemEmail,\n pepIconSystemLink,\n pepIconSystemFullScreen,\n pepIconSystemEdit,\n pepIconTimeDatetime,\n pepIconTimeCal,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/textbox-icon\n /\nexport from './textbox-icon.module';\nexport * from './textbox-icon.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i4","i1"],"mappings":";;;;;;;;;;;;;MAOa,uBAAuB,CAAA;AALpC,IAAA,WAAA,GAAA;QAWI,IAAI,CAAA,IAAA,GAAG,IAAI,CAAC;AACF,QAAA,IAAA,CAAA,SAAS,GAAuB,IAAI,YAAY,EAAQ,CAAC;AAsBtE,KAAA;IApBG,iBAAiB,GAAA;AACb,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;AAChC,QAAA,IAAI,YAAY,IAAI,YAAY,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3D,QAAQ,IAAI,CAAC,IAAI;AACb,gBAAA,KAAK,OAAO;oBACR,MAAM,CAAC,IAAI,CAAC,SAAS,GAAG,YAAY,EAAE,OAAO,CAAC,CAAC;oBAC/C,MAAM;AACV,gBAAA,KAAK,OAAO;oBACR,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC;oBAC1C,MAAM;AACV,gBAAA,KAAK,MAAM;AACP,oBAAA,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC1B,MAAM;AACV,gBAAA;oBACI,MAAM;AACb,aAAA;AACJ,SAAA;AAED,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;;oHA5BQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,6KCPpC,~~umFAmEkC~~,EAAA,MAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,4LAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,eAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FD5DrB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBALnC,SAAS;+BACI,kBAAkB,EAAA,QAAA,EAAA,~~umFAAA~~,EAAA,MAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,CAAA;8BAKnB,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAGI,SAAS,EAAA,CAAA;sBAAlB,MAAM;;;ME2BE,oBAAoB,CAAA;AAC7B,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;AAChD,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;YAC/B,kBAAkB;YAClB,oBAAoB;YACpB,mBAAmB;YACnB,oBAAoB;YACpB,kBAAkB;YAClB,kBAAkB;YAClB,iBAAiB;YACjB,uBAAuB;YACvB,iBAAiB;YACjB,mBAAmB;YACnB,cAAc;AACjB,SAAA,CAAC,CAAC;KACN;;iHAfQ,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAC,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kHAApB,oBAAoB,EAAA,YAAA,EAAA,CAFd,uBAAuB,CAAA,EAAA,OAAA,EAAA,CAVlC,YAAY;;QAEZ,eAAe;QACf,eAAe;QACf,kBAAkB;QAClB,aAAa;;AAEb,QAAA,aAAa,aAEP,uBAAuB,CAAA,EAAA,CAAA,CAAA;AAGxB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAZzB,YAAY;;QAEZ,eAAe;QACf,eAAe;QACf,kBAAkB;QAClB,aAAa;;QAEb,aAAa,CAAA,EAAA,CAAA,CAAA;2FAKR,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,eAAe;wBACf,kBAAkB;wBAClB,aAAa;;wBAEb,aAAa;AAChB,qBAAA;oBACD,OAAO,EAAE,CAAC,uBAAuB,CAAC;oBAClC,YAAY,EAAE,CAAC,uBAAuB,CAAC;AAC1C,iBAAA,CAAA;;;ACxCD;;AAEG;;ACFH;;AAEG;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-textbox-icon.mjs","sources":["../../../projects/ngx-lib/textbox-icon/textbox-icon.component.ts","../../../projects/ngx-lib/textbox-icon/textbox-icon.component.html","../../../projects/ngx-lib/textbox-icon/textbox-icon.module.ts","../../../projects/ngx-lib/textbox-icon/public-api.ts","../../../projects/ngx-lib/textbox-icon/pepperi-addons-ngx-lib-textbox-icon.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n selector: 'pep-textbox-icon',\n templateUrl: './textbox-icon.component.html',\n styleUrls: ['./textbox-icon.component.scss'],\n})\nexport class PepTextboxIconComponent {\n @Input() value: string;\n @Input() label: string;\n @Input() type?: string;\n @Input() disabled: boolean;\n\n test = true;\n @Output() iconClick: EventEmitter<void> = new EventEmitter<void>();\n\n iconButtonClicked(): void {\n const currentValue = this.value;\n if (currentValue && currentValue.toString().trim().length > 0) {\n switch (this.type) {\n case 'email':\n window.open('mailto:' + currentValue, 'email');\n break;\n case 'phone':\n window.open('tel:' + currentValue, 'tel');\n break;\n case 'link':\n window.open(currentValue);\n break;\n default:\n break;\n }\n }\n\n this.iconClick.emit();\n }\n}\n","<mat-icon ngIf=\"type === 'currency'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_coins\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'percentage'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_percent\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'int'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_number\">\n </pep-icon>\n</mat-icon>\n<mat-icon ngIf=\"type === 'real'\" class=\"pep-text-icon\">\n <pep-icon name=\"number_decimal\">\n </pep-icon>\n</mat-icon>\n<button ngIf=\"type === 'phone'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_phone\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'email'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_email\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'link'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\"\n [disabled]=\"value.length === 0\" [ngClass]=\"{ disabled: value.length === 0 }\">\n <mat-icon>\n <pep-icon name=\"system_link\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'textarea'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"system_full_screen\">\n </pep-icon>\n </mat-icon>\n</button>\n<button ngIf=\"type === 'richhtmltextarea' \|\| type === 'jsoneditor'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"{{ disabled ? 'system_full_screen' : 'system_edit'}}\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<button ngIf=\"!disabled && type === 'datetime'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"time_datetime\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<button ngIf=\"!disabled && type === 'date'\" class=\"pep-button md regular\" mat-button (click)=\"iconButtonClicked()\">\n <mat-icon>\n <pep-icon name=\"time_cal\">\n </pep-icon>\n </mat-icon>\n</button>\n\n<!-- <span class=\"pep-text-icon\" ngIf=\"type === 'percentage'\">%</span> -->\n<!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-icon matPrefix>sentiment_very_satisfied</mat-icon> -->\n<!-- <mat-hint>Hint</mat-hint> -->","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\n\n// import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconNumberCoins,\n pepIconNumberPercent,\n pepIconNumberNumber,\n pepIconNumberDecimal,\n pepIconSystemPhone,\n pepIconSystemEmail,\n pepIconSystemLink,\n pepIconSystemFullScreen,\n pepIconSystemEdit,\n pepIconTimeDatetime,\n pepIconTimeCal,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepTextboxIconComponent } from './textbox-icon.component';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatIconModule,\n // ngx-lib modules\n PepIconModule,\n ],\n exports: [PepTextboxIconComponent],\n declarations: [PepTextboxIconComponent],\n})\nexport class PepTextboxIconModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconNumberCoins,\n pepIconNumberPercent,\n pepIconNumberNumber,\n pepIconNumberDecimal,\n pepIconSystemPhone,\n pepIconSystemEmail,\n pepIconSystemLink,\n pepIconSystemFullScreen,\n pepIconSystemEdit,\n pepIconTimeDatetime,\n pepIconTimeCal,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/textbox-icon\n /\nexport from './textbox-icon.module';\nexport * from './textbox-icon.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i4","i1"],"mappings":"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"}

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

@@ -14,7 +14,7 @@ import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1 from '@pepperi-addons/ngx-lib';
-import { DEFAULT_HORIZONTAL_ALIGNMENT, PepTextboxField, PepCustomizationService, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { DEFAULT_HORIZONTAL_ALIGNMENT, PepTextboxField, PepCustomizationService, PepToNumberPipe, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i1$1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconSystemEdit, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 import * as i11 from '@pepperi-addons/ngx-lib/textbox-icon';
@@ -78,12 +78,10 @@ class PepTextboxValidationDirective {
         }
     }
     validateValue(value) {
-        console.log(`validateValue start value is - ${value}`);
         if (this.isNumber()) {
             const newValue = this.validatorService.validateNumber(value, this.isDecimal());
-            console.log(`after validateNumber newValue is - ${newValue}`);
             // Always set to the value input number with '.' decomal separator.
-            this.hostElement.nativeElement['value'] = newValue ? this.utilitiesService.changeDecimalSeparatorWhenItsComma(newValue) : 0;
+            this.hostElement.nativeElement['value'] = newValue ? this.utilitiesService.changeDecimalSeparatorWhenItsComma(newValue) : '';
         }
         else if (this.isPhone()) {
             // test phone with regular expression, when
@@ -214,8 +212,8 @@ class PepTextboxComponent {
         this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
         this.rowSpan = 1;
         // @Input() lastFocusField: any;
-        this.minValue = NaN;
-        this.maxValue = NaN;
+        this._minValue = NaN;
+        this._maxValue = NaN;
         this._visible = true;
         this.form = null;
         this.isActive = false;
@@ -234,9 +232,10 @@ class PepTextboxComponent {
          * @memberof PepTextboxComponent
          */
         this.valueChange = new EventEmitter();
+        this.keyup = new EventEmitter();
         // @Output()
         // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-        this.keyup = new EventEmitter();
+        this.validationChange = new EventEmitter();
         this._calculateFormattedValue = true;
         this.controlType = 'textbox';
         this.standAlone = false;
@@ -268,6 +267,12 @@ class PepTextboxComponent {
         if (!value) {
             value = '';
         }
+        // else {
+        //     // If this is a number validate it.
+        //     if (this.isNumberType()) {
+        //         value = coerceNumberProperty(value, 0).toString();
+        //     }
+        // }
         if (this.isDifferentValue(value)) {
             // console.log(`set value, value is - ${value}`)
             this._value = value;
@@ -319,6 +324,18 @@ class PepTextboxComponent {
     get mandatory() {
         return this._mandatory;
     }
+    set minValue(value) {
+        this._minValue = coerceNumberProperty(value);
+    }
+    get minValue() {
+        return this._minValue;
+    }
+    set maxValue(value) {
+        this._maxValue = coerceNumberProperty(value);
+    }
+    get maxValue() {
+        return this._maxValue;
+    }
     set visible(visible) {
         this._visible = visible;
         if (visible) {
@@ -372,7 +389,7 @@ class PepTextboxComponent {
         if (this.isInFocus) {
             return;
         }
-        if (this._calculateFormattedValue) {
+        if (this._calculateFormattedValue && this.value?.length > 0) {
             // console.log(`setFormattedValue before - value is ${value}`);
             if (this.type === 'currency') {
                 this.formattedValue = this.utilitiesService.formatCurrency(value, this.accessory, this.minFractionDigits, this.maxFractionDigits);
@@ -402,7 +419,13 @@ class PepTextboxComponent {
     updateFormFieldValue(firstLoad = false) {
         // Set the formatted value only for the first load cause it's not formatted if we set the value (I don't know why)
         // Else we set the value - this is important to set the value only cause setting the formatted value will cause bug when the number is with thousand separator
-        this.customizationService.updateFormFieldValue(this.form, this.key, firstLoad ? this.formattedValue : this.value, this.parentFieldKey);
+        this.customizationService.updateFormFieldValue(this.form, this.key, this.value || this.formattedValue, this.parentFieldKey);
+        // Raise this only for stand alone fields, If false then the usage for this field is inside a form.
+        // Then the form will take care of raising the (onFormValidationChanged) event
+        if (this.standAlone) {
+            const isValid = (this.disabled || this.readonly) ? true : this.form.valid;
+            this.validationChange.emit(isValid);
+        }
     }
     changeDisplayValue() {
         let res = '';
@@ -486,6 +509,54 @@ class PepTextboxComponent {
             }
         }, 0);
     }
+    getGeneralError() {
+        return this.translate.instant('MESSAGES.ERROR_IS_NOT_VALID', { field: this.label });
+    }
+    // getOtherErrorMessage(inputValue: string) {
+    //     if (this.isNumberType()) {
+    //         if (this.type === 'percentage') {
+    //             inputValue = inputValue.replace('%', '');
+    //         } else if (this.accessory?.length > 0) {
+    //             inputValue = inputValue.replace(this.accessory, '');
+    //         }
+    //         const numberValue = new PepToNumberPipe(this.utilitiesService).transform(inputValue);
+    //         return (this.maxValue && numberValue > this.maxValue) || (this.minValue && numberValue < this.minValue) ?
+    //             this.translate.instant('MESSAGES.ERROR_RANGE_IS_NOT_VALID', { min: this.minValue, max: this.maxValue }) :
+    //             this.getGeneralError();
+    //     } else {
+    //         this.getGeneralError();
+    //     }
+    // }
+    getOtherErrorMessage(inputValue) {
+        if (this.isNumberType()) {
+            if (this.type === 'percentage') {
+                inputValue = inputValue.replace('%', '');
+            }
+            else if (this.accessory?.length > 0) {
+                inputValue = inputValue.replace(this.accessory, '');
+            }
+            const toNumberPipeService = new PepToNumberPipe(this.utilitiesService);
+            const numberValue = toNumberPipeService.transform(inputValue);
+            const minSet = this.minValue !== null && this.minValue !== undefined && !isNaN(this.minValue);
+            const maxSet = this.maxValue !== null && this.maxValue !== undefined && !isNaN(this.maxValue);
+            if (minSet && !maxSet && numberValue < this.minValue) {
+                return this.translate.instant('MESSAGES.ERROR_GREATER_THAN_MIN', { min: this.minValue });
+            }
+            if (!minSet && maxSet && numberValue > this.maxValue) {
+                return this.translate.instant('MESSAGES.ERROR_LESS_THAN_MAX', { max: this.maxValue });
+            }
+            if (minSet && maxSet && (numberValue < this.minValue || numberValue > this.maxValue)) {
+                return this.translate.instant('MESSAGES.ERROR_BETWEEN_MIN_MAX', { min: this.minValue, max: this.maxValue });
+            }
+            if (isNaN(numberValue)) {
+                return this.getGeneralError();
+            }
+            return '';
+        }
+        else {
+            return this.getGeneralError();
+        }
+    }
     isDecimal() {
         let res = false;
         if (this.isNumberType()) {
@@ -555,7 +626,7 @@ class PepTextboxComponent {
     }
     onBlur(e) {
         const value = e.target ? e.target.value : e;
-        // If renderError is false and the new value is not valid.
+        // If renderError is false and the new value is not valid return value back.
         if (!this.renderError && !this.isValueValid(value)) {
             this.renderer.setProperty(this.input.nativeElement, 'value', this.valueAsCurrentCulture);
         }
@@ -598,10 +669,10 @@ class PepTextboxComponent {
     }
 }
 PepTextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxComponent, deps: [{ token: i1.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TranslateService }, { token: i1.PepUtilitiesService }], target: i0.ɵɵFactoryTarget.Component });
-PepTextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxComponent, selector: "pep-textbox", inputs: { key: "key", value: "value", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", accessory: "accessory", label: "label", placeholder: "placeholder", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", hint: "hint", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", minValue: "minValue", maxValue: "maxValue", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType", parentFieldKey: "parentFieldKey", regex: "regex", regexError: "regexError", isInFocus: "isInFocus" }, outputs: { valueChange: "valueChange", keyup: "keyup" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "directive", type: PepTextboxValidationDirective, selector: "[pepTextboxValidation]", inputs: ["type"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.PepToNumberPipe, name: "pepToNumber" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepTextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextboxComponent, selector: "pep-textbox", inputs: { key: "key", value: "value", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", accessory: "accessory", label: "label", placeholder: "placeholder", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", hint: "hint", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", minValue: "minValue", maxValue: "maxValue", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", renderError: "renderError", renderSymbol: "renderSymbol", layoutType: "layoutType", parentFieldKey: "parentFieldKey", regex: "regex", regexError: "regexError", isInFocus: "isInFocus" }, outputs: { valueChange: "valueChange", keyup: "keyup", validationChange: "validationChange" }, host: { properties: { "attr.data-qa": "this.dataQa" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->   \n            <span *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm\"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" #errSpan [innerText]=\"getOtherErrorMessage(input.value)\" [title]=\"errSpan.innerText\" ></span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i11.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "directive", type: PepTextboxValidationDirective, selector: "[pepTextboxValidation]", inputs: ["type"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-textbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->\n            <span\n                *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm \"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" [title]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\" [innerText]=\"(input.value | pepToNumber) > this.maxValue || (input.value | pepToNumber) < this.minValue ?\n                            ('MESSAGES.ERROR_RANGE_IS_NOT_VALID' | translate: { min: minValue, max: maxValue }) :\n                            ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\">\n                        </span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"] }]
+            args: [{ selector: 'pep-textbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\" let-hasParent=\"hasParent\">\n        <pep-field-title *ngIf=\"renderTitle && isFormView && !hasParent\" [label]=\"label\" [mandatory]=\"mandatory\"\n            [disabled]=\"disabled\" [maxFieldCharacters]=\"maxFieldCharacters\" [hint]=\"hint\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n        </pep-field-title>\n        <mat-form-field appearance=\"outline\">\n            <!-- (click)=\"$event.target.select()\" -->\n            <input #input matInput pepTextboxValidation [formControlName]=\"key\" [id]=\"key\"\n                [name]=\"key\" class=\" body-sm \" autocomplete=\"off\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [placeholder]=\"hasParent && !disabled ? placeholder : ''\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                title=\"{{ formattedValue }}\" [type]=\"type\"  [value]=\"displayValue$ | async\"\n                (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event);\" (blur)=\"onBlur($event)\"\n                (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                [ngClass]=\"{'disable-hidden': disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')}\" />\n<!-- [attr.inputmode]=\"inputMode\" -->   \n            <span *ngIf=\"disabled && formattedValue?.length > 0 && (type === 'phone' || type === 'email' || type === 'link')\"\n                class=\"dis-grid\">\n                <a href=\"javascript:void(0)\" (click)=\"anchorClicked()\" [id]=\"key\" [name]=\"key\"\n                    class=\"color-link body-sm\"> {{formattedValue}}</a>\n            </span>\n            <mat-error *ngIf=\"renderError\">               \n                <ng-container *ngIf=\"mandatory && input.value.length == 0 then requiredError else otherErrorContainer\">\n                </ng-container>\n                <ng-template #requiredError>\n                    <span class=\"body-xs\" [title]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\"\n                        [innerText]=\"('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label })\">\n                    </span>\n                </ng-template>\n                <ng-template #otherErrorContainer>\n                    <ng-template *ngIf=\"regex && form?.get(key)?.errors?.pattern then patternError else otherError\"></ng-template>\n                    <ng-template #patternError>\n                        <span class=\"body-xs\">\n                            {{ regexError }}\n                        </span>\n                    </ng-template>\n                    <ng-template #otherError>\n                        <span class=\"body-xs\" #errSpan [innerText]=\"getOtherErrorMessage(input.value)\" [title]=\"errSpan.innerText\" ></span>\n                    </ng-template>\n                </ng-template>\n            </mat-error>          \n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && isFormView && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\">\n            </pep-textbox-icon>\n        </mat-form-field>\n    </ng-template>     \n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngIf=\"parentFieldKey; then groupedBlock; else regularBlock\"></ng-container>\n        <ng-template #regularBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #groupedBlock>\n            <ng-container [formGroupName]=\"parentFieldKey\">\n                <mat-form-field appearance=\"outline\">\n                    <!-- (click)=\"$event.target.select()\" -->\n                    <input pepTextboxValidation [id]=\"key\" [name]=\"key\" class=\" body-sm \" matInput autocomplete=\"off\" \n                        [placeholder]=\"!disabled ? placeholder : ''\" title=\"{{ formattedValue }}\"\n                        [formControlName]=\"key\" [value]=\"value\" \n                        (blur)=\"onBlur($event)\" (change)=\"onChange($event)\" (keyup)=\"onKeyup($event)\"\n                        (keyup.enter)=\"$event?.currentTarget?.blur()\" (focus)=\"onFocus($event)\" />\n                </mat-form-field>\n                <!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true, hasParent: true }\"></ng-container> -->\n            </ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n                </ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\" [ngStyle]=\"{ color: textColor }\"\n                [class]=\"'text-align-' + xAlignment\" [ngClass]=\"{'one-row': rowSpan === 1,\n                            'multi-rows': rowSpan > 1,\n                            'pep-button weak': isActive && !disabled}\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\"\n                    [ngClass]=\"{'multi-rows-text': rowSpan > 1}\" [ngStyle]=\"{ '-webkit-line-clamp': rowSpan }\">{{\n                    formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n            </ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchCase=\"'link'\">\n                        <a [id]=\"key\" class=\"color-link body-sm pep-report-input\"\n                            [ngClass]=\"{'disable': (disabled && value === '')}\" *ngIf=\"formattedValue != null\"\n                            title=\"{{ formattedValue }}\" target=\"_blank\" href=\"{{ value ? value : formattedValue }}\">{{\n                            formattedValue }}</a>\n                    </ng-container>\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{'readonly': disabled}\"\n                            title=\"{{ formattedValue }}\" [ngStyle]=\"{ color: textColor }\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center;align-items:baseline}.disable-hidden{display:none}.dis-grid{display:grid}.multi-rows-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PepCustomizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.TranslateService }, { type: i1.PepUtilitiesService }]; }, propDecorators: { dataQa: [{
                 type: HostBinding,
                 args: ['attr.data-qa']
@@ -667,6 +738,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], keyup: [{
                 type: Output
+            }], validationChange: [{
+                type: Output
             }], input: [{
                 type: ViewChild,
                 args: ['input']