npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.59-query-builder.7 → 0.2.61 - Mend

@pepperi-addons/ngx-lib 0.2.59-query-builder.7 → 0.2.61

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 (521) hide show

package/bundles/pepperi-addons-ngx-lib-files-uploader.umd.js CHANGED Viewed

@@ -182,7 +182,7 @@
     PepFilesUploaderComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-files-uploader',
-                    template: "<ng-template #pepTemplate>\r\n    <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\r\n        <div class=\"pep-file-wrapper\">\r\n            <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{\r\n                    'one-row': rowSpan == 1,\r\n                    disable: disabled\r\n                }\">\r\n                <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n                <ng-template #withImg>\r\n                    <button *ngIf=\"!disabled\" mat-button (click)=\"deleteFile()\"\r\n                        class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\r\n                        [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n                        <mat-icon>\r\n                            <pep-icon name=\"system_bin\"></pep-icon>\r\n                        </mat-icon>\r\n                    </button>\r\n                    <div class=\"pep-file-preview\" (click)=\"onElementClicked($event)\">\r\n                        <img *ngIf=\"controlType === 'image'\" #imagePreview [src]=\"src\" class=\"pep-file-preview-img\"\r\n                            [style.max-height]=\"fieldHeight\" (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n                            [ngClass]=\"['text-align-' + xAlignment]\" />\r\n                        <div *ngIf=\"controlType === 'attachment'\" class=\"ellipsis pep-file-message\">\r\n                            <a *ngIf=\"src != ''\" href=\"javascript:void(0)\">\r\n                                <mat-icon class=\"pep-spacing-element\">\r\n                                    <pep-icon name=\"system_attach\"></pep-icon>\r\n                                </mat-icon>\r\n                                <span class=\"body-sm ellipsis\">{{ 'FILE.SEE_ORIGINAL' | translate }}</span>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noImg>\r\n                    <div class=\"ellipsis pep-file-message\">\r\n                        <mat-icon *ngIf=\"controlType === 'attachment'\" class=\"pep-spacing-element\">\r\n                            <pep-icon name=\"system_attach\"></pep-icon>\r\n                        </mat-icon>\r\n                        <mat-icon *ngIf=\"controlType === 'image'\" class=\"pep-spacing-element\">\r\n                            <pep-icon name=\"system_file_upload_cloud\"></pep-icon>\r\n                        </mat-icon>\r\n                        <span class=\"body-sm ellipsis\" *ngIf=\"progress == 0\">\r\n                            {{ (disabled ? (controlType === 'image' ? 'MESSAGES.INFO_MISSING_IMAGE' :\r\n                            'MESSAGES.INFO_MISSING_FILE') : 'FILE.HINT') | translate }}\r\n                        </span>\r\n                        <!-- <p *ngIf=\"progress != 0\" class=\"pull-left flip\"\r\n                            [ngClass]=\"{ 'pull-left flip': rowSpan == 1, image: controlType == 'image', attachment: controlType == 'attachment' }\">\r\n                            {{ 'FILE.UPLOADING_FILE' | translate }}\r\n                        </p> -->\r\n                    </div>\r\n                    <ng-container *ngIf=\"!disabled\">\r\n                        <input #fileInput id=\"pep-file-{{ key }}\" tabindex=\"-1\" type=\"file\" accept=\"acceptedExtensions\"\r\n                            ng2FileSelect [uploader]=\"uploader\" autocomplete=\"off\" />\r\n                        <button *ngIf=\"progress != 0\" mat-button class=\"pep-button icon-button weak md delete\"\r\n                            [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n                            <mat-icon>\r\n                                <pep-icon name=\"system_processing\" [spin]=\"true\">\r\n                                </pep-icon>\r\n                            </mat-icon>\r\n                        </button>\r\n                    </ng-container>\r\n                </ng-template>\r\n            </div>\r\n            <input [id]=\"key\" matInput [name]=\"key\" [formControlName]=\"key\" class=\"hidden-input\" type=\"text\"\r\n                [value]=\"src\" (click)=\"onClick_ChooseFile($event)\" (keypress)=\"onKeyPress_ChooseFile($event)\"\r\n                autocomplete=\"off\" />\r\n        </div>\r\n\r\n        <mat-error><span class=\"body-xs\"\r\n                [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\r\n                [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\r\n        </mat-error>\r\n    </mat-form-field>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"layoutType === 'form'\">\r\n    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'card'\">\r\n    <!-- <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container> -->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'table'\">\r\n    <!-- <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container> -->\r\n</ng-container>",
+                    template: "<ng-template #pepTemplate>\n    <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\n        <div class=\"pep-file-wrapper\">\n            <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{\n                    'one-row': rowSpan == 1,\n                    disable: disabled\n                }\">\n                <ng-container *ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n                <ng-template #withImg>\n                    <button *ngIf=\"!disabled\" mat-button (click)=\"deleteFile()\"\n                        class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\n                        [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n                        <mat-icon>\n                            <pep-icon name=\"system_bin\"></pep-icon>\n                        </mat-icon>\n                    </button>\n                    <div class=\"pep-file-preview\" (click)=\"onElementClicked($event)\">\n                        <img *ngIf=\"controlType === 'image'\" #imagePreview [src]=\"src\" class=\"pep-file-preview-img\"\n                            [style.max-height]=\"fieldHeight\" (error)=\"errorHandler($event)\" [alt]=\"label\"\n                            [ngClass]=\"['text-align-' + xAlignment]\" />\n                        <div *ngIf=\"controlType === 'attachment'\" class=\"ellipsis pep-file-message\">\n                            <a *ngIf=\"src != ''\" href=\"javascript:void(0)\">\n                                <mat-icon class=\"pep-spacing-element\">\n                                    <pep-icon name=\"system_attach\"></pep-icon>\n                                </mat-icon>\n                                <span class=\"body-sm ellipsis\">{{ 'FILE.SEE_ORIGINAL' | translate }}</span>\n                            </a>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noImg>\n                    <div class=\"ellipsis pep-file-message\">\n                        <mat-icon *ngIf=\"controlType === 'attachment'\" class=\"pep-spacing-element\">\n                            <pep-icon name=\"system_attach\"></pep-icon>\n                        </mat-icon>\n                        <mat-icon *ngIf=\"controlType === 'image'\" class=\"pep-spacing-element\">\n                            <pep-icon name=\"system_file_upload_cloud\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" *ngIf=\"progress == 0\">\n                            {{ (disabled ? (controlType === 'image' ? 'MESSAGES.INFO_MISSING_IMAGE' :\n                            'MESSAGES.INFO_MISSING_FILE') : 'FILE.HINT') | translate }}\n                        </span>\n                        <!-- <p *ngIf=\"progress != 0\" class=\"pull-left flip\"\n                            [ngClass]=\"{ 'pull-left flip': rowSpan == 1, image: controlType == 'image', attachment: controlType == 'attachment' }\">\n                            {{ 'FILE.UPLOADING_FILE' | translate }}\n                        </p> -->\n                    </div>\n                    <ng-container *ngIf=\"!disabled\">\n                        <input #fileInput id=\"pep-file-{{ key }}\" tabindex=\"-1\" type=\"file\" accept=\"acceptedExtensions\"\n                            ng2FileSelect [uploader]=\"uploader\" autocomplete=\"off\" />\n                        <button *ngIf=\"progress != 0\" mat-button class=\"pep-button icon-button weak md delete\"\n                            [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n                            <mat-icon>\n                                <pep-icon name=\"system_processing\" [spin]=\"true\">\n                                </pep-icon>\n                            </mat-icon>\n                        </button>\n                    </ng-container>\n                </ng-template>\n            </div>\n            <input [id]=\"key\" matInput [name]=\"key\" [formControlName]=\"key\" class=\"hidden-input\" type=\"text\"\n                [value]=\"src\" (click)=\"onClick_ChooseFile($event)\" (keypress)=\"onKeyPress_ChooseFile($event)\"\n                autocomplete=\"off\" />\n        </div>\n\n        <mat-error><span class=\"body-xs\"\n                [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                [innerText]=\"mandatory && src.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</ng-template>\n\n<ng-container *ngIf=\"layoutType === 'form'\">\n    <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <!-- <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container> -->\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <!-- <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container> -->\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:grid;height:inherit}"]
                 },] },

