@pepperi-addons/ngx-lib 0.5.0-ng15.3 → 0.5.0-ng16.2

package/{fesm2020 → fesm2022}/pepperi-addons-ngx-lib-form.mjs

@@ -14,7 +14,7 @@ import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4$2 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import { SignaturePadModule } from 'ngx-signaturepad';
+import { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';
 import * as i1$1 from '@pepperi-addons/ngx-lib';
 import { DEFAULT_HORIZONTAL_ALIGNMENT, X_ALIGNMENT_TYPE, DEFAULT_VERTICAL_ALIGNMENT, Y_ALIGNMENT_TYPE, PepTextboxField, PepSelectField, PepInternalMenuField, FIELD_TYPE, PepQuantitySelectorField, PepSeparatorField, PepInternalButtonField, PepCheckboxField, PepDateField, PepRichHtmlTextareaField, PepTextareaField, PepLinkField, PepImagesField, PepImageField, PepSignatureField, PepAttachmentField, PepInternalCaruselField, PepInternalPageField, PepIndicatorsField, PepAddressField, PepCustomizationService, PepPlaceholderField, PepScreenSizeType, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i1 from '@pepperi-addons/ngx-lib/icon';
@@ -64,14 +64,14 @@ import * as i3 from '@angular/cdk/bidi';
 import { debounceTime } from 'rxjs/operators';
 
 class PepIndicatorsComponent {
-    constructor() {
-        this.controlType = 'indicators';
-        this.layoutType = 'table';
-    }
+    key;
+    value;
+    controlType = 'indicators';
+    layoutType = 'table';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: { key: "key", value: "value", layoutType: "layoutType" }, ngImport: i0, 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>", 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}\n", ".indicators-container .svg-icon{fill:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepIndicatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepIndicatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: { key: "key", value: "value", layoutType: "layoutType" }, ngImport: i0, 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>", 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}\n", ".indicators-container .svg-icon{fill:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepIndicatorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepIndicatorsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-indicators', changeDetection: ChangeDetectionStrategy.OnPush, 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>", 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}\n", ".indicators-container .svg-icon{fill:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}\n"] }]
         }], propDecorators: { key: [{
@@ -83,6 +83,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalButtonComponent {
+    customizationService;
+    renderer;
+    element;
+    key = '';
+    value = '';
+    formattedValue = '';
+    label = '';
+    referenceObjectInternalType;
+    type = 'button';
+    mandatory = false;
+    disabled = false;
+    readonly = false;
+    xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+    rowSpan = 1;
+    _visible = true;
     set visible(visible) {
         this._visible = visible;
         if (visible) {
@@ -95,41 +110,30 @@ class PepInternalButtonComponent {
     get visible() {
         return this._visible;
     }
+    controlType = 'button';
+    form = null;
+    showTitle = true;
+    layoutType = 'form';
+    elementClick = new EventEmitter();
+    valueChange = new EventEmitter();
+    // standAlone = false;
+    createNewReference = false;
+    referenceButtons = [
+        {
+            key: 'action',
+            callback: (action) => this.onButtonClicked(action.event),
+        },
+        {
+            key: 'delete',
+            callback: (action) => this.remove(),
+            classNames: 'caution',
+            iconName: pepIconSystemBin.name,
+        },
+    ];
     constructor(customizationService, renderer, element) {
         this.customizationService = customizationService;
         this.renderer = renderer;
         this.element = element;
-        this.key = '';
-        this.value = '';
-        this.formattedValue = '';
-        this.label = '';
-        this.type = 'button';
-        this.mandatory = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        this.rowSpan = 1;
-        this._visible = true;
-        this.controlType = 'button';
-        this.form = null;
-        this.showTitle = true;
-        this.layoutType = 'form';
-        this.elementClick = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        // standAlone = false;
-        this.createNewReference = false;
-        this.referenceButtons = [
-            {
-                key: 'action',
-                callback: (action) => this.onButtonClicked(action.event),
-            },
-            {
-                key: 'delete',
-                callback: (action) => this.remove(),
-                classNames: 'caution',
-                iconName: pepIconSystemBin.name,
-            },
-        ];
     }
     ngOnInit() {
         // if (this.form === null) {
@@ -211,10 +215,10 @@ class PepInternalButtonComponent {
         this.value = '';
         this.valueChange.emit(this.value);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalButtonComponent, deps: [{ token: i1$1.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: { key: "key", value: "value", formattedValue: "formattedValue", label: "label", referenceObjectInternalType: "referenceObjectInternalType", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", showTitle: "showTitle", layoutType: "layoutType" }, outputs: { elementClick: "elementClick", valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, 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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button-container,.pep-button-container{height:fit-content}.pepperi-button-container .center-alignment,.pep-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pepperi-button-container.reference-button ::ng-deep .split-buttons,.pepperi-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep .split-buttons,.pep-button-container.reference-button .split-buttons{float:left}.pepperi-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pep-button-container.reference-button .split-buttons button:last-of-type{width:1.5rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalButtonComponent, deps: [{ token: i1$1.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepInternalButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: { key: "key", value: "value", formattedValue: "formattedValue", label: "label", referenceObjectInternalType: "referenceObjectInternalType", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", showTitle: "showTitle", layoutType: "layoutType" }, outputs: { elementClick: "elementClick", valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, 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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button-container,.pep-button-container{height:fit-content}.pepperi-button-container .center-alignment,.pep-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pepperi-button-container.reference-button ::ng-deep .split-buttons,.pepperi-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep .split-buttons,.pep-button-container.reference-button .split-buttons{float:left}.pepperi-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pep-button-container.reference-button .split-buttons button:last-of-type{width:1.5rem;padding:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i7.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "supportUnselect", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-button', changeDetection: ChangeDetectionStrategy.OnPush, 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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button-container,.pep-button-container{height:fit-content}.pepperi-button-container .center-alignment,.pep-button-container .center-alignment{position:absolute;left:50%;transform:translate(-50%)}.pepperi-button-container.reference-button ::ng-deep .split-buttons,.pepperi-button-container.reference-button .split-buttons,.pep-button-container.reference-button ::ng-deep .split-buttons,.pep-button-container.reference-button .split-buttons{float:left}.pepperi-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pepperi-button-container.reference-button .split-buttons button:last-of-type,.pep-button-container.reference-button ::ng-deep .split-buttons button:last-of-type,.pep-button-container.reference-button .split-buttons button:last-of-type{width:1.5rem;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.PepCustomizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
@@ -254,18 +258,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalMenuComponent {
-    constructor() {
-        this.key = '';
-        this.label = '';
-        this.disabled = false;
-        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
-        // @Input() hasSubMenu = false;
-        this.options = [];
-        // @Input() invertClass = true;
-        this.controlType = 'menu';
-        this.layoutType = 'form';
-        this.elementClick = new EventEmitter();
-    }
+    key = '';
+    label = '';
+    disabled = false;
+    xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+    // @Input() hasSubMenu = false;
+    options = [];
+    // @Input() invertClass = true;
+    controlType = 'menu';
+    layoutType = 'form';
+    elementClick = new EventEmitter();
     // @Output() menuItemClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();
     ngOnDestroy() {
         // if (this.elementClick) {
@@ -286,10 +288,10 @@ class PepInternalMenuComponent {
         // Not in use comment in version 16.55 for webapp.
         // this.menuItemClick.emit({ key: itemKey });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: { key: "key", label: "label", disabled: "disabled", xAlignment: "xAlignment", options: "options", layoutType: "layoutType" }, outputs: { elementClick: "elementClick" }, ngImport: i0, 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 special {{ 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        }\">\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 special {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center'\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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button,.pep-button{cursor:pointer}.pepperi-button.left-alignment,.pep-button.left-alignment{justify-self:flex-start}.pepperi-button.center-alignment,.pep-button.center-alignment{justify-self:center}.pepperi-button.right-alignment,.pep-button.right-alignment{justify-self:flex-end}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepInternalMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: { key: "key", label: "label", disabled: "disabled", xAlignment: "xAlignment", options: "options", layoutType: "layoutType" }, outputs: { elementClick: "elementClick" }, ngImport: i0, 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 special {{ 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        }\">\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 special {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center'\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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button,.pep-button{cursor:pointer}.pepperi-button.left-alignment,.pep-button.left-alignment{justify-self:flex-start}.pepperi-button.center-alignment,.pep-button.center-alignment{justify-self:center}.pepperi-button.right-alignment,.pep-button.right-alignment{justify-self:flex-end}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-menu', changeDetection: ChangeDetectionStrategy.OnPush, 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 special {{ 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        }\">\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 special {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center'\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>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pepperi-button,.pep-button{cursor:pointer}.pepperi-button.left-alignment,.pep-button.left-alignment{justify-self:flex-start}.pepperi-button.center-alignment,.pep-button.center-alignment{justify-self:center}.pepperi-button.right-alignment,.pep-button.right-alignment{justify-self:flex-end}\n"] }]
         }], propDecorators: { key: [{
@@ -309,10 +311,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalPageService {
+    httpService;
+    transactionUrl;
+    objectId;
+    parentId = '0';
+    searchCode;
+    viewType;
+    additionalApiName = '';
     constructor(httpService) {
         this.httpService = httpService;
-        this.parentId = '0';
-        this.additionalApiName = '';
         this.transactionUrl = 'Service1.svc/v1/OrderCenter/Transaction/';
     }
     getBaseParentUrl() {
@@ -418,35 +425,35 @@ class PepInternalPageService {
         // () => {}
         );
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalPageService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalPageService });
 }
-PepInternalPageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalPageService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
-PepInternalPageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalPageService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalPageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalPageService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.PepHttpService }]; } });
 
 class PepInternalFieldGeneratorComponent {
-    constructor() {
-        this.isActive = false;
-        this.uid = null;
-        this.layoutType = 'form';
-        this.showTitle = true;
-        this.checkForChanges = null;
-        this.valueChange = new EventEmitter();
-        // @Output()
-        // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-        this.elementClick = new EventEmitter();
-        // @Output() internalFormFieldChange: EventEmitter<any> = new EventEmitter<any>();
-        // @Output() internalFormFieldClick: EventEmitter<any> = new EventEmitter<any>();
-        this.formValueChange = new EventEmitter();
-        this.formFieldClick = new EventEmitter();
-    }
+    _field;
     set field(value) {
         this._field = value;
     }
     get field() {
         return this._field;
     }
+    isActive = false;
+    uid = null;
+    form;
+    layoutType = 'form';
+    showTitle = true;
+    checkForChanges = null;
+    valueChange = new EventEmitter();
+    // @Output()
+    // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+    elementClick = new EventEmitter();
+    // @Output() internalFormFieldChange: EventEmitter<any> = new EventEmitter<any>();
+    // @Output() internalFormFieldClick: EventEmitter<any> = new EventEmitter<any>();
+    formValueChange = new EventEmitter();
+    formFieldClick = new EventEmitter();
     get isValid() {
         if (this.field.readonly || this.field.disabled) {
             return true;
@@ -520,10 +527,10 @@ class PepInternalFieldGeneratorComponent {
         // For testing.
         // this.field.disabled = this.field.readonly = false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalFieldGeneratorComponent, selector: "pep-internal-field-generator", inputs: { field: "field", isActive: "isActive", uid: "uid", form: "form", layoutType: "layoutType", showTitle: "showTitle", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", elementClick: "elementClick", formValueChange: "formValueChange", formFieldClick: "formFieldClick" }, usesOnChanges: true, ngImport: i0, 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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        [accessory]=\"field.accessory\" [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        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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    <!-- \n        comment for not cause a circular reference.\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\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.PepAddressComponent, selector: "pep-address", inputs: ["key", "formattedValue", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "groupFields", "form", "layoutType", "visible"], outputs: ["addressValueChange"] }, { kind: "component", type: i4$3.PepAttachmentComponent, selector: "pep-attachment", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i8$1.PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: ["key", "value", "label", "xAlignment", "rowSpan", "form", "uid", "showTitle", "renderTitle", "layoutType", "currIndex", "showThumbnails"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "sanitize", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderEnlargeButton", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange", "editorCreated", "validationChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i12.PepSeparatorComponent, selector: "pep-separator", inputs: ["key", "label", "xAlignment", "form", "layoutType", "visible"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "displayValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "elementClick", "keyup", "validationChange"] }, { kind: "component", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: ["key", "value", "layoutType"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "component", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: ["key", "label", "disabled", "xAlignment", "options", "layoutType"], outputs: ["elementClick"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalFieldGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepInternalFieldGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalFieldGeneratorComponent, selector: "pep-internal-field-generator", inputs: { field: "field", isActive: "isActive", uid: "uid", form: "form", layoutType: "layoutType", showTitle: "showTitle", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", elementClick: "elementClick", formValueChange: "formValueChange", formFieldClick: "formFieldClick" }, usesOnChanges: true, ngImport: i0, 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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        [accessory]=\"field.accessory\" [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        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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    <!-- \n        comment for not cause a circular reference.\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\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.PepAddressComponent, selector: "pep-address", inputs: ["key", "formattedValue", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "groupFields", "form", "layoutType", "visible"], outputs: ["addressValueChange"] }, { kind: "component", type: i4$3.PepAttachmentComponent, selector: "pep-attachment", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i8$1.PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: ["key", "value", "label", "xAlignment", "rowSpan", "form", "uid", "showTitle", "renderTitle", "layoutType", "currIndex", "showThumbnails"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "sanitize", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderEnlargeButton", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange", "editorCreated", "validationChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i12.PepSeparatorComponent, selector: "pep-separator", inputs: ["key", "label", "xAlignment", "form", "layoutType", "visible"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "displayValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "elementClick", "keyup", "validationChange"] }, { kind: "component", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: ["key", "value", "layoutType"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "component", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: ["key", "label", "disabled", "xAlignment", "options", "layoutType"], outputs: ["elementClick"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalFieldGeneratorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalFieldGeneratorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-field-generator', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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        [accessory]=\"field.accessory\" [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        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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    <!-- \n        comment for not cause a circular reference.\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\n    <ng-container *ngSwitchCase=\"'placeholder'\">\n    </ng-container>\n</ng-container>", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], propDecorators: { field: [{
@@ -551,6 +558,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalFormComponent {
+    dialogService;
+    customizationService;
+    layoutService;
+    fb;
+    translate;
+    isInternal = true;
+    isReport = false;
+    layout;
+    lockEvents = false;
+    canEditObject = true;
+    _data = null;
     set data(value) {
         const shouldReload = this.shouldReloadForm || !this._data;
         this._data = value;
@@ -568,9 +586,44 @@ class PepInternalFormComponent {
     set lockFields(value) {
         this.isLocked = value;
     }
+    isActive = false;
+    layoutType = 'card';
+    // @Input() listType = '';
+    objectId = '0';
+    parentId = '0';
+    searchCode = '0';
+    showTitle = true;
+    firstFieldAsLink = false;
+    checkForChanges = null;
+    valueChange = new EventEmitter();
+    formValidationChange = new EventEmitter();
+    fieldClick = new EventEmitter();
+    // @Output() internalFormFieldClick: EventEmitter<any> = new EventEmitter<any>();
+    // @Output() internalFormFieldChange: EventEmitter<any> = new EventEmitter<any>();
+    isLocked = false;
+    formGutterSize;
+    cardGutterSize;
+    rowHeight;
+    // private matrixIsLast = false;
+    // lastUpdatedFieldApiName: string = '';
+    form;
+    differ;
+    // payLoad = '';
+    rows = [];
+    fields = [];
+    _fieldsSubject = new BehaviorSubject([]);
     get fields$() {
         return this._fieldsSubject.asObservable();
     }
+    columns = 1;
+    hasMenuFloatingOnOtherField = false;
+    menuField;
+    menuDataField;
+    hasCampaignField;
+    hasCampaignDataField;
+    indicatorsField;
+    indicatorsDataField = null;
+    _shouldReloadForm = false;
     get shouldReloadForm() {
         return this._shouldReloadForm;
     }
@@ -582,34 +635,6 @@ class PepInternalFormComponent {
         this.layoutService = layoutService;
         this.fb = fb;
         this.translate = translate;
-        this.isInternal = true;
-        this.isReport = false;
-        this.lockEvents = false;
-        this.canEditObject = true;
-        this._data = null;
-        this.isActive = false;
-        this.layoutType = 'card';
-        // @Input() listType = '';
-        this.objectId = '0';
-        this.parentId = '0';
-        this.searchCode = '0';
-        this.showTitle = true;
-        this.firstFieldAsLink = false;
-        this.checkForChanges = null;
-        this.valueChange = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this.fieldClick = new EventEmitter();
-        // @Output() internalFormFieldClick: EventEmitter<any> = new EventEmitter<any>();
-        // @Output() internalFormFieldChange: EventEmitter<any> = new EventEmitter<any>();
-        this.isLocked = false;
-        // payLoad = '';
-        this.rows = [];
-        this.fields = [];
-        this._fieldsSubject = new BehaviorSubject([]);
-        this.columns = 1;
-        this.hasMenuFloatingOnOtherField = false;
-        this.indicatorsDataField = null;
-        this._shouldReloadForm = false;
         // store the initial value to compare with
         this.differ = differs.find({}).create();
     }
@@ -1704,10 +1729,10 @@ class PepInternalFormComponent {
     onFormFieldClick(event) {
         this.fieldClick.emit(event);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalFormComponent, deps: [{ token: i1$2.PepDialogService }, { token: i1$1.PepCustomizationService }, { token: i1$1.PepLayoutService }, { token: i3$1.FormBuilder }, { token: i0.KeyValueDiffers }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: { isInternal: "isInternal", isReport: "isReport", layout: "layout", lockEvents: "lockEvents", canEditObject: "canEditObject", data: "data", lockFields: "lockFields", isActive: "isActive", layoutType: "layoutType", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", showTitle: "showTitle", firstFieldAsLink: "firstFieldAsLink", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", fieldClick: "fieldClick" }, usesOnChanges: true, ngImport: i0, 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-internal-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                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                >\n            </pep-internal-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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-internal-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)\" (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-internal-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-internal-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-internal-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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: PepInternalFieldGeneratorComponent, selector: "pep-internal-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "elementClick", "formValueChange", "formFieldClick"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalFormComponent, deps: [{ token: i1$2.PepDialogService }, { token: i1$1.PepCustomizationService }, { token: i1$1.PepLayoutService }, { token: i3$1.FormBuilder }, { token: i0.KeyValueDiffers }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PepInternalFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: { isInternal: "isInternal", isReport: "isReport", layout: "layout", lockEvents: "lockEvents", canEditObject: "canEditObject", data: "data", lockFields: "lockFields", isActive: "isActive", layoutType: "layoutType", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", showTitle: "showTitle", firstFieldAsLink: "firstFieldAsLink", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", fieldClick: "fieldClick" }, usesOnChanges: true, ngImport: i0, 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-internal-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                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                >\n            </pep-internal-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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-internal-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)\" (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-internal-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-internal-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-internal-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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: PepInternalFieldGeneratorComponent, selector: "pep-internal-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "elementClick", "formValueChange", "formFieldClick"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-form', changeDetection: ChangeDetectionStrategy.OnPush, 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-internal-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                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                >\n            </pep-internal-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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-internal-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)\" (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-internal-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-internal-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-internal-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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.PepDialogService }, { type: i1$1.PepCustomizationService }, { type: i1$1.PepLayoutService }, { type: i3$1.FormBuilder }, { type: i0.KeyValueDiffers }, { type: i4$1.TranslateService }]; }, propDecorators: { isInternal: [{
@@ -1749,55 +1774,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalListComponent {
+    element;
+    layoutService;
+    cd;
+    renderer;
+    noDataFoundMsg = 'Items not found';
+    hideAllSelectionInMulti = false;
+    top = -1;
+    objectId = '0';
+    parentId = '0';
+    searchCode = '0';
+    // @Input() showTopBorder = false;
+    supportResizing = true;
+    parentScroll = null;
+    disabled = false;
+    disableEvents = false;
+    disableSelectionItems = false;
+    totalsRow = [];
+    // @Output()
+    // itemClick: EventEmitter<IPepListItemClickEvent> = new EventEmitter<IPepListItemClickEvent>();
+    fieldClick = new EventEmitter();
+    valueChange = new EventEmitter();
+    noVirtualScrollCont;
+    tableHeader;
+    selectAllCB;
+    uiControl = null;
+    totalRows = -1;
+    itemClass;
+    isTable = false;
+    hasColumnWidthOfTypePercentage = true;
+    _items = null;
     get items() {
         return this._items;
     }
+    // isCardView = false;
+    itemsCounter = 0;
+    showItems = true;
+    viewType;
+    scrollItems;
+    SEPARATOR = ',';
+    nativeWindow = null;
+    selectedItemId = '';
+    hoveredItemId = '';
+    lockEvents = false;
+    containerWidth = 0;
+    deviceHasMouse = false;
+    // headerIsInFocus = false;
+    // For resize
+    pressedColumn = '';
+    startX = 0;
+    startWidth = 0;
+    tableStartWidth = 0;
+    isUserSelected = false;
+    checkForChanges = null;
+    useVirtualScroll = true;
+    calculatedObjectHeight;
     constructor(element, layoutService, cd, renderer) {
         this.element = element;
         this.layoutService = layoutService;
         this.cd = cd;
         this.renderer = renderer;
-        this.noDataFoundMsg = 'Items not found';
-        this.hideAllSelectionInMulti = false;
-        this.top = -1;
-        this.objectId = '0';
-        this.parentId = '0';
-        this.searchCode = '0';
-        // @Input() showTopBorder = false;
-        this.supportResizing = true;
-        this.parentScroll = null;
-        this.disabled = false;
-        this.disableEvents = false;
-        this.disableSelectionItems = false;
-        this.totalsRow = [];
-        // @Output()
-        // itemClick: EventEmitter<IPepListItemClickEvent> = new EventEmitter<IPepListItemClickEvent>();
-        this.fieldClick = new EventEmitter();
-        this.valueChange = new EventEmitter();
-        this.uiControl = null;
-        this.totalRows = -1;
-        this.isTable = false;
-        this.hasColumnWidthOfTypePercentage = true;
-        this._items = null;
-        // isCardView = false;
-        this.itemsCounter = 0;
-        this.showItems = true;
-        this.SEPARATOR = ',';
-        this.nativeWindow = null;
-        this.selectedItemId = '';
-        this.hoveredItemId = '';
-        this.lockEvents = false;
-        this.containerWidth = 0;
-        this.deviceHasMouse = false;
-        // headerIsInFocus = false;
-        // For resize
-        this.pressedColumn = '';
-        this.startX = 0;
-        this.startWidth = 0;
-        this.tableStartWidth = 0;
-        this.isUserSelected = false;
-        this.checkForChanges = null;
-        this.useVirtualScroll = true;
         this.nativeWindow = window;
         this.deviceHasMouse = this.layoutService.getDeviceHasMouse();
         this.layoutService.onMouseOver$.subscribe((deviceHasMouse) => {
@@ -2207,10 +2243,10 @@ class PepInternalListComponent {
     getItemDataByID(uid) {
         return this.items.find((item) => item.UID.toString() === uid);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PepLayoutService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalListComponent, selector: "pep-internal-list", inputs: { noDataFoundMsg: "noDataFoundMsg", hideAllSelectionInMulti: "hideAllSelectionInMulti", top: "top", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", disableEvents: "disableEvents", disableSelectionItems: "disableSelectionItems", totalsRow: "totalsRow" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange" }, host: { listeners: { "window:resize": "winResize($event)" } }, viewQueries: [{ propertyName: "noVirtualScrollCont", first: true, predicate: ["noVirtualScrollCont"], descendants: true }, { propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, 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-internal-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-internal-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-internal-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-internal-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>", styles: [":host{height:inherit;display:grid}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.table-header{top:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
 }
-PepInternalListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PepLayoutService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PepInternalListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalListComponent, selector: "pep-internal-list", inputs: { noDataFoundMsg: "noDataFoundMsg", hideAllSelectionInMulti: "hideAllSelectionInMulti", top: "top", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", supportResizing: "supportResizing", parentScroll: "parentScroll", disabled: "disabled", disableEvents: "disableEvents", disableSelectionItems: "disableSelectionItems", totalsRow: "totalsRow" }, outputs: { fieldClick: "fieldClick", valueChange: "valueChange" }, host: { listeners: { "window:resize": "winResize($event)" } }, viewQueries: [{ propertyName: "noVirtualScrollCont", first: true, predicate: ["noVirtualScrollCont"], descendants: true }, { propertyName: "tableHeader", first: true, predicate: ["tableHeader"], descendants: true }, { propertyName: "selectAllCB", first: true, predicate: ["selectAllCB"], descendants: true }], usesOnChanges: true, ngImport: i0, 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-internal-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-internal-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-internal-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-internal-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>", styles: [":host{height:inherit;display:grid}.no-data{margin:var(--pep-spacing-2xl, 2rem) 0}.no-data-suggestions .suggestions-title{margin:var(--pep-spacing-lg, 1rem) 0 var(--pep-spacing-sm, .5rem)}.no-data-suggestions .suggestions-list{margin:0;padding:0;padding-inline-start:var(--pep-spacing-2xl, 2rem)}.table-header{top:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-list', host: {
                         '(window:resize)': 'winResize($event)',
@@ -2255,33 +2291,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalPageComponent {
+    dialogService;
+    internalPageService;
+    customizationService;
+    changeDetectorRef;
+    static CURRENT_ADDITIONAL_API_NAME = 'item_details_currentAdditionalApiName';
+    controlType = 'internalPage';
+    field;
+    layoutType = 'form';
+    internalFormFieldChange = new EventEmitter();
+    internalFormFieldClick = new EventEmitter();
+    my1mm;
+    mainViewCont;
+    orgCont;
+    dialogCont;
+    matrixTemplate;
+    matrixDialogTemplate;
+    customList;
+    resize;
+    checkForChanges = null;
+    childData = null;
+    emptyForm;
+    uiControl;
+    rows;
+    lineViewRows;
+    totalsRow = [];
+    additionalApiNames = null;
+    currentAdditionalApiName = null;
+    focusedQS = false;
+    fieldIdWithFocus = '';
+    columnWidth = 100;
+    coverChildTable = false;
+    childViewTypes;
+    currentViewType = null;
+    currentViewTypeTitle;
+    sumOfMinColWidth = 0;
+    totalRowsWidth = 0;
+    viewWidth = '100%';
+    viewHeight = 'auto';
+    displayQSbtns = true;
+    selectedApiName = '';
+    showSort = false;
+    defaultRowSpan = -1;
     constructor(dialogService, internalPageService, customizationService, changeDetectorRef) {
         this.dialogService = dialogService;
         this.internalPageService = internalPageService;
         this.customizationService = customizationService;
         this.changeDetectorRef = changeDetectorRef;
-        this.controlType = 'internalPage';
-        this.layoutType = 'form';
-        this.internalFormFieldChange = new EventEmitter();
-        this.internalFormFieldClick = new EventEmitter();
-        this.checkForChanges = null;
-        this.childData = null;
-        this.totalsRow = [];
-        this.additionalApiNames = null;
-        this.currentAdditionalApiName = null;
-        this.focusedQS = false;
-        this.fieldIdWithFocus = '';
-        this.columnWidth = 100;
-        this.coverChildTable = false;
-        this.currentViewType = null;
-        this.sumOfMinColWidth = 0;
-        this.totalRowsWidth = 0;
-        this.viewWidth = '100%';
-        this.viewHeight = 'auto';
-        this.displayQSbtns = true;
-        this.selectedApiName = '';
-        this.showSort = false;
-        this.defaultRowSpan = -1;
     }
     fillData(isInDialog = false) {
         const view = this.matrixTemplate.createEmbeddedView(null);
@@ -2559,11 +2615,10 @@ class PepInternalPageComponent {
             this.internalFormFieldClick.emit(fieldClickEvent);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalPageComponent, deps: [{ token: i1$2.PepDialogService }, { token: PepInternalPageService }, { token: i1$1.PepCustomizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalPageComponent, selector: "pep-internal-page", inputs: { field: "field", layoutType: "layoutType" }, outputs: { internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick" }, providers: [PepInternalPageService], viewQueries: [{ propertyName: "my1mm", first: true, predicate: ["my1mm"], descendants: true }, { propertyName: "mainViewCont", first: true, predicate: ["mainViewCont"], descendants: true }, { propertyName: "orgCont", first: true, predicate: ["orgCont"], descendants: true, read: ViewContainerRef }, { propertyName: "dialogCont", first: true, predicate: ["dialogCont"], descendants: true, read: ViewContainerRef }, { propertyName: "matrixTemplate", first: true, predicate: ["matrixTemplate"], descendants: true }, { propertyName: "matrixDialogTemplate", first: true, predicate: ["matrixDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customList", first: true, predicate: PepInternalListComponent, descendants: true }], ngImport: i0, 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> -->", styles: [":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;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: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 .pepperi-button,.matrix-title-container .buttons-container .pep-button{width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;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% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{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}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepInternalListComponent, selector: "pep-internal-list", inputs: ["noDataFoundMsg", "hideAllSelectionInMulti", "top", "objectId", "parentId", "searchCode", "supportResizing", "parentScroll", "disabled", "disableEvents", "disableSelectionItems", "totalsRow"], outputs: ["fieldClick", "valueChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalPageComponent.CURRENT_ADDITIONAL_API_NAME = 'item_details_currentAdditionalApiName';
-PepInternalPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalPageComponent, deps: [{ token: i1$2.PepDialogService }, { token: PepInternalPageService }, { token: i1$1.PepCustomizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PepInternalPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalPageComponent, selector: "pep-internal-page", inputs: { field: "field", layoutType: "layoutType" }, outputs: { internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick" }, providers: [PepInternalPageService], viewQueries: [{ propertyName: "my1mm", first: true, predicate: ["my1mm"], descendants: true }, { propertyName: "mainViewCont", first: true, predicate: ["mainViewCont"], descendants: true }, { propertyName: "orgCont", first: true, predicate: ["orgCont"], descendants: true, read: ViewContainerRef }, { propertyName: "dialogCont", first: true, predicate: ["dialogCont"], descendants: true, read: ViewContainerRef }, { propertyName: "matrixTemplate", first: true, predicate: ["matrixTemplate"], descendants: true }, { propertyName: "matrixDialogTemplate", first: true, predicate: ["matrixDialogTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customList", first: true, predicate: PepInternalListComponent, descendants: true }], ngImport: i0, 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> -->", styles: [":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;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: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 .pepperi-button,.matrix-title-container .buttons-container .pep-button{width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;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% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{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}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: PepInternalListComponent, selector: "pep-internal-list", inputs: ["noDataFoundMsg", "hideAllSelectionInMulti", "top", "objectId", "parentId", "searchCode", "supportResizing", "parentScroll", "disabled", "disableEvents", "disableSelectionItems", "totalsRow"], outputs: ["fieldClick", "valueChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-page', providers: [PepInternalPageService], changeDetection: ChangeDetectionStrategy.OnPush, 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> -->", styles: [":host{display:grid;width:inherit;height:inherit}.matrix-title-container{padding:0;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: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 .pepperi-button,.matrix-title-container .buttons-container .pep-button{width:max-content}#mainViewCont{width:100%;height:inherit;overflow:hidden;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% + var(--pep-form-field-height, 2.5rem));z-index:99}#mainViewCont .table-cover-button.lineview-btn{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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.PepDialogService }, { type: PepInternalPageService }, { type: i1$1.PepCustomizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { field: [{
@@ -2598,6 +2653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepInternalCaruselService {
+    httpService;
+    eventUrl;
     constructor(httpService) {
         this.httpService = httpService;
         this.eventUrl = 'Service1.svc/v1/EmitEvent';
@@ -2619,14 +2676,18 @@ class PepInternalCaruselService {
         // () => {}
         );
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalCaruselService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalCaruselService });
 }
-PepInternalCaruselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalCaruselService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
-PepInternalCaruselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalCaruselService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalCaruselService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalCaruselService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.PepHttpService }]; } });
 
 class PepInternalCaruselComponent {
+    layoutService;
+    internalCaruselService;
+    carousel;
+    _field;
     set field(value) {
         this._field = value;
         const caruselField = this._field;
@@ -2638,6 +2699,10 @@ class PepInternalCaruselComponent {
     get field() {
         return this._field;
     }
+    layoutType = 'form';
+    internalFormFieldChange = new EventEmitter();
+    internalFormFieldClick = new EventEmitter();
+    _items = null;
     set items(value) {
         this._items = value;
         // this.moveTo(0);
@@ -2645,19 +2710,16 @@ class PepInternalCaruselComponent {
     get items() {
         return this._items;
     }
+    layout = null;
+    duration = 250;
+    itemsToMove = 3;
+    prevDisabled = true;
+    nextDisabled = false;
+    screenSize;
+    PepScreenSizeType = PepScreenSizeType;
     constructor(layoutService, internalCaruselService) {
         this.layoutService = layoutService;
         this.internalCaruselService = internalCaruselService;
-        this.layoutType = 'form';
-        this.internalFormFieldChange = new EventEmitter();
-        this.internalFormFieldClick = new EventEmitter();
-        this._items = null;
-        this.layout = null;
-        this.duration = 250;
-        this.itemsToMove = 3;
-        this.prevDisabled = true;
-        this.nextDisabled = false;
-        this.PepScreenSizeType = PepScreenSizeType;
     }
     ngOnInit() {
         //
@@ -2716,10 +2778,10 @@ class PepInternalCaruselComponent {
         this.prevDisabled = event === 0;
         // this.nextDisabled = event === this.items.length - 1;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalCaruselComponent, deps: [{ token: i1$1.PepLayoutService }, { token: PepInternalCaruselService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepInternalCaruselComponent, selector: "pep-internal-carusel", inputs: { field: "field", layoutType: "layoutType" }, outputs: { internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick" }, providers: [PepInternalCaruselService], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, 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)\" (indexChanged)=\"onIndexChanged($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-internal-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-internal-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>", 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:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$3.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i5$3.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepInternalCaruselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalCaruselComponent, deps: [{ token: i1$1.PepLayoutService }, { token: PepInternalCaruselService }], target: i0.ɵɵFactoryTarget.Component });
-PepInternalCaruselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepInternalCaruselComponent, selector: "pep-internal-carusel", inputs: { field: "field", layoutType: "layoutType" }, outputs: { internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick" }, providers: [PepInternalCaruselService], viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: PepCarouselComponent }], ngImport: i0, 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)\" (indexChanged)=\"onIndexChanged($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-internal-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-internal-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>", 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:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$4.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "component", type: i5$3.PepCarouselComponent, selector: "pep-carousel", inputs: ["scrollbarHidden", "disabled", "xDisabled", "yDisabled", "xWheelEnabled", "dragDisabled", "snapDisabled", "snapOffset", "snapDuration"], outputs: ["dsInitialized", "indexChanged", "reachesLeftBound", "reachesRightBound", "snapAnimationFinished", "dragStart", "dragEnd"] }, { kind: "directive", type: i5$3.PepCarouselItemDirective, selector: "[pepCarouselItem]", inputs: ["dragDisabled"] }, { kind: "component", type: PepInternalFormComponent, selector: "pep-internal-form", inputs: ["isInternal", "isReport", "layout", "lockEvents", "canEditObject", "data", "lockFields", "isActive", "layoutType", "objectId", "parentId", "searchCode", "showTitle", "firstFieldAsLink", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "fieldClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepInternalCaruselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepInternalCaruselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-internal-carusel', providers: [PepInternalCaruselService], changeDetection: ChangeDetectionStrategy.OnPush, 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)\" (indexChanged)=\"onIndexChanged($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-internal-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-internal-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>", 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:var(--pep-spacing-sm, .5rem) 0!important}.carousel-container ::ng-deep .carousel-content .card-view:first-child{padding-inline-start:var(--pep-spacing-sm, .5rem)!important}.carousel-container ::ng-deep .carousel-content .card-view:last-child{padding-inline-end:var(--pep-spacing-sm, .5rem)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.PepLayoutService }, { type: PepInternalCaruselService }]; }, propDecorators: { carousel: [{
@@ -2736,27 +2798,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepFieldGeneratorComponent {
-    constructor() {
-        this.isActive = false;
-        this.uid = null;
-        this.layoutType = 'form';
-        this.showTitle = true;
-        this.checkForChanges = null;
-        this.valueChange = new EventEmitter();
-        // @Output()
-        // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
-        this.elementClick = new EventEmitter();
-        this.internalFormFieldChange = new EventEmitter();
-        this.internalFormFieldClick = new EventEmitter();
-        this.formValueChange = new EventEmitter();
-        this.formFieldClick = new EventEmitter();
-    }
+    _field;
     set field(value) {
         this._field = value;
     }
     get field() {
         return this._field;
     }
+    isActive = false;
+    uid = null;
+    form;
+    layoutType = 'form';
+    showTitle = true;
+    checkForChanges = null;
+    valueChange = new EventEmitter();
+    // @Output()
+    // formValidationChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+    elementClick = new EventEmitter();
+    internalFormFieldChange = new EventEmitter();
+    internalFormFieldClick = new EventEmitter();
+    formValueChange = new EventEmitter();
+    formFieldClick = new EventEmitter();
     get isValid() {
         if (this.field.readonly || this.field.disabled) {
             return true;
@@ -2830,10 +2892,10 @@ class PepFieldGeneratorComponent {
     ngOnDestroy() {
         //
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: { field: "field", isActive: "isActive", uid: "uid", form: "form", layoutType: "layoutType", showTitle: "showTitle", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", elementClick: "elementClick", internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick", formValueChange: "formValueChange", formFieldClick: "formFieldClick" }, usesOnChanges: true, ngImport: i0, 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?.toString() | 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\" (valueChange)=\"onValueChanged($event, field)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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\" [renderTitle]=\"field.renderTitle\"\n        [renderEnlargeButton]=\"field.renderEnlargeButton\" (valueChange)=\"onValueChanged($event, field)\"\n        [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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" [emptyOption]=\"field.emptyOption\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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        [accessory]=\"field.accessory\" [label]=\"field.label\"\n        [placeholder]=\"field.placeholder\" [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n        [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [regex]=\"field.regex\" [regexError]=\"field.regexError\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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>", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.PepAddressComponent, selector: "pep-address", inputs: ["key", "formattedValue", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "groupFields", "form", "layoutType", "visible"], outputs: ["addressValueChange"] }, { kind: "component", type: i4$3.PepAttachmentComponent, selector: "pep-attachment", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i8$1.PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: ["key", "value", "label", "xAlignment", "rowSpan", "form", "uid", "showTitle", "renderTitle", "layoutType", "currIndex", "showThumbnails"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "sanitize", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderEnlargeButton", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange", "editorCreated", "validationChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i12.PepSeparatorComponent, selector: "pep-separator", inputs: ["key", "label", "xAlignment", "form", "layoutType", "visible"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "displayValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "elementClick", "keyup", "validationChange"] }, { kind: "component", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: ["key", "value", "layoutType"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "component", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: ["key", "label", "disabled", "xAlignment", "options", "layoutType"], outputs: ["elementClick"] }, { kind: "component", type: PepInternalPageComponent, selector: "pep-internal-page", inputs: ["field", "layoutType"], outputs: ["internalFormFieldChange", "internalFormFieldClick"] }, { kind: "component", type: PepInternalCaruselComponent, selector: "pep-internal-carusel", inputs: ["field", "layoutType"], outputs: ["internalFormFieldChange", "internalFormFieldClick"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepFieldGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepFieldGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: { field: "field", isActive: "isActive", uid: "uid", form: "form", layoutType: "layoutType", showTitle: "showTitle", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", elementClick: "elementClick", internalFormFieldChange: "internalFormFieldChange", internalFormFieldClick: "internalFormFieldClick", formValueChange: "formValueChange", formFieldClick: "formFieldClick" }, usesOnChanges: true, ngImport: i0, 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?.toString() | 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\" (valueChange)=\"onValueChanged($event, field)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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\" [renderTitle]=\"field.renderTitle\"\n        [renderEnlargeButton]=\"field.renderEnlargeButton\" (valueChange)=\"onValueChanged($event, field)\"\n        [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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" [emptyOption]=\"field.emptyOption\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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        [accessory]=\"field.accessory\" [label]=\"field.label\"\n        [placeholder]=\"field.placeholder\" [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n        [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [regex]=\"field.regex\" [regexError]=\"field.regexError\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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>", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.PepAddressComponent, selector: "pep-address", inputs: ["key", "formattedValue", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "groupFields", "form", "layoutType", "visible"], outputs: ["addressValueChange"] }, { kind: "component", type: i4$3.PepAttachmentComponent, selector: "pep-attachment", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i8$1.PepImagesFilmstripComponent, selector: "pep-images-filmstrip", inputs: ["key", "value", "label", "xAlignment", "rowSpan", "form", "uid", "showTitle", "renderTitle", "layoutType", "currIndex", "showThumbnails"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "sanitize", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderEnlargeButton", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange", "editorCreated", "validationChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "placeholder", "placeholderWhenDisabled", "autoSortOptions", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval", "addValueToOptionsIfNotExist"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i12.PepSeparatorComponent, selector: "pep-separator", inputs: ["key", "label", "xAlignment", "form", "layoutType", "visible"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "displayValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "elementClick", "keyup", "validationChange"] }, { kind: "component", type: PepIndicatorsComponent, selector: "pep-indicators", inputs: ["key", "value", "layoutType"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "component", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: ["key", "label", "disabled", "xAlignment", "options", "layoutType"], outputs: ["elementClick"] }, { kind: "component", type: PepInternalPageComponent, selector: "pep-internal-page", inputs: ["field", "layoutType"], outputs: ["internalFormFieldChange", "internalFormFieldClick"] }, { kind: "component", type: PepInternalCaruselComponent, selector: "pep-internal-carusel", inputs: ["field", "layoutType"], outputs: ["internalFormFieldChange", "internalFormFieldClick"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFieldGeneratorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFieldGeneratorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-field-generator', encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, 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?.toString() | 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        [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\" [allowDecimal]=\"field.allowDecimal\" [value]=\"field.value\"\n        [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\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\" (valueChange)=\"onValueChanged($event, field)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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\" [renderTitle]=\"field.renderTitle\"\n        [renderEnlargeButton]=\"field.renderEnlargeButton\" (valueChange)=\"onValueChanged($event, field)\"\n        [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\" [autoSortOptions]=\"field.autoSortOptions\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" [emptyOption]=\"field.emptyOption\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\">\n    </pep-select>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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        [accessory]=\"field.accessory\" [label]=\"field.label\"\n        [placeholder]=\"field.placeholder\" [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n        [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [regex]=\"field.regex\" [regexError]=\"field.regexError\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [minFractionDigits]=\"field.digitsNumberAfterDecimalPoint\"\n        (valueChange)=\"onValueChanged($event, field)\" \n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [displayValue]=\"field.formattedValue\"\n        [label]=\"field.label\" [placeholder]=\"field.placeholder\"\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\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\" [visible]=\"field.visible\"\n        (elementClick)=\"onClick($event)\">\n    </pep-link>\n    <!-- (formValidationChange)=\"onFormValidationChanged($event)\"  -->\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>", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], propDecorators: { field: [{
@@ -2865,6 +2927,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class PepFormComponent {
+    dialogService;
+    customizationService;
+    layoutService;
+    fb;
+    translate;
+    isInternal = true;
+    isReport = false;
+    layout;
+    lockEvents = false;
+    canEditObject = true;
+    _data = null;
     set data(value) {
         const shouldReload = this.shouldReloadForm || !this._data;
         this._data = value;
@@ -2882,9 +2955,44 @@ class PepFormComponent {
     set lockFields(value) {
         this.isLocked = value;
     }
+    isActive = false;
+    layoutType = 'card';
+    // @Input() listType = '';
+    objectId = '0';
+    parentId = '0';
+    searchCode = '0';
+    showTitle = true;
+    firstFieldAsLink = false;
+    checkForChanges = null;
+    valueChange = new EventEmitter();
+    formValidationChange = new EventEmitter();
+    fieldClick = new EventEmitter();
+    internalFormFieldClick = new EventEmitter();
+    internalFormFieldChange = new EventEmitter();
+    isLocked = false;
+    formGutterSize;
+    cardGutterSize;
+    rowHeight;
+    // private matrixIsLast = false;
+    // lastUpdatedFieldApiName: string = '';
+    form;
+    differ;
+    // payLoad = '';
+    rows = [];
+    fields = [];
+    _fieldsSubject = new BehaviorSubject([]);
     get fields$() {
         return this._fieldsSubject.asObservable();
     }
+    columns = 1;
+    hasMenuFloatingOnOtherField = false;
+    menuField;
+    menuDataField;
+    hasCampaignField;
+    hasCampaignDataField;
+    indicatorsField;
+    indicatorsDataField = null;
+    _shouldReloadForm = false;
     get shouldReloadForm() {
         return this._shouldReloadForm;
     }
@@ -2896,34 +3004,6 @@ class PepFormComponent {
         this.layoutService = layoutService;
         this.fb = fb;
         this.translate = translate;
-        this.isInternal = true;
-        this.isReport = false;
-        this.lockEvents = false;
-        this.canEditObject = true;
-        this._data = null;
-        this.isActive = false;
-        this.layoutType = 'card';
-        // @Input() listType = '';
-        this.objectId = '0';
-        this.parentId = '0';
-        this.searchCode = '0';
-        this.showTitle = true;
-        this.firstFieldAsLink = false;
-        this.checkForChanges = null;
-        this.valueChange = new EventEmitter();
-        this.formValidationChange = new EventEmitter();
-        this.fieldClick = new EventEmitter();
-        this.internalFormFieldClick = new EventEmitter();
-        this.internalFormFieldChange = new EventEmitter();
-        this.isLocked = false;
-        // payLoad = '';
-        this.rows = [];
-        this.fields = [];
-        this._fieldsSubject = new BehaviorSubject([]);
-        this.columns = 1;
-        this.hasMenuFloatingOnOtherField = false;
-        this.indicatorsDataField = null;
-        this._shouldReloadForm = false;
         // store the initial value to compare with
         this.differ = differs.find({}).create();
     }
@@ -4036,10 +4116,10 @@ class PepFormComponent {
     onFormFieldClick(event) {
         this.fieldClick.emit(event);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFormComponent, deps: [{ token: i1$2.PepDialogService }, { token: i1$1.PepCustomizationService }, { token: i1$1.PepLayoutService }, { token: i3$1.FormBuilder }, { token: i0.KeyValueDiffers }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PepFormComponent, selector: "pep-form", inputs: { isInternal: "isInternal", isReport: "isReport", layout: "layout", lockEvents: "lockEvents", canEditObject: "canEditObject", data: "data", lockFields: "lockFields", isActive: "isActive", layoutType: "layoutType", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", showTitle: "showTitle", firstFieldAsLink: "firstFieldAsLink", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", fieldClick: "fieldClick", internalFormFieldClick: "internalFormFieldClick", internalFormFieldChange: "internalFormFieldChange" }, usesOnChanges: true, ngImport: i0, 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                >\n            </pep-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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?.toString() | 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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "elementClick", "internalFormFieldChange", "internalFormFieldClick", "formValueChange", "formFieldClick"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PepFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFormComponent, deps: [{ token: i1$2.PepDialogService }, { token: i1$1.PepCustomizationService }, { token: i1$1.PepLayoutService }, { token: i3$1.FormBuilder }, { token: i0.KeyValueDiffers }, { token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PepFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepFormComponent, selector: "pep-form", inputs: { isInternal: "isInternal", isReport: "isReport", layout: "layout", lockEvents: "lockEvents", canEditObject: "canEditObject", data: "data", lockFields: "lockFields", isActive: "isActive", layoutType: "layoutType", objectId: "objectId", parentId: "parentId", searchCode: "searchCode", showTitle: "showTitle", firstFieldAsLink: "firstFieldAsLink", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", fieldClick: "fieldClick", internalFormFieldClick: "internalFormFieldClick", internalFormFieldChange: "internalFormFieldChange" }, usesOnChanges: true, ngImport: i0, 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                >\n            </pep-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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?.toString() | 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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i6$1.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i5$2.PepCheckboxComponent, selector: "pep-checkbox", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "additionalValue", "form", "isActive", "showTitle", "renderTitle", "layoutType", "visible"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "chooseTime", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "validationChange"] }, { kind: "component", type: i7$1.PepImageComponent, selector: "pep-image", inputs: ["key", "srcLarge", "src", "options", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "indicatorsField", "menuField", "hasCampaignField", "visible", "form", "uid", "showTitle", "renderTitle", "layoutType", "isActive", "sizeLimitMB", "acceptImagesType", "handleActions", "hint"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType", "isInFocus"], outputs: ["valueChange", "elementClick", "validationChange"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "handleActions"], outputs: ["chooseFile", "fileChange", "elementClick", "validationChange"] }, { kind: "component", type: i14.PepTextareaComponent, selector: "pep-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType"], outputs: ["valueChange", "keyup", "validationChange"] }, { kind: "component", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "elementClick", "internalFormFieldChange", "internalFormFieldClick", "formValueChange", "formFieldClick"] }, { kind: "component", type: PepInternalButtonComponent, selector: "pep-internal-button", inputs: ["key", "value", "formattedValue", "label", "referenceObjectInternalType", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "visible", "form", "showTitle", "layoutType"], outputs: ["elementClick", "valueChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-form', changeDetection: ChangeDetectionStrategy.OnPush, 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                >\n            </pep-field-generator>\n            <!-- (formValidationChange)=\"onFormValidationChanged($event)\" -->\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?.toString() | 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                [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\" [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 {{field.value?.length > 0 ? '' : 'disable'}}\"\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>", styles: [":host{display:grid}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.PepDialogService }, { type: i1$1.PepCustomizationService }, { type: i1$1.PepLayoutService }, { type: i3$1.FormBuilder }, { type: i0.KeyValueDiffers }, { type: i4$1.TranslateService }]; }, propDecorators: { isInternal: [{
@@ -4104,6 +4184,7 @@ const pepComponentsModules = [
     PepLinkModule
 ];
 class PepFormModule {
+    pepIconRegistry;
     constructor(pepIconRegistry) {
         this.pepIconRegistry = pepIconRegistry;
         this.pepIconRegistry.registerIcons([
@@ -4114,70 +4195,70 @@ class PepFormModule {
             pepIconIndicatorDotPlaceholder,
         ]);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFormModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PepFormModule, declarations: [PepFormComponent,
+            PepInternalFormComponent,
+            PepFieldGeneratorComponent,
+            PepInternalFieldGeneratorComponent,
+            PepIndicatorsComponent,
+            PepInternalButtonComponent,
+            PepInternalListComponent,
+            PepInternalMenuComponent,
+            PepInternalPageComponent,
+            PepInternalCaruselComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            // Material modules,
+            MatCommonModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatGridListModule,
+            MatIconModule,
+            MatMenuModule,
+            // External modules
+            AngularSignaturePadModule,
+            // ngx-lib modules
+            PepNgxLibModule,
+            PepDialogModule,
+            PepIconModule, PepAddressModule,
+            PepAttachmentModule,
+            PepButtonModule,
+            PepCarouselModule,
+            PepCheckboxModule,
+            PepDateModule,
+            PepImageModule,
+            PepImagesFilmstripModule,
+            PepQuantitySelectorModule,
+            PepRichHtmlTextareaModule,
+            PepSelectModule,
+            PepSelectPanelModule,
+            PepSeparatorModule,
+            PepSignatureModule,
+            PepTextareaModule,
+            PepTextboxModule,
+            PepLinkModule, PepFieldTitleModule,
+            PepGroupButtonsModule], exports: [PepFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFormModule, providers: [
+            FormBuilder
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            // Material modules,
+            MatCommonModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatGridListModule,
+            MatIconModule,
+            MatMenuModule,
+            // External modules
+            AngularSignaturePadModule,
+            // ngx-lib modules
+            PepNgxLibModule,
+            PepDialogModule,
+            PepIconModule,
+            pepComponentsModules,
+            PepFieldTitleModule,
+            PepGroupButtonsModule] });
 }
-PepFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFormModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepFormModule, declarations: [PepFormComponent,
-        PepInternalFormComponent,
-        PepFieldGeneratorComponent,
-        PepInternalFieldGeneratorComponent,
-        PepIndicatorsComponent,
-        PepInternalButtonComponent,
-        PepInternalListComponent,
-        PepInternalMenuComponent,
-        PepInternalPageComponent,
-        PepInternalCaruselComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatGridListModule,
-        MatIconModule,
-        MatMenuModule,
-        // External modules
-        SignaturePadModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepDialogModule,
-        PepIconModule, PepAddressModule,
-        PepAttachmentModule,
-        PepButtonModule,
-        PepCarouselModule,
-        PepCheckboxModule,
-        PepDateModule,
-        PepImageModule,
-        PepImagesFilmstripModule,
-        PepQuantitySelectorModule,
-        PepRichHtmlTextareaModule,
-        PepSelectModule,
-        PepSelectPanelModule,
-        PepSeparatorModule,
-        PepSignatureModule,
-        PepTextareaModule,
-        PepTextboxModule,
-        PepLinkModule, PepFieldTitleModule,
-        PepGroupButtonsModule], exports: [PepFormComponent] });
-PepFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFormModule, providers: [
-        FormBuilder
-    ], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatGridListModule,
-        MatIconModule,
-        MatMenuModule,
-        // External modules
-        SignaturePadModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepDialogModule,
-        PepIconModule,
-        pepComponentsModules,
-        PepFieldTitleModule,
-        PepGroupButtonsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PepFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4191,7 +4272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MatIconModule,
                         MatMenuModule,
                         // External modules
-                        SignaturePadModule,
+                        AngularSignaturePadModule,
                         // ngx-lib modules
                         PepNgxLibModule,
                         PepDialogModule,