package/bundles/pepperi-addons-ngx-lib-files-uploader.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-files-uploader.umd.js","sources":["../../../projects/ngx-lib/files-uploader/files-uploader.component.ts","../../../projects/ngx-lib/files-uploader/files-uploader.module.ts","../../../projects/ngx-lib/files-uploader/public-api.ts","../../../projects/ngx-lib/files-uploader/pepperi-addons-ngx-lib-files-uploader.ts"],"sourcesContent":["import { Observable } from 'rxjs';\r\nimport {\r\n Component,\r\n OnInit,\r\n Injectable,\r\n Input,\r\n Output,\r\n EventEmitter,\r\n ViewChild,\r\n ChangeDetectorRef,\r\n ChangeDetectionStrategy,\r\n Optional,\r\n} from '@angular/core';\r\nimport { TranslateService } from '@ngx-translate/core';\r\nimport { FileUploader } from 'ng2-file-upload';\r\nimport { FormGroup } from '@angular/forms';\r\nimport {\r\n PepFileService,\r\n PepLayoutType,\r\n PepCustomizationService,\r\n PepHorizontalAlignment,\r\n DEFAULT_HORIZONTAL_ALIGNMENT,\r\n IPepFieldClickEvent,\r\n} from '@pepperi-addons/ngx-lib';\r\nimport {\r\n PepDialogService,\r\n PepDialogData,\r\n} from '@pepperi-addons/ngx-lib/dialog';\r\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\r\n\r\nexport interface IPepFileChangeEvent {\r\n acceptedExtensions?: string;\r\n fileStr?: string;\r\n fileName?: string;\r\n fileExt?: string;\r\n}\r\n\r\n@Component({\r\n selector: 'pep-files-uploader',\r\n templateUrl: './files-uploader.component.html',\r\n styleUrls: ['./files-uploader.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\n@Injectable()\r\nexport class PepFilesUploaderComponent implements OnInit {\r\n @Input() key = '';\r\n @Input() src = '';\r\n @Input() label = '';\r\n @Input() mandatory = false;\r\n @Input() disabled = false;\r\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\r\n\r\n private _rowSpan = 1;\r\n @Input()\r\n set rowSpan(value) {\r\n this._rowSpan = value;\r\n }\r\n get rowSpan(): number {\r\n return this._rowSpan;\r\n }\r\n\r\n @Input() controlType = '';\r\n @Input() sizeLimitMB = 5;\r\n\r\n @Input() form: FormGroup;\r\n @Input() standAlone = false;\r\n @Input() acceptedExtensions = 'bmp,jpg,jpeg,png,gif,ico,svg,html,css';\r\n @Input() layoutType: PepLayoutType = 'form';\r\n\r\n @Output()\r\n fileChange: EventEmitter<IPepFileChangeEvent> = new EventEmitter<IPepFileChangeEvent>();\r\n @Output()\r\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\r\n\r\n @ViewChild('fileInput') fileInput: any;\r\n @ViewChild('imagePreview') imagePreview: any;\r\n\r\n @Input() fieldHeight = '';\r\n\r\n // multiple = false;\r\n uploader: FileUploader;\r\n progress = 0;\r\n // response: string;\r\n intervalID: any = null;\r\n\r\n constructor(\r\n private dialogService: PepDialogService,\r\n private customizationService: PepCustomizationService,\r\n private fileService: PepFileService,\r\n private translate: TranslateService\r\n ) {\r\n this.uploader = new FileUploader({ removeAfterUpload: true });\r\n\r\n this.uploader.onAfterAddingFile = (item) => {\r\n if (this.fileInput?.nativeElement) {\r\n this.fileInput.nativeElement.value = '';\r\n }\r\n const reader = new FileReader();\r\n\r\n reader.onload = (event: any) => {\r\n const fileNameArray = item._file.name.split('.');\r\n const fileName = fileNameArray[0];\r\n const fileExt = fileNameArray[1]; // item._file.name.split('.').pop();\r\n const target = event.target \|\| event.srcElement;\r\n const fileStr = target.result;\r\n const errorMsg = this.isValidFile(\r\n fileStr,\r\n fileExt,\r\n this.acceptedExtensions,\r\n this.sizeLimitMB\r\n );\r\n if (errorMsg === '') {\r\n this.src = fileStr;\r\n // this.setIntervalX(25, 75);\r\n // this.setProgress(5);\r\n this.fileChange.emit({\r\n acceptedExtensions: this.acceptedExtensions,\r\n fileStr,\r\n fileName,\r\n fileExt,\r\n });\r\n } else {\r\n const title = this.translate.instant(\r\n 'MESSAGES.TITLE_NOTICE'\r\n );\r\n const data = new PepDialogData({\r\n title,\r\n content: errorMsg,\r\n });\r\n this.dialogService.openDefaultDialog(data);\r\n }\r\n };\r\n reader.readAsDataURL(item._file);\r\n };\r\n }\r\n\r\n ngOnInit(): void {\r\n /this.uploader.onCompleteAll = () => {\r\n this.fileInput.nativeElement.value = '';\r\n }/\r\n }\r\n\r\n isValidFile(\r\n fileStr,\r\n fileExtension,\r\n acceptedExtensions,\r\n sizeLimitMB = 5\r\n ): string {\r\n const file: any = fileStr;\r\n let fileSize = 0;\r\n let content = '';\r\n // check if got file as Base64\r\n if (typeof fileStr === 'string' && fileStr.indexOf('data:') > -1) {\r\n fileSize = this.getBase64FileSize(fileStr);\r\n } else {\r\n fileSize = file.size;\r\n }\r\n // check the size and the extension\r\n const sizeOK: boolean =\r\n fileSize !== -1 && file != null && fileSize < sizeLimitMB * 1048576;\r\n const extensionOK =\r\n acceptedExtensions === '' \|\|\r\n acceptedExtensions.indexOf(fileExtension.toLowerCase()) !== -1;\r\n if (!extensionOK) {\r\n content = this.translate.instant(\r\n 'MESSAGES.ERROR_FAILD_TO_LOAD_EXTENSION',\r\n {\r\n fileExtension:\r\n \"<label class='uppercase bold'>\" +\r\n fileExtension +\r\n '</label>',\r\n }\r\n );\r\n } else if (!sizeOK) {\r\n content = this.translate.instant(\r\n 'MESSAGES.ERROR_FAILD_TO_LOAD_SIZE',\r\n {\r\n fileSize:\r\n \"<label class='uppercase bold'>\" +\r\n sizeLimitMB.toString() +\r\n '</label>',\r\n }\r\n );\r\n }\r\n return content;\r\n }\r\n\r\n getBase64FileSize(base64String: string): number {\r\n let fileSize: number;\r\n\r\n try {\r\n base64String = base64String.substr(base64String.indexOf(',') + 1);\r\n fileSize = atob(base64String).length;\r\n } catch (e) {\r\n fileSize = -1;\r\n }\r\n\r\n return fileSize; // return size in bytes;\r\n }\r\n\r\n // setIntervalX(delay, repetitions): void {\r\n // let x = 0;\r\n // this.intervalID = window.setInterval(() => {\r\n // // this.setProgress(this.progress + 5);\r\n // if (++x === repetitions \|\| this.uploader.progress >= 100) {\r\n // window.clearInterval(this.intervalID);\r\n // }\r\n // }, delay);\r\n // }\r\n\r\n errorHandler(event): void {\r\n event.target.src = this.fileService.getSvgAsImageSrc(\r\n pepIconNoImage2.data\r\n );\r\n event.target.title = this.translate.instant('IMAGE.NO_IMAGE');\r\n }\r\n\r\n private setProgress(progress): void {\r\n this.progress = progress;\r\n this.uploader.progress = progress;\r\n }\r\n\r\n deleteFile(): void {\r\n this.uploader.clearQueue();\r\n window.clearInterval(this.intervalID);\r\n this.setProgress(0);\r\n\r\n const empltValue = '';\r\n this.src = empltValue;\r\n\r\n this.fileChange.emit(null);\r\n\r\n // this.fileChange.emit({\r\n // acceptedExtensions: this.acceptedExtensions,\r\n // fileStr: null,\r\n // fileExt: null,\r\n // });\r\n }\r\n\r\n onElementClicked(event): void {\r\n this.elementClick.emit({\r\n key: this.key,\r\n controlType: this.controlType,\r\n eventWhich: event.which,\r\n });\r\n }\r\n\r\n onClick_ChooseFile(event): void {\r\n if (this.fileInput?.nativeElement) {\r\n this.fileInput.nativeElement.click();\r\n }\r\n }\r\n\r\n onKeyPress_ChooseFile(event): void {\r\n const e = event as KeyboardEvent;\r\n\r\n if ([13, 32].indexOf(e.which) !== -1) {\r\n if (this.fileInput?.nativeElement) {\r\n this.fileInput.nativeElement.click();\r\n }\r\n }\r\n e.preventDefault();\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatIconModule } from '@angular/material/icon';\r\n\r\nimport { FileUploadModule } from 'ng2-file-upload';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport {\r\n PepIconModule,\r\n PepIconRegistry,\r\n pepIconSystemBin,\r\n pepIconSystemAttach,\r\n pepIconSystemFileUploadCloud,\r\n pepIconSystemProcessing,\r\n} from '@pepperi-addons/ngx-lib/icon';\r\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\r\n\r\nimport { PepFilesUploaderComponent } from './files-uploader.component';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n ReactiveFormsModule,\r\n // Material modules,\r\n MatCommonModule,\r\n MatButtonModule,\r\n MatFormFieldModule,\r\n MatInputModule,\r\n MatIconModule,\r\n // External modules\r\n FileUploadModule,\r\n // ngx-lib modules\r\n PepNgxLibModule,\r\n PepIconModule,\r\n PepDialogModule,\r\n ],\r\n exports: [PepFilesUploaderComponent],\r\n declarations: [PepFilesUploaderComponent],\r\n})\r\nexport class PepFilesUploaderModule {\r\n constructor(private pepIconRegistry: PepIconRegistry) {\r\n this.pepIconRegistry.registerIcons([\r\n pepIconSystemBin,\r\n pepIconSystemAttach,\r\n pepIconSystemFileUploadCloud,\r\n pepIconSystemProcessing,\r\n ]);\r\n }\r\n}\r\n","/\r\n Public API Surface of ngx-lib/files-uploader\r\n /\r\nexport from './files-uploader.module';\r\nexport * from './files-uploader.component';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","FileUploader","PepDialogData","pepIconNoImage2","Component","ChangeDetectionStrategy","Injectable","PepDialogService","PepCustomizationService","PepFileService","TranslateService","Input","Output","ViewChild","pepIconSystemBin","pepIconSystemAttach","pepIconSystemFileUploadCloud","pepIconSystemProcessing","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","FileUploadModule","PepNgxLibModule","PepIconModule","PepDialogModule","PepIconRegistry"],"mappings":"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"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-files-uploader.umd.js","sources":["../../../projects/ngx-lib/files-uploader/files-uploader.component.ts","../../../projects/ngx-lib/files-uploader/files-uploader.module.ts","../../../projects/ngx-lib/files-uploader/public-api.ts","../../../projects/ngx-lib/files-uploader/pepperi-addons-ngx-lib-files-uploader.ts"],"sourcesContent":["import { Observable } from 'rxjs';\nimport {\n Component,\n OnInit,\n Injectable,\n Input,\n Output,\n EventEmitter,\n ViewChild,\n ChangeDetectorRef,\n ChangeDetectionStrategy,\n Optional,\n} from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { FileUploader } from 'ng2-file-upload';\nimport { FormGroup } from '@angular/forms';\nimport {\n PepFileService,\n PepLayoutType,\n PepCustomizationService,\n PepHorizontalAlignment,\n DEFAULT_HORIZONTAL_ALIGNMENT,\n IPepFieldClickEvent,\n} from '@pepperi-addons/ngx-lib';\nimport {\n PepDialogService,\n PepDialogData,\n} from '@pepperi-addons/ngx-lib/dialog';\nimport { pepIconNoImage2 } from '@pepperi-addons/ngx-lib/icon';\n\nexport interface IPepFileChangeEvent {\n acceptedExtensions?: string;\n fileStr?: string;\n fileName?: string;\n fileExt?: string;\n}\n\n@Component({\n selector: 'pep-files-uploader',\n templateUrl: './files-uploader.component.html',\n styleUrls: ['./files-uploader.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n@Injectable()\nexport class PepFilesUploaderComponent implements OnInit {\n @Input() key = '';\n @Input() src = '';\n @Input() label = '';\n @Input() mandatory = false;\n @Input() disabled = false;\n @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n\n private _rowSpan = 1;\n @Input()\n set rowSpan(value) {\n this._rowSpan = value;\n }\n get rowSpan(): number {\n return this._rowSpan;\n }\n\n @Input() controlType = '';\n @Input() sizeLimitMB = 5;\n\n @Input() form: FormGroup;\n @Input() standAlone = false;\n @Input() acceptedExtensions = 'bmp,jpg,jpeg,png,gif,ico,svg,html,css';\n @Input() layoutType: PepLayoutType = 'form';\n\n @Output()\n fileChange: EventEmitter<IPepFileChangeEvent> = new EventEmitter<IPepFileChangeEvent>();\n @Output()\n elementClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();\n\n @ViewChild('fileInput') fileInput: any;\n @ViewChild('imagePreview') imagePreview: any;\n\n @Input() fieldHeight = '';\n\n // multiple = false;\n uploader: FileUploader;\n progress = 0;\n // response: string;\n intervalID: any = null;\n\n constructor(\n private dialogService: PepDialogService,\n private customizationService: PepCustomizationService,\n private fileService: PepFileService,\n private translate: TranslateService\n ) {\n this.uploader = new FileUploader({ removeAfterUpload: true });\n\n this.uploader.onAfterAddingFile = (item) => {\n if (this.fileInput?.nativeElement) {\n this.fileInput.nativeElement.value = '';\n }\n const reader = new FileReader();\n\n reader.onload = (event: any) => {\n const fileNameArray = item._file.name.split('.');\n const fileName = fileNameArray[0];\n const fileExt = fileNameArray[1]; // item._file.name.split('.').pop();\n const target = event.target \|\| event.srcElement;\n const fileStr = target.result;\n const errorMsg = this.isValidFile(\n fileStr,\n fileExt,\n this.acceptedExtensions,\n this.sizeLimitMB\n );\n if (errorMsg === '') {\n this.src = fileStr;\n // this.setIntervalX(25, 75);\n // this.setProgress(5);\n this.fileChange.emit({\n acceptedExtensions: this.acceptedExtensions,\n fileStr,\n fileName,\n fileExt,\n });\n } else {\n const title = this.translate.instant(\n 'MESSAGES.TITLE_NOTICE'\n );\n const data = new PepDialogData({\n title,\n content: errorMsg,\n });\n this.dialogService.openDefaultDialog(data);\n }\n };\n reader.readAsDataURL(item._file);\n };\n }\n\n ngOnInit(): void {\n /this.uploader.onCompleteAll = () => {\n this.fileInput.nativeElement.value = '';\n }/\n }\n\n isValidFile(\n fileStr,\n fileExtension,\n acceptedExtensions,\n sizeLimitMB = 5\n ): string {\n const file: any = fileStr;\n let fileSize = 0;\n let content = '';\n // check if got file as Base64\n if (typeof fileStr === 'string' && fileStr.indexOf('data:') > -1) {\n fileSize = this.getBase64FileSize(fileStr);\n } else {\n fileSize = file.size;\n }\n // check the size and the extension\n const sizeOK: boolean =\n fileSize !== -1 && file != null && fileSize < sizeLimitMB * 1048576;\n const extensionOK =\n acceptedExtensions === '' \|\|\n acceptedExtensions.indexOf(fileExtension.toLowerCase()) !== -1;\n if (!extensionOK) {\n content = this.translate.instant(\n 'MESSAGES.ERROR_FAILD_TO_LOAD_EXTENSION',\n {\n fileExtension:\n \"<label class='uppercase bold'>\" +\n fileExtension +\n '</label>',\n }\n );\n } else if (!sizeOK) {\n content = this.translate.instant(\n 'MESSAGES.ERROR_FAILD_TO_LOAD_SIZE',\n {\n fileSize:\n \"<label class='uppercase bold'>\" +\n sizeLimitMB.toString() +\n '</label>',\n }\n );\n }\n return content;\n }\n\n getBase64FileSize(base64String: string): number {\n let fileSize: number;\n\n try {\n base64String = base64String.substr(base64String.indexOf(',') + 1);\n fileSize = atob(base64String).length;\n } catch (e) {\n fileSize = -1;\n }\n\n return fileSize; // return size in bytes;\n }\n\n // setIntervalX(delay, repetitions): void {\n // let x = 0;\n // this.intervalID = window.setInterval(() => {\n // // this.setProgress(this.progress + 5);\n // if (++x === repetitions \|\| this.uploader.progress >= 100) {\n // window.clearInterval(this.intervalID);\n // }\n // }, delay);\n // }\n\n errorHandler(event): void {\n event.target.src = this.fileService.getSvgAsImageSrc(\n pepIconNoImage2.data\n );\n event.target.title = this.translate.instant('IMAGE.NO_IMAGE');\n }\n\n private setProgress(progress): void {\n this.progress = progress;\n this.uploader.progress = progress;\n }\n\n deleteFile(): void {\n this.uploader.clearQueue();\n window.clearInterval(this.intervalID);\n this.setProgress(0);\n\n const empltValue = '';\n this.src = empltValue;\n\n this.fileChange.emit(null);\n\n // this.fileChange.emit({\n // acceptedExtensions: this.acceptedExtensions,\n // fileStr: null,\n // fileExt: null,\n // });\n }\n\n onElementClicked(event): void {\n this.elementClick.emit({\n key: this.key,\n controlType: this.controlType,\n eventWhich: event.which,\n });\n }\n\n onClick_ChooseFile(event): void {\n if (this.fileInput?.nativeElement) {\n this.fileInput.nativeElement.click();\n }\n }\n\n onKeyPress_ChooseFile(event): void {\n const e = event as KeyboardEvent;\n\n if ([13, 32].indexOf(e.which) !== -1) {\n if (this.fileInput?.nativeElement) {\n this.fileInput.nativeElement.click();\n }\n }\n e.preventDefault();\n }\n}\n","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';\n\nimport { FileUploadModule } from 'ng2-file-upload';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemBin,\n pepIconSystemAttach,\n pepIconSystemFileUploadCloud,\n pepIconSystemProcessing,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';\n\nimport { PepFilesUploaderComponent } from './files-uploader.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatFormFieldModule,\n MatInputModule,\n MatIconModule,\n // External modules\n FileUploadModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepIconModule,\n PepDialogModule,\n ],\n exports: [PepFilesUploaderComponent],\n declarations: [PepFilesUploaderComponent],\n})\nexport class PepFilesUploaderModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([\n pepIconSystemBin,\n pepIconSystemAttach,\n pepIconSystemFileUploadCloud,\n pepIconSystemProcessing,\n ]);\n }\n}\n","/\n Public API Surface of ngx-lib/files-uploader\n /\nexport from './files-uploader.module';\nexport * from './files-uploader.component';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","FileUploader","PepDialogData","pepIconNoImage2","Component","ChangeDetectionStrategy","Injectable","PepDialogService","PepCustomizationService","PepFileService","TranslateService","Input","Output","ViewChild","pepIconSystemBin","pepIconSystemAttach","pepIconSystemFileUploadCloud","pepIconSystemProcessing","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatButtonModule","MatFormFieldModule","MatInputModule","MatIconModule","FileUploadModule","PepNgxLibModule","PepIconModule","PepDialogModule","PepIconRegistry"],"mappings":"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"}

package/bundles/pepperi-addons-ngx-lib-form.umd.js CHANGED Viewed

@@ -1593,7 +1593,7 @@
     PepFormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-form',
-                    template: "<fieldset *ngIf=\"form\" [formGroup]=\"form\" [disabled]=\"isLocked\" class=\"pep-form\"\r\n    [ngStyle]=\"{ 'background-color': layoutType == 'card' && data?.BackgroundColor }\">\r\n    <!-- New Form -->\r\n    <mat-grid-list *ngIf=\"layoutType == 'form'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\r\n        [gutterSize]=\"formGutterSize\">\r\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\r\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\r\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\r\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\r\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\r\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\r\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\r\n                (formValidationChange)=\"onFormValidationChanged($event)\">\r\n            </pep-field-generator>\r\n        </mat-grid-tile>\r\n    </mat-grid-list>\r\n\r\n    <!-- Thumbnails -->\r\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\r\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\r\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\r\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\r\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\r\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\r\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\r\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\r\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\r\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\r\n            </pep-field-generator>\r\n        </mat-grid-tile>\r\n    </mat-grid-list>\r\n\r\n    <ng-container *ngIf=\"layoutType == 'table'\">\r\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\r\n        <ng-template #reportBlock>\r\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notReportBlock>\r\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\r\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\r\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\r\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\r\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\r\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\r\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\r\n                    [isActive]=\"isActive\">\r\n                </pep-field-generator>\r\n            </div>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <!------- For testing ------------\r\n    {{ form.value | json }}\r\n    {{ form.valid }}\r\n    ---------------------------------->\r\n</fieldset>\r\n\r\n<ng-template #report>\r\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\r\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\r\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\r\n        <ng-container [ngSwitch]=\"field.controlType\">\r\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\r\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\r\n                (elementClick)=\"onClick($event)\">\r\n            </pep-image>\r\n\r\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\r\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\">\r\n            </pep-signature>\r\n\r\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\r\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\r\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\r\n            </pep-checkbox>\r\n\r\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\r\n            </pep-date>\r\n\r\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\r\n            </pep-internal-button>\r\n\r\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\r\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\">\r\n            </pep-textarea>\r\n\r\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\r\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\r\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\r\n            </pep-quantity-selector>\r\n\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\r\n                </ng-container>\r\n                <ng-template #notEmptyBlock>\r\n                    <ng-container\r\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\r\n                    </ng-container>\r\n                    <ng-template #linkBlock>\r\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\r\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\r\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\r\n                    </ng-template>\r\n                    <ng-template #notLinkBlock>\r\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\r\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\r\n                            field.formattedValue }}</span>\r\n                    </ng-template>\r\n                </ng-template>\r\n                <ng-template #emptyBlock>\r\n                    <span>&nbsp;</span>\r\n                </ng-template>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>",
+                    template: "<fieldset *ngIf=\"form\" [formGroup]=\"form\" [disabled]=\"isLocked\" class=\"pep-form\"\n    [ngStyle]=\"{ 'background-color': layoutType == 'card' && data?.BackgroundColor }\">\n    <!-- New Form -->\n    <mat-grid-list *ngIf=\"layoutType == 'form'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"formGutterSize\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:grid}"]
                 },] }
@@ -1742,7 +1742,7 @@
     PepFieldGeneratorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-field-generator',
-                    template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\r\n\r\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\r\n    </pep-address>\r\n\r\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-attachment>\r\n\r\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\r\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\r\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-checkbox>\r\n\r\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\r\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-date>\r\n\r\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\r\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\r\n    </pep-images-filmstrip>\r\n\r\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\r\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\r\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-image>\r\n\r\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\r\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\r\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\r\n        (elementClick)=\"onClick($event)\">\r\n    </pep-quantity-selector>\r\n\r\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\r\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-rich-html-textarea>\r\n\r\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\r\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\r\n    </pep-select>\r\n\r\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\r\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\r\n    </pep-separator>\r\n\r\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\r\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\r\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\r\n    </pep-signature>\r\n\r\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\r\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\r\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\r\n    </pep-textarea>\r\n\r\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\r\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\r\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\r\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\r\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\r\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\r\n    </pep-textbox>\r\n\r\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\r\n    </pep-indicators>\r\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\r\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\r\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\r\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\r\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\r\n        (valueChange)=\"onValueChanged($event, field)\">\r\n    </pep-internal-button>\r\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\r\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\r\n        (elementClick)=\"onClick($event)\">\r\n    </pep-internal-menu>\r\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\r\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\r\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\r\n    </pep-internal-page>\r\n\r\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\r\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\r\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\r\n    </pep-internal-carusel>\r\n\r\n    <ng-container *ngSwitchCase=\"'placeholder'\">\r\n    </ng-container>\r\n</ng-container>",
+                    template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <pep-address *ngSwitchCase=\"'address'\" [form]=\"form\" [key]=\"field.key\" [formattedValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [groupFields]=\"field.groupFields\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (addressValueChange)=\"onAddressValueChanged($event, field)\">\n    </pep-address>\n\n    <pep-attachment *ngSwitchCase=\"'attachment'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-attachment>\n\n    <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n        [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [placeholder]=\"field.placeholder\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-indicators *ngSwitchCase=\"'indicators'\" [key]=\"field.key\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-indicators>\n    <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\"\n        [referenceObjectInternalType]=\"field.referenceObjectInternalType\" [type]=\"field.type\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (valueChange)=\"onValueChanged($event, field)\">\n    </pep-internal-button>\n    <pep-internal-menu *ngSwitchCase=\"'menu'\" [key]=\"field.key\" [label]=\"field.label\" [disabled]=\"field.disabled\"\n        [xAlignment]=\"field.xAlignment\" [options]=\"field.options\" [layoutType]=\"layoutType\"\n        (elementClick)=\"onClick($event)\">\n    </pep-internal-menu>\n    <pep-internal-page *ngSwitchCase=\"'internalPage'\" [field]=\"field\" [layoutType]=\"layoutType\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-page>\n\n    <pep-internal-carusel *ngSwitchCase=\"'internalCarusel'\" [field]=\"field\"\n        (internalFormFieldClick)=\"onInternalFormFieldClick($event)\"\n        (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\">\n    </pep-internal-carusel>\n\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>",
                     encapsulation: core.ViewEncapsulation.Emulated,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{width:100%;height:100%}"]
@@ -1775,7 +1775,7 @@
     PepIndicatorsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-indicators',
-                    template: "<div class=\"indicators-container\" [ngClass]=\"{ 'is-inside-table': layoutType === 'table' }\">\r\n    <ng-container *ngFor=\"let value of value?.split(';')\">\r\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\" [fill]=\"value\"></pep-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"key != 'ItemIndicatorsWithoutCampaign' && value?.split(';').length < 4\">\r\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\"></pep-icon>\r\n    </ng-container>\r\n</div>",
+                    template: "<div class=\"indicators-container\" [ngClass]=\"{ 'is-inside-table': layoutType === 'table' }\">\n    <ng-container *ngFor=\"let value of value?.split(';')\">\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\" [fill]=\"value\"></pep-icon>\n    </ng-container>\n    <ng-container *ngIf=\"key != 'ItemIndicatorsWithoutCampaign' && value?.split(';').length < 4\">\n        <pep-icon name=\"indicator_dot_placeholder\" class=\"pull-left flip\"></pep-icon>\n    </ng-container>\n</div>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.indicators-container{height:2.5rem}.indicators-container pep-icon{height:1rem;width:1rem;margin:.05rem}.indicators-container.is-inside-table{height:1rem;display:flex;justify-content:center;align-items:center}"]
                 },] }
@@ -1809,7 +1809,7 @@
             this.layoutType = 'form';
             this.elementClick = new core.EventEmitter();
             this.valueChange = new core.EventEmitter();
-            // standAlone = false;
+            this.standAlone = false;
             this.createNewReference = false;
             this.referenceButtons = [
                 {
@@ -1841,23 +1841,20 @@
             configurable: true
         });
         PepInternalButtonComponent.prototype.ngOnInit = function () {
-            // if (this.form === null) {
-            //     this.standAlone = true;
-            //     // this.form = this.customizationService.getDefaultFromGroup(this.key, this.value, this.mandatory, this.readonly, this.disabled);
-            //     const pepField = new PepInternalButtonField({
-            //         key: this.key,
-            //         value: this.value,
-            //         mandatory: this.mandatory,
-            //         readonly: this.readonly,
-            //         disabled: this.disabled,
-            //     });
-            //     this.form = this.customizationService.getDefaultFromGroup(pepField);
-            //     this.formattedValue = this.formattedValue || this.value;
-            //     this.renderer.addClass(
-            //         this.element.nativeElement,
-            //         PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME
-            //     );
-            // }
+            if (this.form === null) {
+                this.standAlone = true;
+                // this.form = this.customizationService.getDefaultFromGroup(this.key, this.value, this.mandatory, this.readonly, this.disabled);
+                var pepField = new ngxLib.PepInternalButtonField({
+                    key: this.key,
+                    value: this.value,
+                    mandatory: this.mandatory,
+                    readonly: this.readonly,
+                    disabled: this.disabled,
+                });
+                this.form = this.customizationService.getDefaultFromGroup(pepField);
+                this.formattedValue = this.formattedValue || this.value;
+                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+            }
         };
         PepInternalButtonComponent.prototype.ngOnChanges = function (changes) {
             if (this.type === 'reference') {
@@ -1925,7 +1922,7 @@
     PepInternalButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-internal-button',
-                    template: "<ng-container [ngSwitch]=\"type\">\r\n    <ng-container *ngSwitchCase=\"'reference'\">\r\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\r\n        <ng-template #formBlock>\r\n            <div class=\"pep-button-container reference-button\">\r\n                <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\r\n                    [showTitle]=\"showTitle\">\r\n                </pep-field-title>\r\n                <ng-container *ngIf=\"createNewReference; then newBlock; else existingBlock\"></ng-container>\r\n                <ng-template #newBlock>\r\n                    <button mat-button [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-button md regular\"\r\n                        (click)=\"onButtonClicked($event)\" [ngClass]=\"{\r\n                            disabled: disabled,\r\n                            'pull-left': xAlignment == 'left',\r\n                            'pull-right': xAlignment == 'right',\r\n                            'center-alignment': xAlignment == 'center'\r\n                        }\">\r\n                        <span class=\"ellipsis pull-left flip button-title-with-icon\">{{ 'ACTIONS.CREATE_NEW' | translate\r\n                            }}</span>\r\n                        <mat-icon class=\"pull-right flip\" pepRtlClass>\r\n                            <pep-icon name=\"number_plus\" (click)=\"onButtonClicked($event)\">\r\n                            </pep-icon>\r\n                        </mat-icon>\r\n                    </button>\r\n                </ng-template>\r\n                <ng-template #existingBlock>\r\n                    <pep-group-buttons [buttons]=\"referenceButtons\" styleType=\"regular\" viewType=\"split\">\r\n                    </pep-group-buttons>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #notFormBlock>\r\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'listofobjects'\">\r\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\r\n        <ng-template #formBlock>\r\n            <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\r\n        </ng-template>\r\n        <ng-template #notFormBlock>\r\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n        </ng-template>\r\n    </ng-container>\r\n\r\n    <ng-container *ngSwitchCase=\"'button'\">\r\n        <ng-container [ngSwitch]=\"key\">\r\n            <ng-container *ngSwitchCase=\"'ObjectMenu'\">\r\n                <span (click)=\"onButtonClicked($event)\" title=\"{{ key }}\">\r\n                    <mat-icon>\r\n                        <pep-icon *ngIf=\"key == 'ObjectMenu'\" name=\"system_menu\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </span>\r\n            </ng-container>\r\n\r\n            <ng-container *ngSwitchCase=\"'Agents' || 'ContactPersons' || 'Buyers'\">\r\n                <ng-container *ngIf=\"layoutType === 'table'; then tableBlock; else nonTableBlock\">\r\n                </ng-container>\r\n                <ng-template #nonTableBlock>\r\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #tableBlock>\r\n                    <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-report-input readonly body-sm\">{{\r\n                        formattedValue }}</span>\r\n                </ng-template>\r\n            </ng-container>\r\n\r\n            <ng-container *ngSwitchDefault>\r\n                <ng-container *ngIf=\"layoutType === 'form'; then buttonBlock; else linkBlock\">\r\n                </ng-container>\r\n\r\n                <ng-template #buttonBlock>\r\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: false}\"></ng-container>\r\n                </ng-template>\r\n                <ng-template #linkBlock>\r\n                    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\r\n                </ng-template>\r\n            </ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n\r\n<ng-template #buttonTemplate let-internal=\"internal\">\r\n    <div class=\"pep-button-container\">\r\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\r\n            [showTitle]=\"showTitle\">\r\n        </pep-field-title>\r\n\r\n        <ng-container *ngIf=\"internal; then internalButtonTemplate; else regularButtonTemplate\"></ng-container>\r\n        <ng-template #regularButtonTemplate>\r\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\r\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"onButtonClicked($event)\"\r\n                [disabled]=\"disabled\"\r\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\r\n                {{ formattedValue }}\r\n            </button>\r\n        </ng-template>\r\n\r\n        <ng-template #internalButtonTemplate>\r\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\r\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"openReferenceObjectInternal($event)\"\r\n                [disabled]=\"disabled\"\r\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\r\n                <ng-container *ngIf=\"formattedValue == '0' || formattedValue == ''; then newBlock; else existingBlock\">\r\n                </ng-container>\r\n                <ng-template #newBlock>\r\n                    <span class=\"pull-left flip button-title-with-icon\">{{ 'LIST.SELECT' | translate }}&nbsp;</span>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"number_plus\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </ng-template>\r\n                <ng-template #existingBlock>\r\n                    <span class=\"pull-left flip button-title-with-icon\">{{ formattedValue }}&nbsp;{{ 'LIST.SELECTED' |\r\n                        translate\r\n                        }}&nbsp;</span>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"system_edit\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </ng-template>\r\n            </button>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #linkTemplate>\r\n    <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n    <ng-template #notEmptyBlock>\r\n        <a href=\"{{ value }}\" (mousedown)=\"hrefFunction($event)\" class=\"color-link\">\r\n            <span *ngIf=\"layoutType === 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\"\r\n                class=\"body-sm pep-report-input readonly\">\r\n                {{ formattedValue }}\r\n            </span>\r\n            <span *ngIf=\"layoutType !== 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm pep-card-input\"\r\n                style=\"display: block;\">\r\n                {{ formattedValue }}\r\n            </span>\r\n        </a>\r\n    </ng-template>\r\n    <ng-template #emptyBlock>\r\n        <span>&nbsp;</span>\r\n    </ng-template>\r\n</ng-template>",
+                    template: "<ng-container [ngSwitch]=\"type\">\n    <ng-container *ngSwitchCase=\"'reference'\">\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\n        <ng-template #formBlock>\n            <div class=\"pep-button-container reference-button\">\n                <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n                    [showTitle]=\"showTitle\">\n                </pep-field-title>\n                <ng-container *ngIf=\"createNewReference; then newBlock; else existingBlock\"></ng-container>\n                <ng-template #newBlock>\n                    <button mat-button [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-button md regular\"\n                        (click)=\"onButtonClicked($event)\" [ngClass]=\"{\n                            disabled: disabled,\n                            'pull-left': xAlignment == 'left',\n                            'pull-right': xAlignment == 'right',\n                            'center-alignment': xAlignment == 'center'\n                        }\">\n                        <span class=\"ellipsis pull-left flip button-title-with-icon\">{{ 'ACTIONS.CREATE_NEW' | translate\n                            }}</span>\n                        <mat-icon class=\"pull-right flip\" pepRtlClass>\n                            <pep-icon name=\"number_plus\" (click)=\"onButtonClicked($event)\">\n                            </pep-icon>\n                        </mat-icon>\n                    </button>\n                </ng-template>\n                <ng-template #existingBlock>\n                    <pep-group-buttons [buttons]=\"referenceButtons\" styleType=\"regular\" viewType=\"split\">\n                    </pep-group-buttons>\n                </ng-template>\n            </div>\n        </ng-template>\n        <ng-template #notFormBlock>\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'listofobjects'\">\n        <ng-container *ngIf=\"layoutType === 'form'; then formBlock; else notFormBlock\"></ng-container>\n        <ng-template #formBlock>\n            <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notFormBlock>\n            <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'button'\">\n        <ng-container [ngSwitch]=\"key\">\n            <ng-container *ngSwitchCase=\"'ObjectMenu'\">\n                <span (click)=\"onButtonClicked($event)\" title=\"{{ key }}\">\n                    <mat-icon>\n                        <pep-icon *ngIf=\"key == 'ObjectMenu'\" name=\"system_menu\">\n                        </pep-icon>\n                    </mat-icon>\n                </span>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"'Agents' || 'ContactPersons' || 'Buyers'\">\n                <ng-container *ngIf=\"layoutType === 'table'; then tableBlock; else nonTableBlock\">\n                </ng-container>\n                <ng-template #nonTableBlock>\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: true}\"></ng-container>\n                </ng-template>\n                <ng-template #tableBlock>\n                    <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"pep-report-input readonly body-sm\">{{\n                        formattedValue }}</span>\n                </ng-template>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"layoutType === 'form'; then buttonBlock; else linkBlock\">\n                </ng-container>\n\n                <ng-template #buttonBlock>\n                    <ng-container *ngTemplateOutlet=\"buttonTemplate; context: {internal: false}\"></ng-container>\n                </ng-template>\n                <ng-template #linkBlock>\n                    <ng-container *ngTemplateOutlet=\"linkTemplate\"></ng-container>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-container>\n\n<ng-template #buttonTemplate let-internal=\"internal\">\n    <div class=\"pep-button-container\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n            [showTitle]=\"showTitle\">\n        </pep-field-title>\n\n        <ng-container *ngIf=\"internal; then internalButtonTemplate; else regularButtonTemplate\"></ng-container>\n        <ng-template #regularButtonTemplate>\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"onButtonClicked($event)\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\n                {{ formattedValue }}\n            </button>\n        </ng-template>\n\n        <ng-template #internalButtonTemplate>\n            <button [id]=\"key\" title=\"{{ formattedValue }}\" mat-button class=\"pep-button md regular\"\n                dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" (click)=\"openReferenceObjectInternal($event)\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{disabled: disabled, 'pull-left': xAlignment == 'left', 'pull-right': xAlignment == 'right', 'center-alignment': xAlignment == 'center'}\">\n                <ng-container *ngIf=\"formattedValue == '0' || formattedValue == ''; then newBlock; else existingBlock\">\n                </ng-container>\n                <ng-template #newBlock>\n                    <span class=\"pull-left flip button-title-with-icon\">{{ 'LIST.SELECT' | translate }}&nbsp;</span>\n                    <mat-icon>\n                        <pep-icon name=\"number_plus\">\n                        </pep-icon>\n                    </mat-icon>\n                </ng-template>\n                <ng-template #existingBlock>\n                    <span class=\"pull-left flip button-title-with-icon\">{{ formattedValue }}&nbsp;{{ 'LIST.SELECTED' |\n                        translate\n                        }}&nbsp;</span>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </ng-template>\n            </button>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #linkTemplate>\n    <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n    <ng-template #notEmptyBlock>\n        <a href=\"{{ value }}\" (mousedown)=\"hrefFunction($event)\" class=\"color-link\">\n            <span *ngIf=\"layoutType === 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\"\n                class=\"body-sm pep-report-input readonly\">\n                {{ formattedValue }}\n            </span>\n            <span *ngIf=\"layoutType !== 'table'\" [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm pep-card-input\"\n                style=\"display: block;\">\n                {{ formattedValue }}\n            </span>\n        </a>\n    </ng-template>\n    <ng-template #emptyBlock>\n        <span>&nbsp;</span>\n    </ng-template>\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button-container,.pepperi-button-container{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.pep-button-container .center-alignment,.pepperi-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pep-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep.split-buttons,.pepperi-button-container.reference-button .split-buttons,.pepperi-button-container.reference-button ::ng-deep.split-buttons{float:left}.pep-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep.split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pepperi-button-container.reference-button ::ng-deep.split-buttons button:last-of-type{width:1.5rem;padding:0}"]
                 },] }
@@ -2428,7 +2425,7 @@
     PepInternalListComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-internal-list',
-                    template: "<ng-container *ngIf=\"totalRows == 0\">\r\n    <div class=\"pep-border-bottom\">\r\n        <p class=\"title-xl no-data\">\r\n            {{ (noDataFoundMsg ? noDataFoundMsg : 'LIST.NO_DATA_FOUND') | translate}}\r\n        </p>\r\n    </div>\r\n    <div class=\"no-data-suggestions\">\r\n        <p class=\"suggestions-title title-lg\">\r\n            {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\r\n        </p>\r\n        <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"totalRows > 0\">\r\n    <div *ngIf=\"isTable\" #tableHeader class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\r\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\r\n        (mousemove)=\"onListResize($event)\">\r\n\r\n        <div class=\"table-header-padding-top\"></div>\r\n        <fieldset class=\"table-header-fieldset\">\r\n            <fieldset>\r\n                <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\r\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\r\n                            'is-resizing': field.ApiName === pressedColumn,\r\n                            'is-first': j === 0,\r\n                            'is-last': j === uiControl?.ControlFields?.length - 1\r\n                        }\">\r\n                    <label *ngIf=\"field.Title != ''\" id=\"{{ field.ApiName }}\"\r\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\r\n                        title=\"{{ field.Title }}\">\r\n                        {{ field.Title }}\r\n                    </label>\r\n                    <label *ngIf=\"field.Title == ''\" id=\"{{ field.ApiName }}\"\r\n                        class=\"header-label body-sm pull-left flip\">&nbsp;</label>\r\n\r\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\r\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\r\n                        <div class=\"splitter\"></div>\r\n                    </div>\r\n                </div>\r\n            </fieldset>\r\n        </fieldset>\r\n    </div>\r\n\r\n    <div #noVirtualScrollCont [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\">\r\n        <ng-container *ngTemplateOutlet=\"listData\"></ng-container>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"listTotals\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #listData>\r\n    <ng-container *ngFor=\"let item of scrollItems; let i = index; let isFirst = first; trackBy: trackByFunc\">\r\n        <ng-container *ngIf=\"isTable\">\r\n            <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\"\r\n                (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\r\n                        selected: getIsItemSelected(item?.UID, item?.Type),\r\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\r\n                    }\"\r\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\r\n                <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\r\n                    <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\r\n                    <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\r\n                        [canEditObject]=\"!disabled\" [objectId]=\"objectId\" [parentId]=\"parentId\"\r\n                        [searchCode]=\"searchCode\" [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'table'\"\r\n                        [isActive]=\"\r\n                                (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\r\n                                item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\r\n                            \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\r\n                        (click)=\"itemClicked($event, item)\">\r\n                    </pep-form>\r\n                </fieldset>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!isTable\">\r\n            <div [class]=\"itemClass\" (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\r\n                (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\r\n                        selected: getIsItemSelected(item?.UID, item?.Type),\r\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\r\n                        'card-view': viewType === 'cards',\r\n                        'line-view': viewType === 'lines'\r\n                    }\" class=\"pull-left flip\"\r\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\r\n                <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\r\n                <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\r\n                    [canEditObject]=\"!disabled\" [objectId]=\" objectId\" [parentId]=\"parentId\" [searchCode]=\"searchCode\"\r\n                    [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'card'\" [isActive]=\"\r\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\r\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\r\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\r\n                    (click)=\"itemClicked($event, item)\">\r\n                </pep-form>\r\n            </div>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #listTotals>\r\n    <div *ngIf=\"totalsRow?.length > 0 && totalsRow.length <= uiControl?.ControlFields.length\" class=\"table-total\">\r\n        <fieldset class=\"table-header-fieldset\">\r\n            <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\r\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\r\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\r\n                    {{ totalsRow[j] }}\r\n                </label>\r\n            </div>\r\n        </fieldset>\r\n    </div>\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"totalRows == 0\">\n    <div class=\"pep-border-bottom\">\n        <p class=\"title-xl no-data\">\n            {{ (noDataFoundMsg ? noDataFoundMsg : 'LIST.NO_DATA_FOUND') | translate}}\n        </p>\n    </div>\n    <div class=\"no-data-suggestions\">\n        <p class=\"suggestions-title title-lg\">\n            {{ 'LIST.NO_DATA_FOUND_SUGGESTIONS_TITLE' | translate}}\n        </p>\n        <ul class=\"suggestions-list body-lg\" [innerHtml]=\"'LIST.NO_DATA_FOUND_SUGGESTIONS_LIST' | translate\"></ul>\n    </div>\n</ng-container>\n<ng-container *ngIf=\"totalRows > 0\">\n    <div *ngIf=\"isTable\" #tableHeader class=\"table-header\" (mouseup)=\"onListResizeEnd($event)\"\n        (mouseenter)=\"onListHeaderMouseEnter($event)\" (mouseleave)=\"onListHeaderMouseLeave($event)\"\n        (mousemove)=\"onListResize($event)\">\n\n        <div class=\"table-header-padding-top\"></div>\n        <fieldset class=\"table-header-fieldset\">\n            <fieldset>\n                <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"header-column pull-left flip\"\n                    [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\" [ngClass]=\"{\n                            'is-resizing': field.ApiName === pressedColumn,\n                            'is-first': j === 0,\n                            'is-last': j === uiControl?.ControlFields?.length - 1\n                        }\">\n                    <label *ngIf=\"field.Title != ''\" id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip text-align-{{ field.Layout.XAlignment }}\"\n                        title=\"{{ field.Title }}\">\n                        {{ field.Title }}\n                    </label>\n                    <label *ngIf=\"field.Title == ''\" id=\"{{ field.ApiName }}\"\n                        class=\"header-label body-sm pull-left flip\">&nbsp;</label>\n\n                    <div *ngIf=\"supportResizing\" class=\"resize-box pull-right flip\"\n                        (mousedown)=\"onListResizeStart($event, field.ApiName)\">\n                        <div class=\"splitter\"></div>\n                    </div>\n                </div>\n            </fieldset>\n        </fieldset>\n    </div>\n\n    <div #noVirtualScrollCont [ngClass]=\"{ 'table-body': isTable, 'cards-body': !isTable }\">\n        <ng-container *ngTemplateOutlet=\"listData\"></ng-container>\n    </div>\n    <ng-container *ngTemplateOutlet=\"listTotals\"></ng-container>\n</ng-container>\n\n<ng-template #listData>\n    <ng-container *ngFor=\"let item of scrollItems; let i = index; let isFirst = first; trackBy: trackByFunc\">\n        <ng-container *ngIf=\"isTable\">\n            <div class=\"table-row\" (mouseenter)=\"onTableRowMouseEnter($event, item?.UID, item?.Type)\"\n                (mouseleave)=\"onTableRowMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                        selected: getIsItemSelected(item?.UID, item?.Type),\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId\n                    }\"\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\n                <fieldset class=\"table-row-fieldset\" [ngStyle]=\"{ 'background-color': item?.BackgroundColor }\">\n                    <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\n                    <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\n                        [canEditObject]=\"!disabled\" [objectId]=\"objectId\" [parentId]=\"parentId\"\n                        [searchCode]=\"searchCode\" [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'table'\"\n                        [isActive]=\"\n                                (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                                item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                            \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                        (click)=\"itemClicked($event, item)\">\n                    </pep-form>\n                </fieldset>\n            </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isTable\">\n            <div [class]=\"itemClass\" (mouseenter)=\"onCardMouseEnter($event, item?.UID, item?.Type)\"\n                (mouseleave)=\"onCardMouseLeave($event, item?.UID, item?.Type)\" [ngClass]=\"{\n                        selected: getIsItemSelected(item?.UID, item?.Type),\n                        highlighted: item?.UID + SEPARATOR + item?.Type === selectedItemId,\n                        'card-view': viewType === 'cards',\n                        'line-view': viewType === 'lines'\n                    }\" class=\"pull-left flip\"\n                [ngStyle]=\"{ height: calculatedObjectHeight, visibility: showItems || item ? 'visible' : 'hidden' }\">\n                <!-- [canEditObject]=\"!disabled && item?.IsEditable\" -->\n                <pep-form [checkForChanges]=\"checkForChanges\" [layout]=\"uiControl\" [data]=\"item\"\n                    [canEditObject]=\"!disabled\" [objectId]=\" objectId\" [parentId]=\"parentId\" [searchCode]=\"searchCode\"\n                    [lockEvents]=\"disableSelectionItems\" [layoutType]=\"'card'\" [isActive]=\"\n                            (item?.UID + SEPARATOR + item?.Type === selectedItemId ||\n                            item?.UID + SEPARATOR + item?.Type === hoveredItemId) && deviceHasMouse\n                        \" (valueChange)=\"onValueChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\"\n                    (click)=\"itemClicked($event, item)\">\n                </pep-form>\n            </div>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #listTotals>\n    <div *ngIf=\"totalsRow?.length > 0 && totalsRow.length <= uiControl?.ControlFields.length\" class=\"table-total\">\n        <fieldset class=\"table-header-fieldset\">\n            <div *ngFor=\"let field of uiControl?.ControlFields; let j = index\" class=\"total-column pull-left flip\"\n                [ngStyle]=\"{ width: field.calcTitleColumnWidthString }\">\n                <label class=\"total-label body-sm text-align-{{ field.Layout.XAlignment }}\">\n                    {{ totalsRow[j] }}\n                </label>\n            </div>\n        </fieldset>\n    </div>\n</ng-template>",
                     host: {
                         '(window:resize)': 'winResize($event)',
                     },
@@ -2499,7 +2496,7 @@
     PepInternalMenuComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-internal-menu',
-                    template: "<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\r\n<ng-template #noSubMenuBlock>\r\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\r\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\r\n            'lock-events': disabled,\r\n            'left-alignment': xAlignment == 'left',\r\n            'right-alignment': xAlignment == 'right',\r\n            'center-alignment': xAlignment == 'center',\r\n            'invert': invertClass\r\n        }\">\r\n        <mat-icon>\r\n            <pep-icon name=\"system_menu\">\r\n            </pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #subMenuBlock>\r\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\r\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\r\n            'left-alignment': xAlignment == 'left',\r\n            'right-alignment': xAlignment == 'right',\r\n            'center-alignment': xAlignment == 'center',\r\n            'invert': invertClass\r\n        }\" title=\"{{ label }}\">\r\n        <mat-icon>\r\n            <pep-icon name=\"system_menu\">\r\n            </pep-icon>\r\n        </mat-icon>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\r\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\r\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\r\n            <span>{{ option.value | translate }}</span>\r\n        </button>\r\n    </mat-menu>\r\n\r\n</ng-template>",
+                    template: "<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\n<ng-template #noSubMenuBlock>\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button,.pepperi-button{cursor:pointer}.pep-button.left-alignment,.pepperi-button.left-alignment{justify-self:flex-start}.pep-button.center-alignment,.pepperi-button.center-alignment{justify-self:center}.pep-button.right-alignment,.pepperi-button.right-alignment{justify-self:flex-end}"]
                 },] }
@@ -3002,7 +2999,7 @@
     PepInternalPageComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-internal-page',
-                    template: "<ng-template #matrixHeaderTemplate>\r\n    <div class=\"matrix-title-container pep-border-bottom align-{{\r\n            field.xAlignment\r\n        }}\" title=\"{{ field.label }}\">\r\n        <span class=\"block-with-text body-md\">{{ field.label }}</span>\r\n\r\n        <div class=\"buttons-container pep-spacing-element-negative pull-right flip\">\r\n            <ng-container *ngIf=\"\r\n                    currentViewType?.Key == 'OrderCenterMatrix' &&\r\n                    additionalApiNames &&\r\n                    additionalApiNames.length > 0\r\n                \">\r\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button [matMenuTriggerFor]=\"menu\"\r\n                    menu-blur>\r\n                    <span class=\"pull-left flip\" *ngIf=\"currentAdditionalApiName\">&nbsp;{{\r\n                        currentAdditionalApiName?.Value }}&nbsp;</span>\r\n\r\n                    <mat-icon [ngClass]=\"{'pull-left flip': currentAdditionalApiName}\">\r\n                        <pep-icon name=\"system_info\"></pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n                <mat-menu #menu=\"matMenu\" xPosition=\"before\">\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected: currentAdditionalApiName === null\r\n                        }\" (click)=\"changeAdditionalApiName(null)\">\r\n                        <span>{{ \"LIST.NONE\" | translate }}</span>\r\n                    </button>\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected:\r\n                                currentAdditionalApiName?.Key ==\r\n                                additionalApiName?.Key\r\n                        }\" *ngFor=\"let additionalApiName of additionalApiNames\"\r\n                        (click)=\"changeAdditionalApiName(additionalApiName)\">\r\n                        <span>{{ additionalApiName.Value }}</span>\r\n                    </button>\r\n                </mat-menu>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"childViewTypes && childViewTypes.length > 1\">\r\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button\r\n                    [matMenuTriggerFor]=\"viewsMenu\" menu-blur>\r\n                    <mat-icon>\r\n                        <pep-icon name=\"view_card_md\"></pep-icon>\r\n                    </mat-icon>\r\n                </button>\r\n\r\n                <mat-menu #viewsMenu=\"matMenu\" xPosition=\"before\">\r\n                    <button mat-menu-item [ngClass]=\"{\r\n                            selected: currentViewType?.Key == viewType?.Key\r\n                        }\" *ngFor=\"let viewType of childViewTypes\" (click)=\"changeChildrenViewType(viewType?.Key)\">\r\n                        <mat-icon [ngSwitch]=\"viewType?.Key\">\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterMatrix'\" name=\"view_matrix\"></pep-icon>\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixGrid'\" name=\"view_table\"></pep-icon>\r\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixLine'\" name=\"view_line\"></pep-icon>\r\n                        </mat-icon>\r\n                        <span>{{ viewType?.Value }}</span>\r\n                    </button>\r\n                </mat-menu>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #matrixTemplate>\r\n    <div #matrixContainer class=\"matrix-container\">\r\n        <pep-internal-list (valueChange)=\"onCustomizeObjectChanged($event)\" [parentScroll]=\"matrixContainer\"\r\n            (fieldClick)=\"onCustomizeFieldClick($event)\" [totalsRow]=\"totalsRow\"></pep-internal-list>\r\n    </div>\r\n</ng-template>\r\n\r\n<div #mainViewCont id=\"mainViewCont\" [ngStyle]=\"{ 'max-width': viewWidth, 'max-height': viewHeight }\">\r\n    <div #my1mm id=\"my1_mm\" style=\"height:1mm;width:1mm;visibility: hidden;\"></div>\r\n    <ng-container *ngIf=\"coverChildTable && uiControl != null\">\r\n        <div class=\"table-cover\"></div>\r\n        <button (click)=\"showMatrixDialog()\" class=\"pep-button strong sm table-cover-button\"\r\n            [ngClass]=\"{ 'lineview-btn': currentViewType?.Key == 'OrderCenterFlatMatrixLine'}\">\r\n            {{ \"INTERNAL_PAGE.CLICK_TO_ORDER\" | translate }}\r\n        </button>\r\n    </ng-container>\r\n\r\n    <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\r\n    <ng-container #orgCont></ng-container>\r\n</div>\r\n\r\n<ng-template #matrixDialogTemplate>\r\n\r\n    <div mat-dialog-title>\r\n        <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\r\n    </div>\r\n\r\n    <div mat-dialog-content>\r\n        <ng-container #dialogCont></ng-container>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- <div id=\"childGridModal\" bsModal (onShown)=\"onShown()\" (onHidden)=\"onHidden()\" #childModal=\"bs-modal\" class=\"modal\"\r\n    tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\" role=\"document\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-body matrix-dialog-body\">\r\n                <ng-container #modalCont></ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div> -->",
+                    template: "<ng-template #matrixHeaderTemplate>\n    <div class=\"matrix-title-container pep-border-bottom align-{{\n            field.xAlignment\n        }}\" title=\"{{ field.label }}\">\n        <span class=\"block-with-text body-md\">{{ field.label }}</span>\n\n        <div class=\"buttons-container pep-spacing-element-negative pull-right flip\">\n            <ng-container *ngIf=\"\n                    currentViewType?.Key == 'OrderCenterMatrix' &&\n                    additionalApiNames &&\n                    additionalApiNames.length > 0\n                \">\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button [matMenuTriggerFor]=\"menu\"\n                    menu-blur>\n                    <span class=\"pull-left flip\" *ngIf=\"currentAdditionalApiName\">&nbsp;{{\n                        currentAdditionalApiName?.Value }}&nbsp;</span>\n\n                    <mat-icon [ngClass]=\"{'pull-left flip': currentAdditionalApiName}\">\n                        <pep-icon name=\"system_info\"></pep-icon>\n                    </mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n                    <button mat-menu-item [ngClass]=\"{\n                            selected: currentAdditionalApiName === null\n                        }\" (click)=\"changeAdditionalApiName(null)\">\n                        <span>{{ \"LIST.NONE\" | translate }}</span>\n                    </button>\n                    <button mat-menu-item [ngClass]=\"{\n                            selected:\n                                currentAdditionalApiName?.Key ==\n                                additionalApiName?.Key\n                        }\" *ngFor=\"let additionalApiName of additionalApiNames\"\n                        (click)=\"changeAdditionalApiName(additionalApiName)\">\n                        <span>{{ additionalApiName.Value }}</span>\n                    </button>\n                </mat-menu>\n            </ng-container>\n            <ng-container *ngIf=\"childViewTypes && childViewTypes.length > 1\">\n                <button class=\"pep-spacing-element pep-button icon-button sm weak\" mat-button\n                    [matMenuTriggerFor]=\"viewsMenu\" menu-blur>\n                    <mat-icon>\n                        <pep-icon name=\"view_card_md\"></pep-icon>\n                    </mat-icon>\n                </button>\n\n                <mat-menu #viewsMenu=\"matMenu\" xPosition=\"before\">\n                    <button mat-menu-item [ngClass]=\"{\n                            selected: currentViewType?.Key == viewType?.Key\n                        }\" *ngFor=\"let viewType of childViewTypes\" (click)=\"changeChildrenViewType(viewType?.Key)\">\n                        <mat-icon [ngSwitch]=\"viewType?.Key\">\n                            <pep-icon *ngSwitchCase=\"'OrderCenterMatrix'\" name=\"view_matrix\"></pep-icon>\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixGrid'\" name=\"view_table\"></pep-icon>\n                            <pep-icon *ngSwitchCase=\"'OrderCenterFlatMatrixLine'\" name=\"view_line\"></pep-icon>\n                        </mat-icon>\n                        <span>{{ viewType?.Value }}</span>\n                    </button>\n                </mat-menu>\n            </ng-container>\n        </div>\n    </div>\n\n</ng-template>\n\n<ng-template #matrixTemplate>\n    <div #matrixContainer class=\"matrix-container\">\n        <pep-internal-list (valueChange)=\"onCustomizeObjectChanged($event)\" [parentScroll]=\"matrixContainer\"\n            (fieldClick)=\"onCustomizeFieldClick($event)\" [totalsRow]=\"totalsRow\"></pep-internal-list>\n    </div>\n</ng-template>\n\n<div #mainViewCont id=\"mainViewCont\" [ngStyle]=\"{ 'max-width': viewWidth, 'max-height': viewHeight }\">\n    <div #my1mm id=\"my1_mm\" style=\"height:1mm;width:1mm;visibility: hidden;\"></div>\n    <ng-container *ngIf=\"coverChildTable && uiControl != null\">\n        <div class=\"table-cover\"></div>\n        <button (click)=\"showMatrixDialog()\" class=\"pep-button strong sm table-cover-button\"\n            [ngClass]=\"{ 'lineview-btn': currentViewType?.Key == 'OrderCenterFlatMatrixLine'}\">\n            {{ \"INTERNAL_PAGE.CLICK_TO_ORDER\" | translate }}\n        </button>\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\n    <ng-container #orgCont></ng-container>\n</div>\n\n<ng-template #matrixDialogTemplate>\n\n    <div mat-dialog-title>\n        <ng-container *ngTemplateOutlet=\"matrixHeaderTemplate\"></ng-container>\n    </div>\n\n    <div mat-dialog-content>\n        <ng-container #dialogCont></ng-container>\n    </div>\n</ng-template>\n\n<!-- <div id=\"childGridModal\" bsModal (onShown)=\"onShown()\" (onHidden)=\"onHidden()\" #childModal=\"bs-modal\" class=\"modal\"\n    tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\">\n    <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body matrix-dialog-body\">\n                <ng-container #modalCont></ng-container>\n            </div>\n        </div>\n    </div>\n</div> -->",
                     providers: [PepInternalPageService],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;height:2.5rem;height:var(--pep-form-field-height,2.5rem);display:flex;align-items:flex-end}.matrix-title-container .block-with-text{width:100%;max-height:inherit;font-weight:600;font-weight:var(--pep-font-weight-bold,600);display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.matrix-title-container .buttons-container{display:flex;align-self:center}.matrix-title-container .buttons-container .pep-button,.matrix-title-container .buttons-container .pepperi-button{width:-webkit-max-content;width:-moz-max-content;width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;padding:0 .25rem;padding:0 var(--pep-spacing-xs,.25rem)}#mainViewCont .table-cover{background-color:#fff;z-index:98;position:absolute;top:0;width:100%;height:inherit;opacity:.5}#mainViewCont .table-cover-button{position:absolute;left:50%;transform:translate(-50%,-50%);top:calc(50% + 2.5rem);top:calc(50% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{top:calc(2 * 2.5rem);top:calc(2 * var(--pep-form-field-height, 2.5rem));transform:translate(-50%)}#mainViewCont .underCover{max-height:inherit;overflow:hidden}#mainViewCont ::ng-deep.table-header{top:unset!important}"]
@@ -3164,7 +3161,7 @@
     PepInternalCaruselComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-internal-carusel',
-                    template: "<div class=\"carousel-container\">\r\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\r\n    <ng-template #emptyBlock>\r\n        <!-- No items -->\r\n    </ng-template>\r\n    <ng-template #carouselBlock>\r\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\"\r\n            [disabled]=\"prevDisabled\" (click)=\"moveLeft()\" class=\"carousel-arrow start-arrow\">\r\n        </pep-button>\r\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\r\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\r\n            <ng-container *ngFor=\"let item of items\">\r\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\r\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\r\n                </pep-form>\r\n            </ng-container>\r\n        </pep-carousel>\r\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\"\r\n            [disabled]=\"nextDisabled\" (click)=\"moveRight()\" class=\"carousel-arrow end-arrow\">\r\n        </pep-button>\r\n    </ng-template>\r\n</div>",
+                    template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"prevDisabled\" (click)=\"moveLeft()\" class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"nextDisabled\" (click)=\"moveRight()\" class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>",
                     providers: [PepInternalCaruselService],
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".carousel-container{position:relative;margin:0;display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep.carousel-content .card-view{padding:.5rem 0!important;padding:var(--pep-spacing-sm,.5rem) 0!important}.carousel-container ::ng-deep.carousel-content .card-view:first-child{-webkit-padding-start:.5rem!important;padding-inline-start:.5rem!important;-webkit-padding-start:var(--pep-spacing-sm,.5rem)!important;padding-inline-start:var(--pep-spacing-sm,.5rem)!important}.carousel-container ::ng-deep.carousel-content .card-view:last-child{-webkit-padding-end:.5rem!important;padding-inline-end:.5rem!important;-webkit-padding-end:var(--pep-spacing-sm,.5rem)!important;padding-inline-end:var(--pep-spacing-sm,.5rem)!important}"]