@pepperi-addons/ngx-lib 0.3.15-loader.8 → 0.4.0-angular14.10

package/fesm2015/pepperi-addons-ngx-lib-form.mjs

@@ -0,0 +1,4204 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Injectable, ViewEncapsulation, ViewChild, ViewContainerRef, TemplateRef, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$1 from '@angular/forms';
+import { Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { MatCommonModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6$1 from '@angular/material/grid-list';
+import { MatGridListModule } from '@angular/material/grid-list';
+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 * 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';
+import { pepIconSystemBin, pepIconSystemEdit, pepIconSystemMenu, pepIconNumberPlus, pepIconIndicatorDotPlaceholder, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
+import * as i1$2 from '@pepperi-addons/ngx-lib/dialog';
+import { PepDialogData, PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
+import * as i3$2 from '@pepperi-addons/ngx-lib/address';
+import { PepAddressModule } from '@pepperi-addons/ngx-lib/address';
+import * as i4$3 from '@pepperi-addons/ngx-lib/attachment';
+import { PepAttachmentModule } from '@pepperi-addons/ngx-lib/attachment';
+import * as i4$4 from '@pepperi-addons/ngx-lib/button';
+import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
+import * as i5$3 from '@pepperi-addons/ngx-lib/carousel';
+import { PepCarouselComponent, PepCarouselModule } from '@pepperi-addons/ngx-lib/carousel';
+import * as i5$2 from '@pepperi-addons/ngx-lib/checkbox';
+import { PepCheckboxModule } from '@pepperi-addons/ngx-lib/checkbox';
+import * as i6 from '@pepperi-addons/ngx-lib/date';
+import { PepDateModule } from '@pepperi-addons/ngx-lib/date';
+import * as i7$1 from '@pepperi-addons/ngx-lib/image';
+import { PepImageModule } from '@pepperi-addons/ngx-lib/image';
+import * as i8$1 from '@pepperi-addons/ngx-lib/images-filmstrip';
+import { PepImagesFilmstripModule } from '@pepperi-addons/ngx-lib/images-filmstrip';
+import * as i9 from '@pepperi-addons/ngx-lib/quantity-selector';
+import { PepQuantitySelectorComponent, PepQuantitySelectorModule } from '@pepperi-addons/ngx-lib/quantity-selector';
+import * as i10 from '@pepperi-addons/ngx-lib/rich-html-textarea';
+import { PepRichHtmlTextareaModule } from '@pepperi-addons/ngx-lib/rich-html-textarea';
+import * as i11 from '@pepperi-addons/ngx-lib/select';
+import { PepSelectModule } from '@pepperi-addons/ngx-lib/select';
+import * as i12 from '@pepperi-addons/ngx-lib/separator';
+import { PepSeparatorModule } from '@pepperi-addons/ngx-lib/separator';
+import * as i13 from '@pepperi-addons/ngx-lib/signature';
+import { PepSignatureModule } from '@pepperi-addons/ngx-lib/signature';
+import * as i14 from '@pepperi-addons/ngx-lib/textarea';
+import { PepTextareaModule } from '@pepperi-addons/ngx-lib/textarea';
+import * as i15 from '@pepperi-addons/ngx-lib/textbox';
+import { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';
+import * as i16 from '@pepperi-addons/ngx-lib/link';
+import { PepLinkModule } from '@pepperi-addons/ngx-lib/link';
+import * as i7 from '@pepperi-addons/ngx-lib/field-title';
+import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
+import * as i8 from '@pepperi-addons/ngx-lib/group-buttons';
+import { PepGroupButtonsModule } from '@pepperi-addons/ngx-lib/group-buttons';
+import { BehaviorSubject, fromEvent } from 'rxjs';
+import * as i4$1 from '@ngx-translate/core';
+import * as i3 from '@angular/cdk/bidi';
+import { debounceTime } from 'rxjs/operators';
+
+class PepIndicatorsComponent {
+    constructor() {
+        this.controlType = 'indicators';
+        this.layoutType = 'table';
+    }
+}
+PepIndicatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepIndicatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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: "14.0.2", 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: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }] } });
+
+class PepInternalButtonComponent {
+    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,
+            },
+        ];
+    }
+    set visible(visible) {
+        this._visible = visible;
+        if (visible) {
+            this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+        }
+        else {
+            this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    ngOnInit() {
+        // if (this.form === null) {
+        //     this.standAlone = true;
+        //     // this.form = this.customizationService.getDefaultFromGroup(this.key, this.value, this.mandatory, this.readonly, this.disabled);
+        //     const pepField = new PepInternalButtonField({
+        //         key: this.key,
+        //         value: this.value,
+        //         mandatory: this.mandatory,
+        //         readonly: this.readonly,
+        //         disabled: this.disabled,
+        //     });
+        //     this.form = this.customizationService.getDefaultFromGroup(pepField);
+        //     this.formattedValue = this.formattedValue || this.value;
+        //     this.renderer.addClass(
+        //         this.element.nativeElement,
+        //         PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME
+        //     );
+        // }
+    }
+    ngOnChanges(changes) {
+        if (this.type === 'reference') {
+            this.createNewReference = this.value.length === 0;
+            this.referenceButtons[0].value = this.formattedValue;
+        }
+    }
+    ngOnDestroy() {
+        //
+    }
+    // groupButtonClicked(action: IPepButtonClickEvent): void {
+    //     if (action.source.key === 'action') {
+    //         this.onButtonClicked(action.event);
+    //     } else if (action.source.key === 'delete') {
+    //         this.remove();
+    //     }
+    // }
+    onButtonClicked(event) {
+        if (this.type === 'reference') {
+            const valueArr = this.value.split('/');
+            this.elementClick.emit({
+                key: this.key,
+                value: valueArr[valueArr.length - 1],
+                controlType: this.controlType,
+                eventWhich: event.which,
+                otherData: this.referenceObjectInternalType,
+            });
+        }
+        else if (this.type === 'button' && true) {
+            this.elementClick.emit({
+                key: this.key,
+                value: this.value,
+                controlType: this.controlType,
+                eventWhich: event.which,
+            });
+        }
+        else {
+            this.elementClick.emit({
+                key: this.key,
+                controlType: this.controlType,
+                eventWhich: event.which,
+            });
+        }
+    }
+    hrefFunction(event) {
+        if (event.which === 1 /*|| event.which === 2*/) {
+            this.onButtonClicked(event);
+        }
+    }
+    openReferenceObjectInternal(event) {
+        this.elementClick.emit({
+            key: this.key,
+            value: this.value,
+            controlType: this.controlType,
+            eventWhich: event.which,
+            otherData: this.referenceObjectInternalType,
+        });
+    }
+    remove() {
+        this.value = '';
+        this.valueChange.emit(this.value);
+    }
+}
+PepInternalButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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:-moz-fit-content;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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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"] }, { kind: "component", type: i8.PepGroupButtonsComponent, selector: "pep-group-buttons", inputs: ["viewType", "styleType", "sizeType", "buttons", "buttonsDisabled", "selectedButtonKey", "stretch"], outputs: ["buttonClick"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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:-moz-fit-content;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: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], formattedValue: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], referenceObjectInternalType: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], mandatory: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], rowSpan: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], elementClick: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class PepInternalMenuComponent {
+    constructor() {
+        this.key = '';
+        this.label = '';
+        this.disabled = false;
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        // @Input() hasSubMenu = false;
+        this.options = [];
+        this.invertClass = true;
+        this.controlType = 'menu';
+        this.layoutType = 'form';
+        this.elementClick = new EventEmitter();
+    }
+    // @Output() menuItemClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();
+    ngOnDestroy() {
+        // if (this.elementClick) {
+        //     this.elementClick.unsubscribe();
+        // }
+        // if (this.menuItemClick) {
+        //     this.menuItemClick.unsubscribe();
+        // }
+    }
+    menuClicked(event) {
+        this.elementClick.emit({
+            key: this.key,
+            controlType: this.controlType,
+            eventWhich: event.which,
+        });
+    }
+    menuItemClicked(itemKey) {
+        // Not in use comment in version 16.55 for webapp.
+        // this.menuItemClick.emit({ key: itemKey });
+    }
+}
+PepInternalMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepInternalMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepInternalMenuComponent, selector: "pep-internal-menu", inputs: { key: "key", label: "label", disabled: "disabled", xAlignment: "xAlignment", options: "options", invertClass: "invertClass", 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 {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>", 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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: "14.0.2", 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 {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>", 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: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], invertClass: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], elementClick: [{
+                type: Output
+            }] } });
+
+class PepInternalPageService {
+    constructor(httpService) {
+        this.httpService = httpService;
+        this.parentId = '0';
+        this.additionalApiName = '';
+        this.transactionUrl = 'Service1.svc/v1/OrderCenter/Transaction/';
+    }
+    getBaseParentUrl() {
+        const url = `${this.transactionUrl}${this.objectId}/ParentLine/${this.parentId}/`;
+        return url;
+    }
+    getChildren(callbackFunc) {
+        var _a;
+        const body = JSON.stringify({
+            TransactionUID: this.objectId,
+            SearchCode: this.searchCode,
+            AdditionalApiName: this.additionalApiName,
+            ParentTransactionLineID: this.parentId,
+            ViewType: this.viewType,
+        });
+        // Set the additional api name with view type string.
+        const moreParams = ((_a = this.additionalApiName) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? `${this.additionalApiName}/${this.viewType}`
+            : `''/${this.viewType}`;
+        const url = `${this.getBaseParentUrl()}Items/${moreParams}`;
+        this.httpService.postWapiApiCall(url, body).subscribe((res) => {
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+    initDetails(objectId, parentId, searchCode, callbackFunc) {
+        if (!objectId || !parentId) {
+            return;
+        }
+        this.objectId = objectId;
+        this.parentId = parentId;
+        this.searchCode = searchCode;
+        this.httpService
+            .getWapiApiCall(`${this.getBaseParentUrl()}ViewTypes`)
+            .subscribe((res) => {
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+    changeChildrenViewType(viewType, callbackFunc) {
+        this.viewType = viewType;
+        this.getChildren(callbackFunc);
+    }
+    changeAdditionalApiName(additionalApiName, callbackFunc) {
+        this.additionalApiName = additionalApiName;
+        this.getChildren(callbackFunc);
+    }
+    childPlusClick(itemId, fieldApiName, callbackFunc) {
+        const body = JSON.stringify({
+            TransactionUID: this.objectId,
+            SearchCode: this.searchCode,
+            ParentTransactionLineID: this.parentId,
+            TransactionLineUID: itemId,
+            FieldApiName: fieldApiName,
+            ViewType: this.viewType,
+        });
+        this.httpService
+            .postWapiApiCall(`${this.getBaseParentUrl()}IncrementValue`, body)
+            .subscribe((res) => {
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+    childMinusClick(itemId, fieldApiName, callbackFunc) {
+        const body = JSON.stringify({
+            TransactionUID: this.objectId,
+            SearchCode: this.searchCode,
+            ParentTransactionLineID: this.parentId,
+            TransactionLineUID: itemId,
+            FieldApiName: fieldApiName,
+            ViewType: this.viewType,
+        });
+        this.httpService
+            .postWapiApiCall(`${this.getBaseParentUrl()}DecrementValue`, body)
+            .subscribe((res) => {
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+    childValueChanged(itemId, fieldApiName, value, callbackFunc) {
+        const body = JSON.stringify({
+            TransactionUID: this.objectId,
+            SearchCode: this.searchCode,
+            ParentTransactionLineID: this.parentId,
+            TransactionLineUID: itemId,
+            FieldApiName: fieldApiName,
+            FieldValue: value,
+            ViewType: this.viewType,
+        });
+        this.httpService
+            .postWapiApiCall(`${this.getBaseParentUrl()}SetFieldValue`, body)
+            .subscribe((res) => {
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+}
+PepInternalPageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalPageService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepInternalPageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalPageService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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();
+        this.formValidationChange = new EventEmitter();
+        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();
+    }
+    set field(value) {
+        this._field = value;
+    }
+    get field() {
+        return this._field;
+    }
+    get isValid() {
+        if (this.field.readonly || this.field.disabled) {
+            return true;
+        }
+        else {
+            const formControl = this.form && this.form.get(this.field.key);
+            if (formControl) {
+                return formControl.valid;
+            }
+            else {
+                return false;
+            }
+        }
+    }
+    get isTouched() {
+        const formControl = this.form && this.form.get(this.field.key);
+        return formControl ? formControl.touched : false;
+    }
+    get isDirty() {
+        const formControl = this.form && this.form.get(this.field.key);
+        return formControl ? formControl.dirty : false;
+    }
+    ngOnDestroy() {
+        //
+    }
+    onFileChanged(fileData, field) {
+        const value = fileData ? JSON.stringify(fileData) : '';
+        const fieldValueChange = {
+            key: field.key,
+            value: value,
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    onAddressValueChanged(valueChange, field) {
+        const fieldValueChange = {
+            key: valueChange.key,
+            value: valueChange.value,
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    onValueChanged(value, field) {
+        const fieldValueChange = {
+            key: field.key,
+            value: value.toString(),
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    // onInternalFormFieldChanged(internalFormFieldChange: any): void {
+    //     this.internalFormFieldChange.emit(internalFormFieldChange);
+    // }
+    onFormValidationChanged(formValidationChange) {
+        this.formValidationChange.emit(formValidationChange);
+    }
+    onClick(fieldClicked) {
+        this.elementClick.emit(fieldClicked);
+    }
+    // onInternalFormFieldClick(internalFormFieldClick: any): void {
+    //     this.internalFormFieldClick.emit(internalFormFieldClick);
+    // }
+    onFormValueChanged(event) {
+        this.formValueChange.emit(event);
+    }
+    onFormFieldClick(event) {
+        this.formFieldClick.emit(event);
+    }
+    ngOnChanges(changes) {
+        // debugger;
+        // For testing.
+        // this.field.disabled = this.field.readonly = false;
+    }
+}
+PepInternalFieldGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepInternalFieldGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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", formValidationChange: "formValidationChange", 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        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (formValidationChange)=\"onFormValidationChanged($event)\" (elementClick)=\"onClick($event)\">\n    </pep-link>\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{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"], outputs: ["fileChange", "elementClick"] }, { 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"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange"] }, { 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"], outputs: ["fileChange", "elementClick"] }, { 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", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType"], outputs: ["valueChange", "elementClick"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "emptyOption", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { 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"], outputs: ["fileChange"] }, { 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"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "formattedValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "formValidationChange", "elementClick"] }, { 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", "invertClass", "layoutType"], outputs: ["elementClick"] }, { kind: "pipe", type: i5.LowerCasePipe, name: "lowercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (formValidationChange)=\"onFormValidationChanged($event)\" (elementClick)=\"onClick($event)\">\n    </pep-link>\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{width:100%;height:100%}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], checkForChanges: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], elementClick: [{
+                type: Output
+            }], formValueChange: [{
+                type: Output
+            }], formFieldClick: [{
+                type: Output
+            }] } });
+
+class PepInternalFormComponent {
+    // eventServiceSub: Subscription;
+    // public jsonLib = JSON;
+    constructor(dialogService, customizationService, layoutService, fb, differs, translate) {
+        this.dialogService = dialogService;
+        this.customizationService = customizationService;
+        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();
+    }
+    set data(value) {
+        const shouldReload = this.shouldReloadForm || !this._data;
+        this._data = value;
+        if (shouldReload) {
+            this._shouldReloadForm = false;
+            this.initForm();
+        }
+        else {
+            this.updateForm();
+        }
+    }
+    get data() {
+        return this._data;
+    }
+    set lockFields(value) {
+        this.isLocked = value;
+    }
+    get fields$() {
+        return this._fieldsSubject.asObservable();
+    }
+    get shouldReloadForm() {
+        return this._shouldReloadForm;
+    }
+    convertXAlignToHorizontalAlign(xAlign) {
+        let res = DEFAULT_HORIZONTAL_ALIGNMENT;
+        if (xAlign === X_ALIGNMENT_TYPE.None ||
+            xAlign === X_ALIGNMENT_TYPE.Left) {
+            res = 'left';
+        }
+        else if (xAlign === X_ALIGNMENT_TYPE.Right) {
+            res = 'right';
+        }
+        else {
+            res = 'center';
+        }
+        return res;
+    }
+    convertYAlignToVerticalAlign(yAlign) {
+        let res = DEFAULT_VERTICAL_ALIGNMENT;
+        if (yAlign === Y_ALIGNMENT_TYPE.None ||
+            yAlign === Y_ALIGNMENT_TYPE.Top) {
+            res = 'top';
+        }
+        else if (yAlign === Y_ALIGNMENT_TYPE.Bottom) {
+            res = 'bottom';
+        }
+        else {
+            res = 'middle';
+        }
+        return res;
+    }
+    convertOptionalValues(optionalValues) {
+        if (optionalValues && optionalValues.length > 0) {
+            return optionalValues.map((ov) => {
+                return { key: ov.Key, value: ov.Value };
+            });
+        }
+        else {
+            return [];
+        }
+    }
+    convertAddressFields(controlField, addressFields, canEditObject) {
+        const fields = [];
+        addressFields.forEach((field) => {
+            let customField;
+            const placeholder = field.ApiName;
+            if (field.ApiName.toLowerCase().indexOf('street') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 0,
+                    rowSpan: 1,
+                    col: 0,
+                    colSpan: 2,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 0,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('city') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 0,
+                    rowSpan: 1,
+                    col: 2,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 1,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('state') >= 0) {
+                customField = new PepSelectField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    placeholder,
+                    options: this.convertOptionalValues(field.OptionalValues),
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 1,
+                    rowSpan: 1,
+                    col: 0,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 2,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('zipcode') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 1,
+                    rowSpan: 1,
+                    col: 1,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 3,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('country') >= 0) {
+                customField = new PepSelectField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    placeholder,
+                    options: this.convertOptionalValues(field.OptionalValues),
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 2,
+                    rowSpan: 1,
+                    col: 2,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 4,
+                });
+            }
+            fields.push(customField);
+        });
+        return fields.sort((n1, n2) => n1.order > n2.order ? 1 : n1.order < n2.order ? -1 : 0);
+    }
+    isMatrixField(apiNameToCheck) {
+        return apiNameToCheck.indexOf('Matrix') >= 0;
+    }
+    doesFieldHavaFloatingField(controlField, floatingField) {
+        let hasFloatingField = false;
+        if (floatingField.Layout.Y >= controlField.Layout.Y &&
+            floatingField.Layout.Y <
+                controlField.Layout.Y + controlField.Layout.Height &&
+            floatingField.Layout.X >= controlField.Layout.X &&
+            floatingField.Layout.X <
+                controlField.Layout.X + controlField.Layout.Width) {
+            hasFloatingField = true;
+        }
+        return hasFloatingField;
+    }
+    getOptionsForCustomField(controlField, dataField, canEditObject) {
+        if (!controlField || !dataField) {
+            return;
+        }
+        const placeholder = controlField.ReadOnly || !canEditObject ? '' : controlField.Title;
+        return {
+            key: controlField.ApiName,
+            label: controlField.Title,
+            accessory: dataField.Accessory,
+            placeholder,
+            readonly: controlField.ReadOnly || !canEditObject,
+            disabled: !dataField.Enabled || !canEditObject,
+            hidden: controlField.Hidden,
+            mandatory: controlField.Mandatory,
+            value: dataField.Value,
+            formattedValue: dataField.FormattedValue,
+            additionalValue: dataField.AdditionalValue,
+            row: controlField.Layout.Y,
+            rowSpan: controlField.Layout.Height,
+            col: controlField.Layout.X,
+            colSpan: controlField.Layout.Width,
+            xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+            yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+            options: this.convertOptionalValues(dataField.OptionalValues),
+            groupFields: undefined,
+            maxFieldCharacters: controlField.MaxFieldCharacters,
+            minValue: controlField.MinValue,
+            maxValue: controlField.MaxValue,
+            // hasMenu: hasMenu,
+            // hasCampaign: hasCampaign,
+            // hasIndicators: hasIndicators,
+            textColor: dataField.TextColor,
+            visible: dataField.Visible,
+        };
+    }
+    convertToCustomField(controlField, dataField, canEditObject, menuField, hasCampaignField, indicatorsField, objectId, parentId, searchCode) {
+        let customField;
+        const options = this.getOptionsForCustomField(controlField, dataField, canEditObject);
+        if (controlField.ApiName === 'ObjectMenu') {
+            options.type = 'menu';
+            customField = new PepInternalMenuField(options);
+        }
+        else if (controlField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+            controlField.FieldType ===
+                FIELD_TYPE.NumberIntegerQuantitySelector ||
+            controlField.ApiName === 'QuantitySelector' ||
+            controlField.ApiName === 'UnitsQuantity' ||
+            controlField.ApiName.indexOf('size_') === 0) {
+            if (dataField.FieldType === FIELD_TYPE.InternalLink) {
+                options.type = 'button';
+            }
+            else if (dataField.FieldType === FIELD_TYPE.Package) {
+                options.type = 'packageButton';
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                dataField.FieldType === FIELD_TYPE.NumberReal) {
+                options.type = 'qs';
+                options.allowDecimal = true;
+            }
+            else if (dataField.FieldType ===
+                FIELD_TYPE.NumberIntegerQuantitySelector ||
+                dataField.FieldType === FIELD_TYPE.NumberInteger) {
+                options.type = 'qs';
+                options.allowDecimal = false;
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberIntegerForMatrix) {
+                options.type = 'qsForMatrix';
+                options.allowDecimal = false;
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                options.type = 'qsForMatrix';
+                options.allowDecimal = true;
+            }
+            options.notificationInfo = dataField.NotificationInfo;
+            customField = new PepQuantitySelectorField(options);
+        }
+        else {
+            // HACK: need to remove this..
+            if (dataField.FieldType === FIELD_TYPE.Indicators &&
+                this.isMatrixField(dataField.ApiName)) {
+                dataField.FieldType = FIELD_TYPE.InternalPage;
+            }
+            switch (dataField.FieldType) {
+                case FIELD_TYPE.Address: {
+                    const canEditGroupObject = controlField.ReadOnly
+                        ? false
+                        : canEditObject;
+                    options.groupFields = this.convertAddressFields(controlField, dataField.GroupFields, canEditGroupObject);
+                    customField = new PepAddressField(options);
+                    break;
+                }
+                case FIELD_TYPE.Indicators: {
+                    // options['type'] = 'indicators'; // Not needed this is PepIndicatorsField.
+                    customField = new PepIndicatorsField(options);
+                    break;
+                }
+                case FIELD_TYPE.InternalPage: {
+                    if (this.isMatrixField(controlField.ApiName)) {
+                        options.rowSpan = controlField.Layout.Height;
+                        options.objectId = objectId;
+                        options.parentId = parentId;
+                        options.searchCode = searchCode;
+                        customField = new PepInternalPageField(options);
+                    }
+                    else {
+                        // Not supported
+                    }
+                    break;
+                }
+                case FIELD_TYPE.RelatedObjectsCards: {
+                    options.rowSpan = controlField.Layout.Height;
+                    options.searchCode = searchCode;
+                    options.pageInfo = dataField.UIPageInfo;
+                    customField = new PepInternalCaruselField(options);
+                    break;
+                }
+                case FIELD_TYPE.Link: {
+                    options.type = 'link';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.InternalLink:
+                case FIELD_TYPE.Button: {
+                    options.type = 'button';
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.Attachment: {
+                    // options.type = 'attachment';
+                    customField = new PepAttachmentField(options);
+                    break;
+                }
+                case FIELD_TYPE.Signature: {
+                    // options.type = 'signature';
+                    customField = new PepSignatureField(options);
+                    break;
+                }
+                case FIELD_TYPE.Image:
+                case FIELD_TYPE.ImageURL: {
+                    // options.type = 'image';
+                    options.menuField =
+                        menuField &&
+                            this.doesFieldHavaFloatingField(controlField, menuField)
+                            ? menuField
+                            : null;
+                    options.hasCampaignField =
+                        hasCampaignField &&
+                            this.doesFieldHavaFloatingField(controlField, hasCampaignField)
+                            ? hasCampaignField
+                            : null;
+                    options.indicatorsField =
+                        indicatorsField &&
+                            this.doesFieldHavaFloatingField(controlField, indicatorsField)
+                            ? indicatorsField
+                            : null;
+                    customField = new PepImageField(options);
+                    break;
+                }
+                case FIELD_TYPE.Images: {
+                    // options.type = 'images';
+                    customField = new PepImagesField(options);
+                    break;
+                }
+                case FIELD_TYPE.Email: {
+                    options.type = 'email';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.Phone: {
+                    options.type = 'phone';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.Duration: {
+                    options.type = 'duration';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Default:
+                case FIELD_TYPE.TextBox:
+                case FIELD_TYPE.LimitedLengthTextBox:
+                case FIELD_TYPE.TextHeader:
+                case FIELD_TYPE.CalculatedString:
+                case FIELD_TYPE.MapDataString: {
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.TextArea: {
+                    customField = new PepTextareaField(options);
+                    break;
+                }
+                case FIELD_TYPE.RichTextHTML: {
+                    customField = new PepRichHtmlTextareaField(options);
+                    break;
+                }
+                case FIELD_TYPE.Date:
+                case FIELD_TYPE.LimitedDate:
+                case FIELD_TYPE.CalculatedDate:
+                case FIELD_TYPE.DateAndTime: {
+                    options.type =
+                        dataField.FieldType === FIELD_TYPE.DateAndTime
+                            ? 'datetime'
+                            : 'date';
+                    customField = new PepDateField(options);
+                    break;
+                }
+                case FIELD_TYPE.NumberInteger:
+                case FIELD_TYPE.CalculatedInt:
+                case FIELD_TYPE.MapDataInt: {
+                    options.type = 'int';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Percentage: {
+                    options.type = 'percentage';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Currency: {
+                    options.type = 'currency';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.NumberReal:
+                case FIELD_TYPE.CalculatedReal:
+                case FIELD_TYPE.MapDataReal:
+                case FIELD_TYPE.Sum:
+                case FIELD_TYPE.Totals: {
+                    options.type = 'real';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Boolean:
+                case FIELD_TYPE.CalculatedBool: {
+                    customField = new PepCheckboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.BooleanText: {
+                    options.type = 'booleanText';
+                    customField = new PepCheckboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.ComboBox:
+                case FIELD_TYPE.EmptyComboBox:
+                case FIELD_TYPE.MapDataDropDown: {
+                    // options.type = 'select';
+                    customField = new PepSelectField(options);
+                    break;
+                }
+                case FIELD_TYPE.MultiTickBox:
+                case FIELD_TYPE.MultiTickBoxToComboBox:
+                case FIELD_TYPE.EmptyMultiTickBox: {
+                    options.type = 'multi';
+                    customField = new PepSelectField(options);
+                    break;
+                }
+                case FIELD_TYPE.GuidReferenceType: {
+                    options.type = 'reference';
+                    options.referenceObjectType = dataField.ReferenceObjectType;
+                    options.referenceObjectSubType =
+                        dataField.ReferenceObjectSubType;
+                    options.referenceObjectInternalType =
+                        dataField.ReferenceObjectInternalType;
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.ListOfObjects: {
+                    options.type = 'listofobjects';
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.Separator: {
+                    customField = new PepSeparatorField(options);
+                    break;
+                }
+                /*
+                    case FIELD_TYPE.Images: return that.field(value);
+                */
+                case FIELD_TYPE.NumberRealQuantitySelector:
+                case FIELD_TYPE.NumberIntegerQuantitySelector: {
+                    options.type = 'qs';
+                    options.allowDecimal =
+                        dataField.FieldType ===
+                            FIELD_TYPE.NumberRealQuantitySelector;
+                    options.notificationInfo = dataField.NotificationInfo;
+                    customField = new PepQuantitySelectorField(options);
+                    break;
+                }
+                case FIELD_TYPE.Package: {
+                    options.type = 'packageButton';
+                    options.notificationInfo = dataField.NotificationInfo;
+                    customField = new PepQuantitySelectorField(options);
+                    break;
+                }
+            }
+        }
+        if (!customField) {
+            options.label = controlField.ApiName + ' is not supported!!!';
+            customField = new PepSeparatorField(options);
+        }
+        return customField;
+    }
+    getFieldFormattedValue(field) {
+        let fieldFormattedValue = field.formattedValue;
+        // Fix for the custom check box component.
+        if (field.controlType === 'checkbox') {
+            fieldFormattedValue = fieldFormattedValue === 'true';
+        }
+        // Fix for the custom button component.
+        if (field.controlType === 'button') {
+            fieldFormattedValue =
+                fieldFormattedValue === '0' ? '' : fieldFormattedValue;
+        }
+        return fieldFormattedValue;
+    }
+    toControlGroup(fields) {
+        const group = {};
+        if (fields && fields.length > 0) {
+            fields.forEach((field) => {
+                if (field.groupFields && field.groupFields.length > 0) {
+                    const subGroup = {};
+                    field.groupFields.forEach((groupField) => {
+                        if (groupField.mandatory &&
+                            !field.readonly &&
+                            !field.disabled) {
+                            subGroup[groupField.key] = [
+                                {
+                                    value: groupField.formattedValue || '',
+                                    disabled: field.readonly ||
+                                        field.disabled ||
+                                        groupField.disabled,
+                                },
+                                [Validators.required],
+                            ];
+                        }
+                        else {
+                            subGroup[groupField.key] = [
+                                {
+                                    value: groupField.formattedValue || '',
+                                    disabled: field.readonly ||
+                                        field.disabled ||
+                                        groupField.disabled,
+                                },
+                                [Validators.nullValidator],
+                            ];
+                        }
+                    });
+                    group[field.key] = this.fb.group(subGroup);
+                }
+                else {
+                    const validators = field.getValidators();
+                    const fieldFormattedValue = this.getFieldFormattedValue(field);
+                    group[field.key] = [
+                        {
+                            value: fieldFormattedValue || '',
+                            disabled: field.disabled,
+                        },
+                        validators,
+                    ];
+                }
+            });
+        }
+        return this.fb.group(group);
+    }
+    createBaseField(uiControlField, dataField) {
+        const customField = this.convertToCustomField(uiControlField, dataField, this.canEditObject, this.menuDataField, this.hasCampaignDataField, this.indicatorsDataField, this.objectId, this.parentId, this.searchCode);
+        return customField;
+    }
+    showFormValidationMessage() {
+        const fields = this.fields;
+        let emptyMandatoryFieldsMsg = '';
+        let notValidFieldsMsg = '';
+        // for (let i: number = 0; i < fields.length; i++) {
+        //     let field = fields[i];
+        for (const field of fields) {
+            const formControl = this.form && this.form.get(field.key);
+            if (formControl) {
+                // Mandatory is empty.
+                if (field.mandatory &&
+                    formControl.value.toString().trim().length === 0) {
+                    emptyMandatoryFieldsMsg +=
+                        '<li><small>' + field.label + '</small></li>';
+                }
+                else if (!field.disabled && !formControl.valid) {
+                    notValidFieldsMsg +=
+                        '<li><small>' + field.label + '</small></li>';
+                }
+            }
+        }
+        // Add the header message of the empty mandatory fields
+        if (emptyMandatoryFieldsMsg.length > 0) {
+            emptyMandatoryFieldsMsg =
+                '<div>' +
+                    this.translate.instant('MESSAGES.ERROR_MANDATORY_FIELDS') +
+                    "</div><ul style='padding: 0 20px;'>" +
+                    emptyMandatoryFieldsMsg +
+                    '</ul><br/>';
+        }
+        // Add the header message of the empty mandatory fields
+        if (notValidFieldsMsg.length > 0) {
+            notValidFieldsMsg =
+                '<div>' +
+                    this.translate.instant('MESSAGES.ERROR_INVALID_FIELDS') +
+                    "</div><ul style='padding: 0 20px;'>" +
+                    notValidFieldsMsg +
+                    '</ul>';
+        }
+        const title = this.translate.instant('MESSAGES.TITLE_NOTICE');
+        const data = new PepDialogData({
+            title,
+            content: emptyMandatoryFieldsMsg + notValidFieldsMsg,
+        });
+        this.dialogService.openDefaultDialog(data);
+    }
+    ngOnInit() {
+        const themeVars = this.customizationService.getThemeVariables();
+        // convert rem to pixel
+        const RemToPixel = 16;
+        this.formGutterSize =
+            this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_SPACEING_KEY) * RemToPixel;
+        this.cardGutterSize =
+            this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.CARD_SPACEING_KEY) * RemToPixel;
+    }
+    ngDoCheck() {
+        const changes = this.differ.diff(this.data); // check for changes
+        if (changes) {
+            this.updateForm();
+            this.checkForChanges = new Date();
+        }
+    }
+    ngOnChanges(changes) {
+        // if (changes.data && changes.data.currentValue) {
+        //     // Load changes
+        //     if (!this.shouldReloadForm && changes.data.previousValue) {
+        //         this.data = changes.data.currentValue;
+        //         this.updateForm();
+        //     } else {
+        //         this._shouldReloadForm = false;
+        //         this.initForm();
+        //     }
+        // }
+        // if (this.shouldReloadForm || !changes?.data?.previousValue) {
+        //     this._shouldReloadForm = false;
+        //     this.initForm();
+        //     this.checkForChanges = new Date();
+        // }
+    }
+    ngOnDestroy() {
+        //
+    }
+    getUiControlFields() {
+        return this.layout ? this.layout.ControlFields : [];
+    }
+    initFieldsStructure(fields, maxRow) {
+        const themeVars = this.customizationService.getThemeVariables();
+        // Set form row height.
+        if (this.layoutType === 'card') {
+            const cardFieldHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.CARD_FIELD_HEIGHT_KEY);
+            this.rowHeight = cardFieldHeight;
+        }
+        else {
+            const rowFieldHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_FIELD_HEIGHT_KEY);
+            const rowFieldTitleHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_FIELD_TITLE_HEIGHT_KEY);
+            this.rowHeight = rowFieldHeight + rowFieldTitleHeight;
+        }
+        // Create the fields structure (the fields must be sorted!!!).
+        if (fields.length > 0) {
+            // Init the layout.
+            if (
+            // this.layoutType === 'form' ||
+            this.layoutType === 'table') {
+                this.fields = fields;
+                this._fieldsSubject.next(fields);
+                this.rows = [];
+                for (let i = 0; i <= maxRow; i++) {
+                    this.rows[i] = [];
+                }
+                // for (let i = 0; i < fields.length; i++) {
+                // const field = fields[i]
+                for (const field of fields) {
+                    this.rows[field.row].push(field);
+                }
+            }
+            else {
+                const doesfieldExistIn = new Array(maxRow);
+                for (let i = 0; i < doesfieldExistIn.length; i++) {
+                    doesfieldExistIn[i] = new Array(this.columns);
+                    for (let j = 0; j < doesfieldExistIn[i].length; j++) {
+                        doesfieldExistIn[i][j] = false;
+                    }
+                }
+                // Run in squere (row - colspan, col - rowspan) and put true where it should.
+                // for (let index = 0; index < fields.length; index++) {
+                //     const currentField = fields[index];
+                for (const currentField of fields) {
+                    if (currentField.rowSpan > 1) {
+                        for (let row = currentField.row; row < currentField.row + currentField.rowSpan; row++) {
+                            if (currentField.colSpan > 1) {
+                                for (let col = currentField.col; col <
+                                    currentField.col + currentField.colSpan; col++) {
+                                    if (doesfieldExistIn.length > row &&
+                                        doesfieldExistIn[0].length > col) {
+                                        doesfieldExistIn[row][col] = true;
+                                    }
+                                }
+                            }
+                            else {
+                                if (doesfieldExistIn.length > row &&
+                                    doesfieldExistIn[0].length >
+                                        currentField.col) {
+                                    doesfieldExistIn[row][currentField.col] = true;
+                                }
+                            }
+                        }
+                    }
+                    else if (currentField.colSpan > 1) {
+                        for (let col = currentField.col; col < currentField.col + currentField.colSpan; col++) {
+                            if (doesfieldExistIn.length > currentField.row &&
+                                doesfieldExistIn[0].length > col) {
+                                doesfieldExistIn[currentField.row][col] = true;
+                            }
+                        }
+                    }
+                    else {
+                        if (doesfieldExistIn.length > currentField.row &&
+                            doesfieldExistIn[0].length > currentField.col) {
+                            doesfieldExistIn[currentField.row][currentField.col] = true;
+                        }
+                    }
+                }
+                // Create empty fields where doesfieldExistIn is false (For the md-grid-list UI Component).
+                for (let i = 0; i < doesfieldExistIn.length; i++) {
+                    for (let j = 0; j < doesfieldExistIn[i].length; j++) {
+                        if (!doesfieldExistIn[i][j]) {
+                            // Create empty field and add it to the fields list.
+                            fields.push(new PepPlaceholderField({
+                                key: i + '_' + j,
+                                label: '',
+                                placeholder: '',
+                                readonly: false,
+                                disabled: false,
+                                hidden: false,
+                                mandatory: false,
+                                value: '',
+                                formattedValue: '',
+                                row: i,
+                                rowSpan: 1,
+                                col: j,
+                                colSpan: 1,
+                                order: 1,
+                            }));
+                        }
+                    }
+                }
+                // Sort the fields again.
+                this.fields = fields.sort((f1, f2) => f1.row > f2.row
+                    ? 1
+                    : f1.row < f2.row
+                        ? -1
+                        : f1.col > f2.col
+                            ? 1
+                            : f1.col < f2.col
+                                ? -1
+                                : 0);
+                this._fieldsSubject.next(fields);
+            }
+        }
+    }
+    setForm(isForUpdate = false) {
+        var _a;
+        let allFieldsAreReadOnly = true;
+        if (!isForUpdate) {
+            const fields = [];
+            for (const currentField of this.fields) {
+                // Add all fields except 'internalPage' (for children).
+                if (currentField.controlType !== 'internalPage') {
+                    fields.push(currentField);
+                }
+                if (!currentField.readonly) {
+                    allFieldsAreReadOnly = false;
+                }
+            }
+            this.form = this.toControlGroup(fields);
+        }
+        else {
+            // Update form values if changed by calculated fields.
+            for (let i = 0; i < this.fields.length; i++) {
+                let currentField = this.fields[i];
+                if (currentField.controlType === 'internalCarusel') {
+                    // Hack to override (update) the field.
+                    const uiControlField = this.getUiControlFields().find(cf => cf.ApiName === currentField.key);
+                    const dataField = this.data.Fields.find(df => df.ApiName === currentField.key);
+                    currentField = this.createBaseField(uiControlField, dataField);
+                    this._fieldsSubject.value[i] = currentField;
+                }
+                else if (currentField.controlType !== 'internalPage') {
+                    if (currentField.groupFields &&
+                        currentField.groupFields.length > 0) {
+                        // for (let j = 0; j < currentField.groupFields.length; j++) {
+                        //     let currentGroupField = currentField.groupFields[j];
+                        for (const currentGroupField of currentField.groupFields) {
+                            const fieldFormattedValue = this.getFieldFormattedValue(currentGroupField);
+                            this.customizationService.updateFormField(this.form, currentGroupField, fieldFormattedValue, currentField);
+                        }
+                    }
+                    else {
+                        const fieldFormattedValue = this.getFieldFormattedValue(currentField);
+                        // this.form.controls[currentField.key].setValue(fieldFormattedValue);
+                        this.customizationService.updateFormField(this.form, currentField, fieldFormattedValue);
+                    }
+                }
+                if (!currentField.readonly) {
+                    allFieldsAreReadOnly = false;
+                }
+            }
+        }
+        let isFormValid = (_a = this.form) === null || _a === void 0 ? void 0 : _a.valid;
+        // Change validation to true if all fields are read only.
+        if (!isFormValid && allFieldsAreReadOnly) {
+            isFormValid = true;
+        }
+        this.onFormValidationChanged(isFormValid);
+        // Set it to false to enable all fields.
+        if (this.isInternal && this.isLocked) {
+            this.isLocked = false;
+        }
+    }
+    initForm() {
+        if (this.data && this.data.Fields) {
+            const fields = this.convertCustomFields(this.getUiControlFields(), this.data.Fields);
+            const maxRow = Math.max(...fields.map((f) => {
+                return f.row + f.rowSpan;
+            }));
+            this.columns = Math.max(...fields.map((f) => {
+                return f.col + f.colSpan;
+            }));
+            this.initFieldsStructure(fields, maxRow);
+            this.setForm();
+        }
+    }
+    updateField(customField, updatedField) {
+        const options = {
+            disabled: !updatedField.Enabled || !this.canEditObject,
+            readonly: !updatedField.Enabled || !this.canEditObject,
+            visible: updatedField.Visible,
+            value: updatedField.Value,
+            additionalValue: updatedField.AdditionalValue,
+            formattedValue: updatedField.FormattedValue,
+            textColor: updatedField.TextColor,
+        };
+        if (customField instanceof PepQuantitySelectorField) {
+            const notificationInfo = updatedField.NotificationInfo;
+            options.notificationInfo = notificationInfo;
+            // Change type if it's change (only for allowDecimal).
+            let allowDecimal = false;
+            if (updatedField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                updatedField.FieldType === FIELD_TYPE.NumberReal ||
+                updatedField.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                allowDecimal = true;
+            }
+            options.allowDecimal = allowDecimal;
+        }
+        else if (customField instanceof PepSelectField) {
+            options.options = this.convertOptionalValues(updatedField.OptionalValues);
+            if (!options.options || options.options.length === 0) {
+                options.options.push({
+                    key: options.value,
+                    value: options.formattedValue,
+                });
+            }
+        }
+        else if (customField instanceof PepInternalCaruselField) {
+            options.pageInfo = updatedField.UIPageInfo;
+        }
+        customField.update(options);
+    }
+    updateForm() {
+        if (this.data && this.data.Fields) {
+            for (const currentField of this.data.Fields) {
+                const customField = this.fields.filter((f) => f.key === currentField.ApiName)[0];
+                // Update all fields except 'internalPage' type (for children).
+                if (customField && customField.controlType !== 'internalPage') {
+                    this.updateField(customField, currentField);
+                    // Update the group fields.
+                    if (customField.controlType === 'address' &&
+                        currentField.GroupFields) {
+                        // for (let j = 0; j < currentField.GroupFields.length; j++) {
+                        // let currentGroupField = currentField.GroupFields[j];
+                        for (const currentGroupField of currentField.GroupFields) {
+                            currentGroupField.Enabled = !currentField.Enabled
+                                ? false
+                                : currentGroupField.Enabled;
+                            const customGroupField = customField.groupFields.filter((f) => f.key === currentGroupField.ApiName)[0];
+                            this.updateField(customGroupField, currentGroupField);
+                        }
+                    }
+                }
+            }
+            this.setForm(true);
+        }
+    }
+    ReloadForm() {
+        this._shouldReloadForm = true;
+    }
+    // onSubmit() {
+    //     if (this.form.valid) {
+    //         this.payLoad = JSON.stringify(this.form.value);
+    //         //this.submitted.emit(this.form.value);
+    //     }
+    // }
+    getFormControlById(key) {
+        let formControl = null;
+        this.fields.forEach((field) => {
+            if (field.key === key) {
+                formControl = this.form.get(field.key);
+                return;
+            }
+            else if (field.groupFields && field.groupFields.length > 0) {
+                field.groupFields.forEach((groupField) => {
+                    if (groupField.key === key) {
+                        formControl = this.form.get(field.key + '.' + groupField.key);
+                        return;
+                    }
+                });
+            }
+        });
+        return formControl;
+    }
+    setSpecialFields(controlFields, dataFields) {
+        // let cf;
+        // for (let index = 0; index < controlFields.length; index++) {
+        //     cf = controlFields[index];
+        for (const cf of controlFields) {
+            if (cf.ApiName === 'ObjectMenu') {
+                this.menuField = cf;
+            }
+            else if (cf.ApiName === 'ItemHasActiveCampaign') {
+                this.hasCampaignField = cf;
+            }
+            else if (cf.ApiName === 'ItemIndicatorsWithoutCampaign') {
+                this.indicatorsField = cf;
+            }
+        }
+        // let df;
+        // for (let index = 0; index < dataFields.length; index++) {
+        //     df = dataFields[index];
+        for (const df of dataFields) {
+            if (df.ApiName === 'ObjectMenu') {
+                this.menuDataField = df;
+            }
+            else if (df.ApiName === 'ItemHasActiveCampaign') {
+                this.hasCampaignDataField = df;
+            }
+            else if (df.ApiName === 'ItemIndicatorsWithoutCampaign') {
+                this.indicatorsDataField = df;
+            }
+        }
+        if (this.menuField && this.menuDataField) {
+            this.menuDataField.Layout = this.menuField.Layout;
+        }
+        if (this.hasCampaignField && this.hasCampaignDataField) {
+            this.hasCampaignDataField.Layout = this.hasCampaignField.Layout;
+        }
+        if (this.indicatorsField && this.indicatorsDataField) {
+            this.indicatorsDataField.Layout = this.indicatorsField.Layout;
+        }
+        // Check if menu is floating on other field.
+        // for (let index = 0; index < controlFields.length; index++) {
+        //     cf = controlFields[index];
+        for (const cf of controlFields) {
+            if (this.menuField && cf.ApiName !== 'ObjectMenu') {
+                this.hasMenuFloatingOnOtherField = this.doesFieldHavaFloatingField(cf, this.menuField);
+                if (this.hasMenuFloatingOnOtherField) {
+                    break;
+                }
+            }
+        }
+    }
+    convertCustomFields(controlFields, dataFields) {
+        if (this.layoutType !== 'table') {
+            this.setSpecialFields(controlFields, dataFields);
+        }
+        else {
+            // HACK: convert to center alignment if table view & special fields)
+            controlFields.forEach((field, index) => {
+                if (field.ApiName === 'UnitsQuantity' ||
+                    field.ApiName === 'QuantitySelector' ||
+                    field.ApiName === 'ObjectMenu' ||
+                    field.FieldType === FIELD_TYPE.Image ||
+                    field.FieldType === FIELD_TYPE.ImageURL ||
+                    field.FieldType === FIELD_TYPE.Indicators ||
+                    field.FieldType === FIELD_TYPE.Boolean ||
+                    field.FieldType === FIELD_TYPE.CalculatedBool ||
+                    field.FieldType === FIELD_TYPE.Signature ||
+                    field.FieldType ===
+                        FIELD_TYPE.NumberIntegerQuantitySelector ||
+                    field.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                    field.FieldType === FIELD_TYPE.Package ||
+                    field.FieldType === FIELD_TYPE.NumberIntegerForMatrix ||
+                    field.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                    field.Layout.XAlignment = X_ALIGNMENT_TYPE.Center;
+                }
+                else {
+                    // HACK: align the rest of the fields by the culture.
+                    // field.Layout.XAlignment = this.layoutService.isRtl() ? X_ALIGNMENT_TYPE.Right : X_ALIGNMENT_TYPE.Left;
+                }
+            });
+        }
+        const fields = [];
+        controlFields.forEach((field, index) => {
+            const dataField = dataFields.filter((df) => df.ApiName === field.ApiName)[0];
+            if (!dataField) {
+                return;
+            }
+            // If current view is not table view and those fields are special.
+            if (this.layoutType !== 'table' &&
+                ((this.hasMenuFloatingOnOtherField &&
+                    this.menuField &&
+                    this.menuField.ApiName === field.ApiName) ||
+                    (this.indicatorsField &&
+                        this.indicatorsField.ApiName === field.ApiName) ||
+                    (this.hasCampaignField &&
+                        this.hasCampaignField.ApiName === field.ApiName))) {
+                return;
+            }
+            // Set type to link
+            if (index === 0 && this.firstFieldAsLink) {
+                dataField.FieldType = FIELD_TYPE.InternalLink;
+                // dataField.Value = this.getInternalLinkHref();
+            }
+            if (field.ApiName === 'ObjectMenu') {
+                dataField.Enabled = true;
+                // HACK : Until "Enabled" returns from the server, we set PepMenu to be
+                //        Disabled in cart on regular items and not campign items.
+            }
+            const customField = this.createBaseField(field, dataField);
+            fields.push(customField);
+        });
+        return fields.sort((f1, f2) => f1.row > f2.row
+            ? 1
+            : f1.row < f2.row
+                ? -1
+                : f1.col > f2.col
+                    ? 1
+                    : f1.col < f2.col
+                        ? -1
+                        : 0);
+    }
+    onFormValidationChanged(formValidationChange) {
+        this.formValidationChange.emit(formValidationChange);
+    }
+    onValueChanged(event) {
+        this.onFormValidationChanged(this.form.valid);
+        const formControl = this.getFormControlById(event.key);
+        const isValid = formControl ? formControl.valid : true;
+        // const isValid = true;
+        if (isValid) {
+            // Set it to false to disable all fields.
+            if (this.isInternal && this.layoutType === 'form') {
+                this.isLocked = true;
+            }
+            // Update the current field value.
+            const currentField = this.fields.find((f) => f.key === event.key);
+            if (currentField) {
+                currentField.formattedValue = currentField.value = event.value;
+            }
+            this.valueChange.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: event.key,
+                value: event.value,
+                controlType: event.controlType,
+            });
+        }
+    }
+    onClick(fieldClickEvent) {
+        const clickedUiControlField = this.data.Fields.filter((f) => f.ApiName === fieldClickEvent.key)[0];
+        const idType = this.data.Type ? this.data.Type.toString() : '';
+        if (clickedUiControlField) {
+            this.fieldClick.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: fieldClickEvent.key,
+                idType,
+                which: fieldClickEvent.eventWhich,
+                value: fieldClickEvent.value,
+                controlType: fieldClickEvent.controlType,
+                fieldType: clickedUiControlField.FieldType,
+                otherData: fieldClickEvent.otherData,
+            });
+        }
+        else {
+            // For other api names (like enter children etc).
+            this.fieldClick.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: fieldClickEvent.key,
+                idType,
+                which: fieldClickEvent.eventWhich,
+                value: fieldClickEvent.value,
+                controlType: fieldClickEvent.controlType,
+                otherData: fieldClickEvent.otherData,
+            });
+        }
+    }
+    // // This event is for handle the internal page events.
+    // onInternalFormFieldClicked(internalFormFieldClick: any): void {
+    //     this.internalFormFieldClick.emit(internalFormFieldClick);
+    // }
+    // // This event is for handle the internal page events.
+    // onInternalFormFieldChanged(internalFormFieldChange: any): void {
+    //     this.internalFormFieldChange.emit(internalFormFieldChange);
+    // }
+    // This event is for handle the related items change events.
+    onFormValueChanged(event) {
+        // this.valueChange.emit(event);
+    }
+    // This event is for handle the related items change events.
+    onFormFieldClick(event) {
+        this.fieldClick.emit(event);
+    }
+}
+PepInternalFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-internal-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-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                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>", 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"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange"] }, { 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"], outputs: ["fileChange", "elementClick"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType"], outputs: ["valueChange", "elementClick"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive"], outputs: ["fileChange"] }, { 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"] }, { kind: "component", type: PepInternalFieldGeneratorComponent, selector: "pep-internal-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "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: "14.0.2", 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                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-internal-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-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                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>", 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: [{
+                type: Input
+            }], isReport: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], lockEvents: [{
+                type: Input
+            }], canEditObject: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], lockFields: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], objectId: [{
+                type: Input
+            }], parentId: [{
+                type: Input
+            }], searchCode: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], firstFieldAsLink: [{
+                type: Input
+            }], checkForChanges: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], fieldClick: [{
+                type: Output
+            }] } });
+
+class PepInternalListComponent {
+    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) => {
+            this.deviceHasMouse = deviceHasMouse;
+        });
+    }
+    get items() {
+        return this._items;
+    }
+    ngOnInit() {
+        this.containerWidth = 0;
+    }
+    ngOnChanges(changes) {
+        if (this.containerWidth <= 0) {
+            this.setContainerWidth();
+        }
+    }
+    ngOnDestroy() {
+        // if (this.valueChange) {
+        //     this.valueChange.unsubscribe();
+        // }
+        // if (this.itemClick) {
+        //     this.itemClick.unsubscribe();
+        // }
+        // if (this.fieldClick) {
+        //     this.fieldClick.unsubscribe();
+        // }
+    }
+    setContainerWidth() {
+        const selectionCheckBoxWidth = 0;
+        const rowHeight = 40; // the table row height (2.5rem * 16font-size).
+        const style = window.getComputedStyle(this.element.nativeElement.parentElement);
+        // The container-fluid class padding left + right + border
+        const containerFluidSpacing = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const parentContainer = this.element.nativeElement.parentElement.parentElement > 0
+            ? this.element.nativeElement.parentElement.parentElement
+            : this.element.nativeElement.parentElement;
+        // Calculate if vertical scroll should appear, if so set the scroll width. (this.totalRows + 1) + 1 is for the header row.
+        const scrollWidth = parentContainer.clientHeight < rowHeight * (this.totalRows + 1)
+            ? 18
+            : 0; // 18 is the default scroll width.
+        // The selectionCheckBoxWidth width + containerFluidSpacing + scrollWidth.
+        const rowHeaderWidthToSub = containerFluidSpacing + selectionCheckBoxWidth + scrollWidth;
+        this.containerWidth = parentContainer.offsetWidth - rowHeaderWidthToSub;
+    }
+    clear() {
+        this.cleanItems();
+        this.uiControl = null;
+    }
+    toggleItems(isVisible) {
+        this.showItems = isVisible;
+        this.lockEvents = !isVisible;
+    }
+    updateScrollItems(startIndex, endIndex, loadInChunks = true) {
+        this.scrollItems = this.items.slice(startIndex, endIndex);
+    }
+    getUniqItemId(itemId, itemType = '') {
+        return itemId + this.SEPARATOR + itemType;
+    }
+    setLayout() {
+        if (this.totalRows === 0 ||
+            !this.uiControl ||
+            !this.uiControl.ControlFields ||
+            this.uiControl.ControlFields.length === 0) {
+            return;
+        }
+        this.uiControl.ControlFields.forEach((cf) => {
+            if (cf.ColumnWidth === 0) {
+                cf.ColumnWidth = 10;
+            }
+            if (this.isTable &&
+                (cf.FieldType === FIELD_TYPE.Image ||
+                    // cf.FieldType === FIELD_TYPE.Indicators || ???
+                    cf.FieldType === FIELD_TYPE.Signature ||
+                    cf.FieldType === FIELD_TYPE.NumberIntegerQuantitySelector ||
+                    cf.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                    cf.FieldType === FIELD_TYPE.NumberIntegerForMatrix ||
+                    cf.FieldType === FIELD_TYPE.NumberRealForMatrix ||
+                    cf.FieldType === FIELD_TYPE.Package ||
+                    cf.ApiName === 'UnitsQuantity' ||
+                    cf.ApiName === 'QuantitySelector')) {
+                cf.Layout.XAlignment = 3;
+            }
+        });
+        if (!this.cd['destroyed']) {
+            this.cd.detectChanges();
+        }
+        // Set the columns width.
+        if (this.containerWidth <= 0) {
+            this.setContainerWidth();
+        }
+        this.calcColumnsWidth();
+        this.checkForChanges = new Date().getTime();
+    }
+    calcColumnsWidth() {
+        const fixedMultiple = 3.78; // for converting em to pixel.
+        const length = this.uiControl.ControlFields.length;
+        const selectionCheckBoxWidth = 0;
+        // Is table AND there is at least one column of width type of percentage.
+        if (this.isTable) {
+            if (this.uiControl && this.uiControl.ControlFields) {
+                this.hasColumnWidthOfTypePercentage =
+                    this.uiControl.ControlFields.filter((cf) => cf.ColumnWidthType === 1).length === 0;
+            }
+        }
+        // If the columns size is fixed and the total is small then the container change it to percentage.
+        if (!this.hasColumnWidthOfTypePercentage) {
+            const totalFixedColsWidth = this.uiControl.ControlFields.map((cf) => cf.ColumnWidth * fixedMultiple).reduce((sum, current) => sum + current);
+            if (window.innerWidth > totalFixedColsWidth) {
+                this.hasColumnWidthOfTypePercentage = true;
+            }
+        }
+        let totalCalcColsWidth = 0;
+        // Calc by percentage
+        if (this.hasColumnWidthOfTypePercentage) {
+            const totalColsWidth = this.uiControl.ControlFields.map((cf) => cf.ColumnWidth).reduce((sum, current) => sum + current);
+            for (let index = 0; index < length; index++) {
+                const uiControlField = this.uiControl
+                    .ControlFields[index];
+                const calcColumnWidthPercentage = (100 / totalColsWidth) * uiControlField.ColumnWidth;
+                uiControlField.calcColumnWidth = Math.floor((this.containerWidth * calcColumnWidthPercentage) / 100);
+                if (index === length - 1) {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString =
+                        'calc(100% - ' + totalCalcColsWidth + 'px)'; // For 100%
+                }
+                else {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString =
+                        uiControlField.calcColumnWidth + 'px';
+                    totalCalcColsWidth += uiControlField.calcColumnWidth;
+                }
+            }
+            this.renderer.setStyle(this.element.nativeElement, 'width', 'inherit');
+        }
+        else {
+            for (let index = 0; index < length; index++) {
+                const uiControlField = this.uiControl
+                    .ControlFields[index];
+                const currentFixedWidth = Math.floor(uiControlField.ColumnWidth * fixedMultiple);
+                if (index === length - 1) {
+                    uiControlField.calcTitleColumnWidthString =
+                        currentFixedWidth + 'px';
+                    uiControlField.calcColumnWidthString =
+                        currentFixedWidth - 4 + 'px'; // -4 for the row padding.
+                }
+                else {
+                    uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString =
+                        currentFixedWidth + 'px';
+                }
+                totalCalcColsWidth += currentFixedWidth;
+            }
+            this.renderer.setStyle(this.element.nativeElement, 'width', totalCalcColsWidth + selectionCheckBoxWidth + 'px');
+        }
+    }
+    initResizeData() {
+        this.startX = 0;
+        this.startWidth = 0;
+        this.tableStartWidth = 0;
+        this.pressedColumn = '';
+    }
+    onListResizeStart(event, columnKey) {
+        this.pressedColumn = columnKey;
+        this.startX = event.x;
+        this.startWidth = event.target.closest('.header-column').offsetWidth;
+        // Set the tableStartWidth to the container offsetWidth
+        this.tableStartWidth = this.noVirtualScrollCont.nativeElement.offsetWidth;
+    }
+    onListResize(event) {
+        if (this.pressedColumn.length > 0) {
+            const widthToAdd = this.layoutService.isRtl()
+                ? this.startX - event.x
+                : event.x - this.startX;
+            // Set the width of the column and the container of the whole columns.
+            if (this.startWidth + widthToAdd >= 48 || widthToAdd > 0) {
+                const length = this.uiControl.ControlFields.length;
+                let totalCalcColsWidth = 0;
+                for (let index = 0; index < length; index++) {
+                    const uiControlField = this.uiControl
+                        .ControlFields[index];
+                    if (index === length - 1) {
+                        // Calc the last column only in percentage type.
+                        if (this.hasColumnWidthOfTypePercentage) {
+                            uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString =
+                                'calc(100% - ' + totalCalcColsWidth + 'px)'; // For 100%
+                        }
+                        else {
+                            if (uiControlField.ApiName === this.pressedColumn) {
+                                uiControlField.calcColumnWidth =
+                                    this.startWidth + widthToAdd;
+                                uiControlField.calcTitleColumnWidthString =
+                                    uiControlField.calcColumnWidth + 'px';
+                                uiControlField.calcColumnWidthString =
+                                    uiControlField.calcColumnWidth - 4 + 'px';
+                            }
+                        }
+                    }
+                    else if (uiControlField.ApiName === this.pressedColumn) {
+                        uiControlField.calcColumnWidth =
+                            this.startWidth + widthToAdd;
+                        uiControlField.calcTitleColumnWidthString = uiControlField.calcColumnWidthString =
+                            uiControlField.calcColumnWidth + 'px';
+                    }
+                    totalCalcColsWidth += uiControlField.calcColumnWidth;
+                }
+                this.renderer.setStyle(this.element.nativeElement, 'width', this.tableStartWidth + widthToAdd + 'px');
+            }
+            this.checkForChanges = new Date().getTime();
+        }
+    }
+    getParent(el, parentSelector) {
+        // If no parentSelector defined will bubble up all the way to *document*
+        if (parentSelector === undefined) {
+            parentSelector = document;
+        }
+        const parent = [];
+        let p = el.parentNode;
+        while (p &&
+            p.className !== '' &&
+            p.className.indexOf(parentSelector) === -1 &&
+            parentSelector !== document) {
+            const o = p;
+            p = o.parentNode;
+        }
+        if (p.className.indexOf(parentSelector) > -1) {
+            parent.push(p); // Push that parentSelector you wanted to stop at
+        }
+        return parent;
+    }
+    onListResizeEnd(event) {
+        if (this.pressedColumn.length > 0) {
+            if (event &&
+                this.getParent(event.srcElement, 'resize-box').length > 0) {
+                this.initResizeData();
+            }
+            else {
+                setTimeout(() => {
+                    this.initResizeData();
+                }, 0);
+            }
+        }
+    }
+    onListHeaderMouseEnter(event) {
+        // this.headerIsInFocus = true;
+    }
+    onListHeaderMouseLeave(event) {
+        // this.headerIsInFocus = false;
+        this.onListResizeEnd(event);
+        this.initResizeData();
+    }
+    onListChange(event) {
+        if (this.disableEvents) {
+            return;
+        }
+        // For other events do nothing.
+        if (typeof event.start === 'undefined' ||
+            typeof event.end === 'undefined') {
+            return;
+        }
+        this.calculatedObjectHeight = event.calculatedChildHeight + 'px';
+        if (!this.lockEvents) {
+            this.toggleItems(false);
+            this.updateScrollItems(event.start, event.end, false);
+            this.toggleItems(true);
+        }
+    }
+    getParentContainer() {
+        return this.parentScroll ? this.parentScroll : window;
+    }
+    onValueChanged(valueChange) {
+        if (this.disabled) {
+            return;
+        }
+        this.valueChange.emit(valueChange);
+    }
+    onCustomizeFieldClick(customizeFieldClickedData) {
+        if (this.disabled) {
+            return;
+        }
+        this.fieldClick.emit(customizeFieldClickedData);
+    }
+    getIsDisabled(item) {
+        if (this.disableSelectionItems) {
+            return true;
+        }
+        else {
+            const IsNotSelectableForActions = item && !item.IsSelectableForActions;
+            return IsNotSelectableForActions;
+        }
+    }
+    getIsItemSelected(itemId, itemType = '') {
+        let isSelected = false;
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        isSelected = uniqItemId === this.selectedItemId;
+        return isSelected;
+    }
+    setItemClicked(itemId, isSelectableForActions, itemType, isChecked) {
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        // select the selected item.
+        if (isChecked) {
+            // Set seleted item
+            this.selectedItemId = uniqItemId;
+        }
+        else {
+            if (this.selectedItemId === uniqItemId) {
+                this.selectedItemId = '';
+            }
+        }
+    }
+    itemClicked(e, item) {
+        // Set seleted item
+        const itemId = item.UID.toString();
+        const itemType = item.Type.toString();
+        let isChecked = false;
+        if (item && item.IsSelectableForActions) {
+            this.selectedItemId = this.getUniqItemId(itemId, itemType);
+            isChecked = true;
+        }
+        if (this.isTable) {
+            this.setItemClicked(itemId, item.IsSelectableForActions, itemType, true);
+        }
+        else {
+            if (this.disabled) {
+                return;
+            }
+        }
+        // this.itemClick.emit({ source: item, viewType: this.viewType });
+    }
+    onTableRowMouseEnter(event, itemId, itemType) {
+        if (!this.deviceHasMouse) {
+            return;
+        }
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        this.hoveredItemId = uniqItemId;
+    }
+    onTableRowMouseLeave(event, itemId, itemType) {
+        this.hoveredItemId = '';
+    }
+    onCardMouseEnter(event, itemId, itemType) {
+        if (!this.deviceHasMouse) {
+            return;
+        }
+        const uniqItemId = this.getUniqItemId(itemId, itemType);
+        this.hoveredItemId = uniqItemId;
+    }
+    onCardMouseLeave(event, itemId, itemType) {
+        this.hoveredItemId = '';
+    }
+    // call this function after resize + animation end
+    winResize(e) {
+        this.containerWidth = 0;
+        this.setLayout();
+    }
+    trackByFunc(index, item) {
+        return item && item.UID ? item.UID : index;
+    }
+    cleanItems() {
+        this.itemsCounter = 0;
+        this._items =
+            this.totalRows > 0 ? Array(this.totalRows) : [];
+        this.scrollItems = [];
+        this.calculatedObjectHeight = '';
+    }
+    getUIControl() {
+        return this.uiControl;
+    }
+    initListData(uiControl, totalRows, items, viewType = 'table', itemClass = '') {
+        this.viewType = viewType;
+        this.isTable = viewType === 'table';
+        // this.isCardView = viewType === 'cards';
+        this.uiControl = uiControl;
+        this.itemClass = itemClass;
+        this.selectedItemId = '';
+        this.totalRows = totalRows;
+        // fix bug for the scrollTo that doesn't work on edge div , not window
+        // const scrollingElement = this.getParentContainer();
+        // scrollingElement.scrollTo(0, 0);
+        this.cleanItems();
+        this.updateItems(items);
+        this.setLayout();
+    }
+    updateItems(items) {
+        this.scrollItems = this._items = items;
+        this.itemsCounter = items.length;
+    }
+    updateItem(data) {
+        let index = 0;
+        // Update items list
+        index = this.items.findIndex((i) => i && i.UID === data.UID);
+        if (index >= 0 && index < this.items.length) {
+            this.items[index] = data;
+        }
+        // Update scrollItems list
+        index = this.scrollItems.findIndex((i) => i && i.UID === data.UID);
+        if (index >= 0 && index < this.scrollItems.length) {
+            this.scrollItems[index] = data;
+            this.checkForChanges = new Date().getTime();
+        }
+    }
+    getIsItemEditable(uid) {
+        const item = this.items.filter((x) => x.UID.toString() === uid);
+        if (item.length > 0) {
+            return item[0].IsEditable;
+        }
+        else {
+            return false;
+        }
+    }
+    getItemDataByID(uid) {
+        return this.items.find((item) => item.UID.toString() === uid);
+    }
+}
+PepInternalListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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: "14.0.2", ngImport: i0, type: PepInternalListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-internal-list', host: {
+                        '(window:resize)': 'winResize($event)',
+                    }, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.PepLayoutService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { noDataFoundMsg: [{
+                type: Input
+            }], hideAllSelectionInMulti: [{
+                type: Input
+            }], top: [{
+                type: Input
+            }], objectId: [{
+                type: Input
+            }], parentId: [{
+                type: Input
+            }], searchCode: [{
+                type: Input
+            }], supportResizing: [{
+                type: Input
+            }], parentScroll: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], disableEvents: [{
+                type: Input
+            }], disableSelectionItems: [{
+                type: Input
+            }], totalsRow: [{
+                type: Input
+            }], fieldClick: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], noVirtualScrollCont: [{
+                type: ViewChild,
+                args: ['noVirtualScrollCont']
+            }], tableHeader: [{
+                type: ViewChild,
+                args: ['tableHeader']
+            }], selectAllCB: [{
+                type: ViewChild,
+                args: ['selectAllCB']
+            }] } });
+
+class PepInternalPageComponent {
+    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) {
+        var _a, _b, _c, _d, _e;
+        const view = this.matrixTemplate.createEmbeddedView(null);
+        (_a = this.customList) === null || _a === void 0 ? void 0 : _a.clear();
+        (_b = this.orgCont) === null || _b === void 0 ? void 0 : _b.clear();
+        if (isInDialog) {
+            (_c = this.dialogCont) === null || _c === void 0 ? void 0 : _c.clear();
+            (_d = this.dialogCont) === null || _d === void 0 ? void 0 : _d.insert(view);
+        }
+        else {
+            (_e = this.orgCont) === null || _e === void 0 ? void 0 : _e.insert(view);
+        }
+        setTimeout(() => {
+            const viewType = this.isTableView()
+                ? 'table'
+                : 'lines';
+            this.customList.initListData(this.uiControl, this.childData.TotalRows, this.childData.Rows, viewType);
+            this.setTotalsRow();
+            // if (!this.childModal.isShown) {
+            const childrenCount = this.childData.Rows
+                ? this.childData.Rows.length
+                : 0;
+            const isEven = childrenCount % 2 === 0;
+            // 3 for matrix & flat matrix because the header + total is 2 more rows.
+            const rowsToAdd = this.isMatrixView() || this.isFlatMatrixView()
+                ? isEven
+                    ? 3
+                    : 4
+                : 1;
+            const formRowHeight = this.customizationService.calculateFormFieldHeight() * 16; // convert rem to pixel
+            // Set the default only if not set yet.
+            if (this.defaultRowSpan === -1) {
+                this.defaultRowSpan = this.field.rowSpan;
+            }
+            this.sumOfMinColWidth = 0;
+            this.totalRowsWidth = 0;
+            this.childData.UIControl.ControlFields.forEach((uiControlField) => {
+                this.totalRowsWidth += uiControlField.ColumnWidth;
+                uiControlField.minFieldWidth = this.mmToPx(12); // NEED TO GET THIS PARAM FROM CUSTOMIZATION;
+                this.sumOfMinColWidth += 12;
+            });
+            this.setViewCover(this.childData.Rows);
+            if (this.coverChildTable) {
+                this.field.rowSpan = this.defaultRowSpan;
+            }
+            else {
+                // For line view Add the height of the line (form height).
+                if (this.currentViewType.Key === 'OrderCenterFlatMatrixLine') {
+                    const maxRow = Math.max(...this.uiControl.ControlFields.map((f) => {
+                        return f.Layout.Y + f.Layout.Height;
+                    }));
+                    // * 16 convert rem to pixel
+                    const cardRowsHeight = this.customizationService.calculateCardRowsHeight(maxRow) * 16;
+                    // maxRow * 24 + 60 - 24 for each row in card + 60 for the padding of each card.
+                    // const rowSpanToAdd = Math.floor(childrenCount * ((cardRowsHeight + 56) / formRowHeight) + rowsToAdd);
+                    // + 16 is the 1rem margin outside card.
+                    const rowSpanToAdd = (childrenCount * (cardRowsHeight + 16)) /
+                        formRowHeight +
+                        rowsToAdd;
+                    this.field.rowSpan = rowSpanToAdd;
+                }
+                else {
+                    // const tableRowsHeight = this.customizationService.calculateTableRowsHeight(childrenCount) * 16;
+                    // this.field.rowSpan = Math.ceil((tableRowsHeight + (rowsToAdd * 40)) / formRowHeight);
+                    // * 16 convert rem to pixel
+                    const rowsToAddHeight = this.customizationService.calculateTableRowsHeight(rowsToAdd, false) * 16;
+                    const tableRowsHeight = this.customizationService.calculateTableRowsHeight(childrenCount) * 16;
+                    this.field.rowSpan =
+                        (rowsToAddHeight + tableRowsHeight) / formRowHeight;
+                }
+            }
+        }, 0);
+        this.changeDetectorRef.markForCheck();
+    }
+    fillChildData(res) {
+        this.childData = res;
+        this.uiControl = res.UIControl;
+        this.additionalApiNames = res.AdditionalApiNames;
+        this.fillData();
+    }
+    mmToPx(mm) {
+        const height = this.my1mm.nativeElement.clientHeight;
+        return Math.floor(mm * height); // returns sizes in PX
+    }
+    isMatrixView() {
+        return (this.currentViewType &&
+            this.currentViewType.Key === 'OrderCenterMatrix');
+    }
+    isFlatMatrixView() {
+        return (this.currentViewType &&
+            this.currentViewType.Key === 'OrderCenterFlatMatrixGrid');
+    }
+    isTableView() {
+        return this.isMatrixView() || this.isFlatMatrixView();
+    }
+    changeChildrenViewType(viewTypeKey) {
+        this.rows = [];
+        this.uiControl = null;
+        for (const vt of this.childViewTypes) {
+            if (vt.Key === viewTypeKey) {
+                this.currentViewType = vt;
+                break;
+            }
+        }
+        this.currentViewTypeTitle = this.currentViewType.Value;
+        this.internalPageService.changeChildrenViewType(this.currentViewType.Key, (res) => {
+            if (res.Rows) {
+                this.fillChildData(res);
+            }
+        });
+    }
+    setViewCover(rows) {
+        if (!rows) {
+            return;
+        }
+        const matrixCont = this.mainViewCont.nativeElement;
+        const viewWidth = matrixCont.clientWidth;
+        this.viewWidth = viewWidth ? viewWidth.toString() : '100%';
+        // if the matrix located on the bottom / there is nothing under the matrix we dont need to check the height
+        if (parseInt(viewWidth, 10) < this.mmToPx(this.sumOfMinColWidth)) {
+            this.coverChildTable = true;
+        }
+        else {
+            this.coverChildTable = false;
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    showMatrixDialog() {
+        const config = this.dialogService.getDialogConfig({
+            disableClose: false,
+        }, 'large');
+        const dialogRef = this.dialogService.openDialog(this.matrixDialogTemplate, {}, config);
+        dialogRef.afterOpened().subscribe(() => {
+            this.fillData(true);
+        });
+        dialogRef.afterClosed().subscribe((value) => {
+            this.fillData(false);
+        });
+    }
+    ngOnInit() {
+        // let field = this.field as PepInternalPageField;
+        this.internalPageService.initDetails(this.field.objectId, this.field.parentId, this.field.searchCode, (resViewTypes) => {
+            // my code DI-7134
+            resViewTypes.Rows = resViewTypes.Rows.filter((item) => item.Key !== 'OrderCenterView1');
+            if (resViewTypes.Rows && resViewTypes.Rows.length > 0) {
+                if (!resViewTypes.Default) {
+                    resViewTypes.Default = resViewTypes.Rows[0].Key;
+                }
+                this.childViewTypes = resViewTypes.Rows;
+                this.currentViewType = resViewTypes.Rows[0];
+                // for (var i = 0; i < resViewTypes.Rows.length; i++) {
+                for (const viewTypeRow of resViewTypes.Rows) {
+                    if (viewTypeRow.Value === resViewTypes.Default) {
+                        this.currentViewType = viewTypeRow;
+                    }
+                }
+                this.loadLastAdditionalApiName();
+                this.changeChildrenViewType(this.currentViewType.Key);
+            }
+        });
+        this.resize = fromEvent(window, 'resize')
+            .pipe(debounceTime(10))
+            .subscribe((event) => {
+            this.setViewCover(this.rows);
+        });
+    }
+    loadLastAdditionalApiName() {
+        const daa = sessionStorage.getItem(PepInternalPageComponent.CURRENT_ADDITIONAL_API_NAME);
+        if (daa && daa.length > 0) {
+            const additionalApiName = JSON.parse(daa);
+            this.currentAdditionalApiName = additionalApiName;
+            this.internalPageService.additionalApiName = additionalApiName === null || additionalApiName === void 0 ? void 0 : additionalApiName.Key;
+        }
+    }
+    ngOnDestroy() {
+        if (this.resize) {
+            this.resize.unsubscribe();
+        }
+    }
+    changeAdditionalApiName(additionalApiName) {
+        this.internalPageService.changeAdditionalApiName(additionalApiName ? additionalApiName.Key : '', (res) => {
+            // for (let index = 0; index < res.Rows.length; index++) {
+            for (const row of res.Rows) {
+                this.updateChanges(row);
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+        sessionStorage.setItem(PepInternalPageComponent.CURRENT_ADDITIONAL_API_NAME, JSON.stringify(additionalApiName));
+        setTimeout(() => {
+            this.currentAdditionalApiName = additionalApiName;
+        }, 0);
+    }
+    setTotalsRow() {
+        this.totalsRow = [];
+        if (this.isMatrixView() || this.isFlatMatrixView()) {
+            let totalCol = 0;
+            const items = this.customList.items;
+            if (items) {
+                for (let col = 0; col < items[0].Fields.length; col++) {
+                    const field = items[0].Fields[col];
+                    if (field.FieldType === FIELD_TYPE.NumberIntegerForMatrix ||
+                        field.FieldType ===
+                            FIELD_TYPE.NumberIntegerQuantitySelector ||
+                        field.FieldType === FIELD_TYPE.NumberRealForMatrix ||
+                        field.FieldType ===
+                            FIELD_TYPE.NumberRealQuantitySelector ||
+                        field.FieldType === FIELD_TYPE.CalculatedInt ||
+                        field.FieldType === FIELD_TYPE.NumberInteger ||
+                        field.FieldType === FIELD_TYPE.CalculatedReal ||
+                        field.FieldType === FIELD_TYPE.NumberReal) {
+                        totalCol = 0;
+                        for (const listItem of items) {
+                            if (listItem.Fields[col] &&
+                                listItem.Fields[col].Value) {
+                                const num = parseFloat(listItem.Fields[col].Value);
+                                totalCol += isNaN(num) ? 0 : num;
+                            }
+                        }
+                        this.totalsRow.push(totalCol);
+                    }
+                    else {
+                        this.totalsRow.push('');
+                    }
+                }
+            }
+        }
+    }
+    updateChanges(elementToUpdate) {
+        this.customList.updateItem(elementToUpdate);
+        // Update memory data
+        for (let index = 0; index < this.childData.Rows.length; index++) {
+            if (this.childData.Rows[index].UID === elementToUpdate.UID) {
+                this.childData.Rows[index] = elementToUpdate;
+            }
+        }
+    }
+    setValueCallback(id, res) {
+        if (res.Rows.length === 1) {
+            const field = res.Rows[0].Fields.find((f) => f.ApiName === 'ObjectMenu');
+            if (field) {
+                // HACK : Until "Enabled" returns from the server, we set PepMenu to be
+                //        Disabled in cart on regular items and not campign items.
+                field.Enabled = true;
+            }
+            this.updateChanges(res.Rows[0]);
+        }
+        this.setTotalsRow();
+        this.checkForChanges = new Date();
+        // DI-15985
+        this.internalFormFieldChange.emit(res);
+        this.changeDetectorRef.markForCheck();
+    }
+    onCustomizeObjectChanged(customizeObjectChangedData) {
+        this.internalPageService.childValueChanged(customizeObjectChangedData.id, customizeObjectChangedData.key, customizeObjectChangedData.value, (res) => {
+            this.setValueCallback(customizeObjectChangedData.id, res);
+        });
+    }
+    onCustomizeFieldClick(fieldClickEvent) {
+        let handledEvent = false;
+        // For the new custom form, the plus and minus events transform in the IPepFormFieldValueChangeEvent
+        if (fieldClickEvent.controlType === 'qs') {
+            if (fieldClickEvent.value === PepQuantitySelectorComponent.PLUS) {
+                handledEvent = true;
+                this.internalPageService.childPlusClick(fieldClickEvent.id, fieldClickEvent.key, (res) => {
+                    this.setValueCallback(fieldClickEvent.id, res);
+                });
+            }
+            else if (fieldClickEvent.value === PepQuantitySelectorComponent.MINUS) {
+                handledEvent = true;
+                this.internalPageService.childMinusClick(fieldClickEvent.id, fieldClickEvent.key, (res) => {
+                    this.setValueCallback(fieldClickEvent.id, res);
+                });
+            }
+        }
+        if (!handledEvent) {
+            this.internalFormFieldClick.emit(fieldClickEvent);
+        }
+    }
+}
+PepInternalPageComponent.CURRENT_ADDITIONAL_API_NAME = 'item_details_currentAdditionalApiName';
+PepInternalPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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: "14.0.2", 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: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], internalFormFieldChange: [{
+                type: Output
+            }], internalFormFieldClick: [{
+                type: Output
+            }], my1mm: [{
+                type: ViewChild,
+                args: ['my1mm']
+            }], mainViewCont: [{
+                type: ViewChild,
+                args: ['mainViewCont']
+            }], orgCont: [{
+                type: ViewChild,
+                args: ['orgCont', { read: ViewContainerRef }]
+            }], dialogCont: [{
+                type: ViewChild,
+                args: ['dialogCont', { read: ViewContainerRef }]
+            }], matrixTemplate: [{
+                type: ViewChild,
+                args: ['matrixTemplate']
+            }], matrixDialogTemplate: [{
+                type: ViewChild,
+                args: ['matrixDialogTemplate', { read: TemplateRef }]
+            }], customList: [{
+                type: ViewChild,
+                args: [PepInternalListComponent]
+            }] } });
+
+class PepInternalCaruselService {
+    constructor(httpService) {
+        this.httpService = httpService;
+        this.eventUrl = 'Service1.svc/v1/EmitEvent';
+    }
+    emitEvent(uiObjectKey, fieldKey, fieldValue, eventName, callbackFunc) {
+        const body = {
+            'EventKey': eventName,
+            'EventData': JSON.stringify({
+                UIObjectKey: uiObjectKey,
+                FieldID: fieldKey,
+                Value: fieldValue
+            })
+        };
+        this.httpService.postWapiApiCall(`${this.eventUrl}`, body).subscribe((res) => {
+            console.log(res);
+            callbackFunc(res);
+        }
+        // (error) => {},
+        // () => {}
+        );
+    }
+}
+PepInternalCaruselService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalCaruselService, deps: [{ token: i1$1.PepHttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepInternalCaruselService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalCaruselService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalCaruselService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.PepHttpService }]; } });
+
+class PepInternalCaruselComponent {
+    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 = 1000;
+        this.itemsToMove = 3;
+        this.prevDisabled = false;
+        this.nextDisabled = false;
+        this.PepScreenSizeType = PepScreenSizeType;
+    }
+    set field(value) {
+        this._field = value;
+        const caruselField = this._field;
+        if (caruselField && caruselField.pageInfo) {
+            this.layout = caruselField.pageInfo.UIControl;
+            this.items = caruselField.pageInfo.Rows;
+        }
+    }
+    get field() {
+        return this._field;
+    }
+    set items(value) {
+        this._items = value;
+        // this.moveTo(0);
+    }
+    get items() {
+        return this._items;
+    }
+    ngOnInit() {
+        //
+    }
+    ngAfterViewInit() {
+        this.layoutService.onResize$.subscribe((size) => {
+            this.screenSize = size;
+        });
+    }
+    onCustomizeObjectChanged(customizeObjectChangedData) {
+        this.internalCaruselService.emitEvent(customizeObjectChangedData.uiObjectKey, customizeObjectChangedData.key, customizeObjectChangedData.value, 'SetFieldValue', () => {
+            this.internalFormFieldChange.emit(customizeObjectChangedData);
+        });
+    }
+    onCustomizeFieldClick(fieldClickEvent) {
+        let handledEvent = false;
+        // For the new custom form, the plus and minus events transform in the IPepFormFieldValueChangeEvent
+        if (fieldClickEvent.controlType === 'qs') {
+            if (fieldClickEvent.value === PepQuantitySelectorComponent.PLUS) {
+                handledEvent = true;
+                this.internalCaruselService.emitEvent(fieldClickEvent.uiObjectKey, fieldClickEvent.key, '', 'IncrementFieldValue', () => {
+                    this.internalFormFieldChange.emit({});
+                });
+            }
+            else if (fieldClickEvent.value === PepQuantitySelectorComponent.MINUS) {
+                handledEvent = true;
+                this.internalCaruselService.emitEvent(fieldClickEvent.uiObjectKey, fieldClickEvent.key, '', 'DecrementFieldValue', () => {
+                    this.internalFormFieldChange.emit({});
+                });
+            }
+        }
+        if (!handledEvent) {
+            this.internalFormFieldClick.emit(fieldClickEvent);
+        }
+    }
+    moveLeft() {
+        const indexToMove = Math.max(this.carousel.currIndex - this.itemsToMove, 0);
+        this.moveTo(indexToMove);
+    }
+    moveRight() {
+        const indexToMove = Math.min(this.carousel.currIndex + this.itemsToMove, this.items.length);
+        this.moveTo(indexToMove);
+    }
+    moveTo(index) {
+        if (this.carousel) {
+            this.carousel.moveTo(index);
+        }
+    }
+    onReachesLeftBound(event) {
+        this.prevDisabled = event;
+    }
+    onReachesRightBound(event) {
+        this.nextDisabled = event;
+    }
+}
+PepInternalCaruselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepInternalCaruselComponent, deps: [{ token: i1$1.PepLayoutService }, { token: PepInternalCaruselService }], target: i0.ɵɵFactoryTarget.Component });
+PepInternalCaruselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", 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)\">\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: "14.0.2", 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)\">\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: [{
+                type: ViewChild,
+                args: ['carousel', { read: PepCarouselComponent }]
+            }], field: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], internalFormFieldChange: [{
+                type: Output
+            }], internalFormFieldClick: [{
+                type: Output
+            }] } });
+
+class PepFieldGeneratorComponent {
+    constructor() {
+        this.isActive = false;
+        this.uid = null;
+        this.layoutType = 'form';
+        this.showTitle = true;
+        this.checkForChanges = null;
+        this.valueChange = new EventEmitter();
+        this.formValidationChange = new EventEmitter();
+        this.elementClick = new EventEmitter();
+        this.internalFormFieldChange = new EventEmitter();
+        this.internalFormFieldClick = new EventEmitter();
+        this.formValueChange = new EventEmitter();
+        this.formFieldClick = new EventEmitter();
+    }
+    set field(value) {
+        this._field = value;
+    }
+    get field() {
+        return this._field;
+    }
+    get isValid() {
+        if (this.field.readonly || this.field.disabled) {
+            return true;
+        }
+        else {
+            const formControl = this.form && this.form.get(this.field.key);
+            if (formControl) {
+                return formControl.valid;
+            }
+            else {
+                return false;
+            }
+        }
+    }
+    get isTouched() {
+        const formControl = this.form && this.form.get(this.field.key);
+        return formControl ? formControl.touched : false;
+    }
+    get isDirty() {
+        const formControl = this.form && this.form.get(this.field.key);
+        return formControl ? formControl.dirty : false;
+    }
+    ngOnDestroy() {
+        //
+    }
+    onFileChanged(fileData, field) {
+        const value = fileData ? JSON.stringify(fileData) : '';
+        const fieldValueChange = {
+            key: field.key,
+            value: value,
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    onAddressValueChanged(valueChange, field) {
+        const fieldValueChange = {
+            key: valueChange.key,
+            value: valueChange.value,
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    onValueChanged(value, field) {
+        const fieldValueChange = {
+            key: field.key,
+            value: value.toString(),
+            controlType: field.controlType,
+        };
+        this.valueChange.emit(fieldValueChange);
+    }
+    onInternalFormFieldChanged(internalFormFieldChange) {
+        this.internalFormFieldChange.emit(internalFormFieldChange);
+    }
+    onFormValidationChanged(formValidationChange) {
+        this.formValidationChange.emit(formValidationChange);
+    }
+    onClick(fieldClicked) {
+        this.elementClick.emit(fieldClicked);
+    }
+    onInternalFormFieldClick(internalFormFieldClick) {
+        this.internalFormFieldClick.emit(internalFormFieldClick);
+    }
+    onFormValueChanged(event) {
+        this.formValueChange.emit(event);
+    }
+    onFormFieldClick(event) {
+        this.formFieldClick.emit(event);
+    }
+    ngOnChanges(changes) {
+        // debugger;
+        // For testing.
+        // this.field.disabled = this.field.readonly = false;
+    }
+}
+PepFieldGeneratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFieldGeneratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepFieldGeneratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: { field: "field", isActive: "isActive", uid: "uid", form: "form", layoutType: "layoutType", showTitle: "showTitle", checkForChanges: "checkForChanges" }, outputs: { valueChange: "valueChange", formValidationChange: "formValidationChange", 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 | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (formValidationChange)=\"onFormValidationChanged($event)\" (elementClick)=\"onClick($event)\">\n    </pep-link>\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{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"], outputs: ["fileChange", "elementClick"] }, { 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"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange"] }, { 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"], outputs: ["fileChange", "elementClick"] }, { 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", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType"], outputs: ["valueChange", "elementClick"] }, { kind: "component", type: i10.PepRichHtmlTextareaComponent, selector: "pep-rich-html-textarea", inputs: ["key", "value", "label", "mandatory", "disabled", "readonly", "maxFieldCharacters", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "layoutType", "inlineMode", "toolbarOptions"], outputs: ["valueChange"] }, { kind: "component", type: i11.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "emptyOption", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { 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"], outputs: ["fileChange"] }, { 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"] }, { kind: "component", type: i15.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i16.PepLinkComponent, selector: "pep-link", inputs: ["key", "value", "formattedValue", "label", "placeholder", "mandatory", "disabled", "readonly", "maxFieldCharacters", "textColor", "xAlignment", "rowSpan", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange", "formValidationChange", "elementClick"] }, { 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", "invertClass", "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: "14.0.2", 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 | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [additionalValue]=\"field.additionalValue\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-checkbox>\n\n    <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [minValue]=\"field.minValue\"\n        [maxValue]=\"field.maxValue\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-date>\n\n    <pep-images-filmstrip *ngSwitchCase=\"'images'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [showTitle]=\"showTitle\" [rowSpan]=\"field.rowSpan\" [value]=\"field.value\" [layoutType]=\"layoutType\">\n    </pep-images-filmstrip>\n\n    <pep-image *ngSwitchCase=\"'image'\" [uid]=\"uid\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.formattedValue\"\n        [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [indicatorsField]=\"field.indicatorsField\" [menuField]=\"field.menuField\"\n        [hasCampaignField]=\"field.hasCampaignField\" [sizeLimitMB]=\"field.sizeLimitMB\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (elementClick)=\"onClick($event)\"\n        (fileChange)=\"onFileChanged($event, field)\">\n    </pep-image>\n\n    <pep-quantity-selector *ngSwitchCase=\"'qs'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\" [mandatory]=\"field.mandatory\"\n        [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [textColor]=\"field.textColor\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [allowDecimal]=\"field.allowDecimal\"\n        [additionalValue]=\"field.additionalValue\" [notificationInfo]=\"field.notificationInfo\" [isActive]=\"isActive\"\n        [layoutType]=\"layoutType\" [showTitle]=\"showTitle\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        (elementClick)=\"onClick($event)\">\n    </pep-quantity-selector>\n\n    <pep-rich-html-textarea *ngSwitchCase=\"'richhtmltextarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n        [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-rich-html-textarea>\n\n    <pep-select *ngSwitchCase=\"'select'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [options]=\"field.options\" [showTitle]=\"showTitle\"\n        [layoutType]=\"layoutType\" [visible]=\"field.visible\" (valueChange)=\"onValueChanged($event, field)\"\n        (formValidationChange)=\"onFormValidationChanged($event)\" [isActive]=\"isActive\">\n    </pep-select>\n\n    <pep-separator *ngSwitchCase=\"'separator'\" [form]=\"form\" [key]=\"field.key\" [label]=\"field.label\"\n        [xAlignment]=\"field.xAlignment\" [layoutType]=\"layoutType\" [visible]=\"field.visible\">\n    </pep-separator>\n\n    <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [isActive]=\"isActive\" [layoutType]=\"layoutType\"\n        [visible]=\"field.visible\" (fileChange)=\"onFileChanged($event, field)\">\n    </pep-signature>\n\n    <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\" [label]=\"field.label\"\n        [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n        [maxFieldCharacters]=\"field.maxFieldCharacters\" [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\"\n        [rowSpan]=\"field.rowSpan\" [showTitle]=\"showTitle\" [layoutType]=\"layoutType\" [visible]=\"field.visible\"\n        (valueChange)=\"onValueChanged($event, field)\" [isActive]=\"isActive\">\n    </pep-textarea>\n\n    <pep-textbox *ngSwitchCase=\"'textbox'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (valueChange)=\"onValueChanged($event, field)\" (formValidationChange)=\"onFormValidationChanged($event)\"\n        [isActive]=\"isActive\" [visible]=\"field.visible\">\n    </pep-textbox>\n\n    <pep-link *ngSwitchCase=\"'link'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n        [formattedValue]=\"field.formattedValue\" [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        (formValidationChange)=\"onFormValidationChanged($event)\" (elementClick)=\"onClick($event)\">\n    </pep-link>\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{width:100%;height:100%}\n"] }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], checkForChanges: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], elementClick: [{
+                type: Output
+            }], internalFormFieldChange: [{
+                type: Output
+            }], internalFormFieldClick: [{
+                type: Output
+            }], formValueChange: [{
+                type: Output
+            }], formFieldClick: [{
+                type: Output
+            }] } });
+
+class PepFormComponent {
+    // eventServiceSub: Subscription;
+    // public jsonLib = JSON;
+    constructor(dialogService, customizationService, layoutService, fb, differs, translate) {
+        this.dialogService = dialogService;
+        this.customizationService = customizationService;
+        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();
+    }
+    set data(value) {
+        const shouldReload = this.shouldReloadForm || !this._data;
+        this._data = value;
+        if (shouldReload) {
+            this._shouldReloadForm = false;
+            this.initForm();
+        }
+        else {
+            this.updateForm();
+        }
+    }
+    get data() {
+        return this._data;
+    }
+    set lockFields(value) {
+        this.isLocked = value;
+    }
+    get fields$() {
+        return this._fieldsSubject.asObservable();
+    }
+    get shouldReloadForm() {
+        return this._shouldReloadForm;
+    }
+    convertXAlignToHorizontalAlign(xAlign) {
+        let res = DEFAULT_HORIZONTAL_ALIGNMENT;
+        if (xAlign === X_ALIGNMENT_TYPE.None ||
+            xAlign === X_ALIGNMENT_TYPE.Left) {
+            res = 'left';
+        }
+        else if (xAlign === X_ALIGNMENT_TYPE.Right) {
+            res = 'right';
+        }
+        else {
+            res = 'center';
+        }
+        return res;
+    }
+    convertYAlignToVerticalAlign(yAlign) {
+        let res = DEFAULT_VERTICAL_ALIGNMENT;
+        if (yAlign === Y_ALIGNMENT_TYPE.None ||
+            yAlign === Y_ALIGNMENT_TYPE.Top) {
+            res = 'top';
+        }
+        else if (yAlign === Y_ALIGNMENT_TYPE.Bottom) {
+            res = 'bottom';
+        }
+        else {
+            res = 'middle';
+        }
+        return res;
+    }
+    convertOptionalValues(optionalValues) {
+        if (optionalValues && optionalValues.length > 0) {
+            return optionalValues.map((ov) => {
+                return { key: ov.Key, value: ov.Value };
+            });
+        }
+        else {
+            return [];
+        }
+    }
+    convertAddressFields(controlField, addressFields, canEditObject) {
+        const fields = [];
+        addressFields.forEach((field) => {
+            let customField;
+            const placeholder = field.ApiName;
+            if (field.ApiName.toLowerCase().indexOf('street') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 0,
+                    rowSpan: 1,
+                    col: 0,
+                    colSpan: 2,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 0,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('city') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 0,
+                    rowSpan: 1,
+                    col: 2,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 1,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('state') >= 0) {
+                customField = new PepSelectField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    placeholder,
+                    options: this.convertOptionalValues(field.OptionalValues),
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 1,
+                    rowSpan: 1,
+                    col: 0,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 2,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('zipcode') >= 0) {
+                customField = new PepTextboxField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    type: 'text',
+                    placeholder,
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 1,
+                    rowSpan: 1,
+                    col: 1,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 3,
+                });
+            }
+            else if (field.ApiName.toLowerCase().indexOf('country') >= 0) {
+                customField = new PepSelectField({
+                    key: field.ApiName,
+                    label: field.ApiName,
+                    placeholder,
+                    options: this.convertOptionalValues(field.OptionalValues),
+                    readonly: !canEditObject,
+                    disabled: !field.Enabled || !canEditObject,
+                    hidden: false,
+                    mandatory: false,
+                    value: field.Value,
+                    formattedValue: field.FormattedValue,
+                    row: 2,
+                    rowSpan: 1,
+                    col: 2,
+                    colSpan: 1,
+                    xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+                    yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+                    order: 4,
+                });
+            }
+            fields.push(customField);
+        });
+        return fields.sort((n1, n2) => n1.order > n2.order ? 1 : n1.order < n2.order ? -1 : 0);
+    }
+    isMatrixField(apiNameToCheck) {
+        return apiNameToCheck.indexOf('Matrix') >= 0;
+    }
+    doesFieldHavaFloatingField(controlField, floatingField) {
+        let hasFloatingField = false;
+        if (floatingField.Layout.Y >= controlField.Layout.Y &&
+            floatingField.Layout.Y <
+                controlField.Layout.Y + controlField.Layout.Height &&
+            floatingField.Layout.X >= controlField.Layout.X &&
+            floatingField.Layout.X <
+                controlField.Layout.X + controlField.Layout.Width) {
+            hasFloatingField = true;
+        }
+        return hasFloatingField;
+    }
+    getOptionsForCustomField(controlField, dataField, canEditObject) {
+        if (!controlField || !dataField) {
+            return;
+        }
+        const placeholder = controlField.ReadOnly || !canEditObject ? '' : controlField.Title;
+        return {
+            key: controlField.ApiName,
+            label: controlField.Title,
+            accessory: dataField.Accessory,
+            placeholder,
+            readonly: controlField.ReadOnly || !canEditObject,
+            disabled: !dataField.Enabled || !canEditObject,
+            hidden: controlField.Hidden,
+            mandatory: controlField.Mandatory,
+            value: dataField.Value,
+            formattedValue: dataField.FormattedValue,
+            additionalValue: dataField.AdditionalValue,
+            row: controlField.Layout.Y,
+            rowSpan: controlField.Layout.Height,
+            col: controlField.Layout.X,
+            colSpan: controlField.Layout.Width,
+            xAlignment: this.convertXAlignToHorizontalAlign(controlField.Layout.XAlignment),
+            yAlignment: this.convertYAlignToVerticalAlign(controlField.Layout.YAlignment),
+            options: this.convertOptionalValues(dataField.OptionalValues),
+            groupFields: undefined,
+            maxFieldCharacters: controlField.MaxFieldCharacters,
+            minValue: controlField.MinValue,
+            maxValue: controlField.MaxValue,
+            // hasMenu: hasMenu,
+            // hasCampaign: hasCampaign,
+            // hasIndicators: hasIndicators,
+            textColor: dataField.TextColor,
+            visible: dataField.Visible,
+        };
+    }
+    convertToCustomField(controlField, dataField, canEditObject, menuField, hasCampaignField, indicatorsField, objectId, parentId, searchCode) {
+        let customField;
+        const options = this.getOptionsForCustomField(controlField, dataField, canEditObject);
+        if (controlField.ApiName === 'ObjectMenu') {
+            options.type = 'menu';
+            customField = new PepInternalMenuField(options);
+        }
+        else if (controlField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+            controlField.FieldType ===
+                FIELD_TYPE.NumberIntegerQuantitySelector ||
+            controlField.ApiName === 'QuantitySelector' ||
+            controlField.ApiName === 'UnitsQuantity' ||
+            controlField.ApiName.indexOf('size_') === 0) {
+            if (dataField.FieldType === FIELD_TYPE.InternalLink) {
+                options.type = 'button';
+            }
+            else if (dataField.FieldType === FIELD_TYPE.Package) {
+                options.type = 'packageButton';
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                dataField.FieldType === FIELD_TYPE.NumberReal) {
+                options.type = 'qs';
+                options.allowDecimal = true;
+            }
+            else if (dataField.FieldType ===
+                FIELD_TYPE.NumberIntegerQuantitySelector ||
+                dataField.FieldType === FIELD_TYPE.NumberInteger) {
+                options.type = 'qs';
+                options.allowDecimal = false;
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberIntegerForMatrix) {
+                options.type = 'qsForMatrix';
+                options.allowDecimal = false;
+            }
+            else if (dataField.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                options.type = 'qsForMatrix';
+                options.allowDecimal = true;
+            }
+            options.notificationInfo = dataField.NotificationInfo;
+            customField = new PepQuantitySelectorField(options);
+        }
+        else {
+            // HACK: need to remove this..
+            if (dataField.FieldType === FIELD_TYPE.Indicators &&
+                this.isMatrixField(dataField.ApiName)) {
+                dataField.FieldType = FIELD_TYPE.InternalPage;
+            }
+            switch (dataField.FieldType) {
+                case FIELD_TYPE.Address: {
+                    const canEditGroupObject = controlField.ReadOnly
+                        ? false
+                        : canEditObject;
+                    options.groupFields = this.convertAddressFields(controlField, dataField.GroupFields, canEditGroupObject);
+                    customField = new PepAddressField(options);
+                    break;
+                }
+                case FIELD_TYPE.Indicators: {
+                    // options['type'] = 'indicators'; // Not needed this is PepIndicatorsField.
+                    customField = new PepIndicatorsField(options);
+                    break;
+                }
+                case FIELD_TYPE.InternalPage: {
+                    if (this.isMatrixField(controlField.ApiName)) {
+                        options.rowSpan = controlField.Layout.Height;
+                        options.objectId = objectId;
+                        options.parentId = parentId;
+                        options.searchCode = searchCode;
+                        customField = new PepInternalPageField(options);
+                    }
+                    else {
+                        // Not supported
+                    }
+                    break;
+                }
+                case FIELD_TYPE.RelatedObjectsCards: {
+                    options.rowSpan = controlField.Layout.Height;
+                    options.searchCode = searchCode;
+                    options.pageInfo = dataField.UIPageInfo;
+                    customField = new PepInternalCaruselField(options);
+                    break;
+                }
+                case FIELD_TYPE.Link: {
+                    options.type = 'link';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.InternalLink:
+                case FIELD_TYPE.Button: {
+                    options.type = 'button';
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.Attachment: {
+                    // options.type = 'attachment';
+                    customField = new PepAttachmentField(options);
+                    break;
+                }
+                case FIELD_TYPE.Signature: {
+                    // options.type = 'signature';
+                    customField = new PepSignatureField(options);
+                    break;
+                }
+                case FIELD_TYPE.Image:
+                case FIELD_TYPE.ImageURL: {
+                    // options.type = 'image';
+                    options.menuField =
+                        menuField &&
+                            this.doesFieldHavaFloatingField(controlField, menuField)
+                            ? menuField
+                            : null;
+                    options.hasCampaignField =
+                        hasCampaignField &&
+                            this.doesFieldHavaFloatingField(controlField, hasCampaignField)
+                            ? hasCampaignField
+                            : null;
+                    options.indicatorsField =
+                        indicatorsField &&
+                            this.doesFieldHavaFloatingField(controlField, indicatorsField)
+                            ? indicatorsField
+                            : null;
+                    customField = new PepImageField(options);
+                    break;
+                }
+                case FIELD_TYPE.Images: {
+                    // options.type = 'images';
+                    customField = new PepImagesField(options);
+                    break;
+                }
+                case FIELD_TYPE.Email: {
+                    options.type = 'email';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.Phone: {
+                    options.type = 'phone';
+                    customField = new PepLinkField(options);
+                    break;
+                }
+                case FIELD_TYPE.Duration: {
+                    options.type = 'duration';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Default:
+                case FIELD_TYPE.TextBox:
+                case FIELD_TYPE.LimitedLengthTextBox:
+                case FIELD_TYPE.TextHeader:
+                case FIELD_TYPE.CalculatedString:
+                case FIELD_TYPE.MapDataString: {
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.TextArea: {
+                    customField = new PepTextareaField(options);
+                    break;
+                }
+                case FIELD_TYPE.RichTextHTML: {
+                    customField = new PepRichHtmlTextareaField(options);
+                    break;
+                }
+                case FIELD_TYPE.Date:
+                case FIELD_TYPE.LimitedDate:
+                case FIELD_TYPE.CalculatedDate:
+                case FIELD_TYPE.DateAndTime: {
+                    options.type =
+                        dataField.FieldType === FIELD_TYPE.DateAndTime
+                            ? 'datetime'
+                            : 'date';
+                    customField = new PepDateField(options);
+                    break;
+                }
+                case FIELD_TYPE.NumberInteger:
+                case FIELD_TYPE.CalculatedInt:
+                case FIELD_TYPE.MapDataInt: {
+                    options.type = 'int';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Percentage: {
+                    options.type = 'percentage';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Currency: {
+                    options.type = 'currency';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.NumberReal:
+                case FIELD_TYPE.CalculatedReal:
+                case FIELD_TYPE.MapDataReal:
+                case FIELD_TYPE.Sum:
+                case FIELD_TYPE.Totals: {
+                    options.type = 'real';
+                    customField = new PepTextboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.Boolean:
+                case FIELD_TYPE.CalculatedBool: {
+                    customField = new PepCheckboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.BooleanText: {
+                    options.type = 'booleanText';
+                    customField = new PepCheckboxField(options);
+                    break;
+                }
+                case FIELD_TYPE.ComboBox:
+                case FIELD_TYPE.EmptyComboBox:
+                case FIELD_TYPE.MapDataDropDown: {
+                    // options.type = 'select';
+                    customField = new PepSelectField(options);
+                    break;
+                }
+                case FIELD_TYPE.MultiTickBox:
+                case FIELD_TYPE.MultiTickBoxToComboBox:
+                case FIELD_TYPE.EmptyMultiTickBox: {
+                    options.type = 'multi';
+                    customField = new PepSelectField(options);
+                    break;
+                }
+                case FIELD_TYPE.GuidReferenceType: {
+                    options.type = 'reference';
+                    options.referenceObjectType = dataField.ReferenceObjectType;
+                    options.referenceObjectSubType =
+                        dataField.ReferenceObjectSubType;
+                    options.referenceObjectInternalType =
+                        dataField.ReferenceObjectInternalType;
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.ListOfObjects: {
+                    options.type = 'listofobjects';
+                    customField = new PepInternalButtonField(options);
+                    break;
+                }
+                case FIELD_TYPE.Separator: {
+                    customField = new PepSeparatorField(options);
+                    break;
+                }
+                /*
+                    case FIELD_TYPE.Images: return that.field(value);
+                */
+                case FIELD_TYPE.NumberRealQuantitySelector:
+                case FIELD_TYPE.NumberIntegerQuantitySelector: {
+                    options.type = 'qs';
+                    options.allowDecimal =
+                        dataField.FieldType ===
+                            FIELD_TYPE.NumberRealQuantitySelector;
+                    options.notificationInfo = dataField.NotificationInfo;
+                    customField = new PepQuantitySelectorField(options);
+                    break;
+                }
+                case FIELD_TYPE.Package: {
+                    options.type = 'packageButton';
+                    options.notificationInfo = dataField.NotificationInfo;
+                    customField = new PepQuantitySelectorField(options);
+                    break;
+                }
+            }
+        }
+        if (!customField) {
+            options.label = controlField.ApiName + ' is not supported!!!';
+            customField = new PepSeparatorField(options);
+        }
+        return customField;
+    }
+    getFieldFormattedValue(field) {
+        let fieldFormattedValue = field.formattedValue;
+        // Fix for the custom check box component.
+        if (field.controlType === 'checkbox') {
+            fieldFormattedValue = fieldFormattedValue === 'true';
+        }
+        // Fix for the custom button component.
+        if (field.controlType === 'button') {
+            fieldFormattedValue =
+                fieldFormattedValue === '0' ? '' : fieldFormattedValue;
+        }
+        return fieldFormattedValue;
+    }
+    toControlGroup(fields) {
+        const group = {};
+        if (fields && fields.length > 0) {
+            fields.forEach((field) => {
+                if (field.groupFields && field.groupFields.length > 0) {
+                    const subGroup = {};
+                    field.groupFields.forEach((groupField) => {
+                        if (groupField.mandatory &&
+                            !field.readonly &&
+                            !field.disabled) {
+                            subGroup[groupField.key] = [
+                                {
+                                    value: groupField.formattedValue || '',
+                                    disabled: field.readonly ||
+                                        field.disabled ||
+                                        groupField.disabled,
+                                },
+                                [Validators.required],
+                            ];
+                        }
+                        else {
+                            subGroup[groupField.key] = [
+                                {
+                                    value: groupField.formattedValue || '',
+                                    disabled: field.readonly ||
+                                        field.disabled ||
+                                        groupField.disabled,
+                                },
+                                [Validators.nullValidator],
+                            ];
+                        }
+                    });
+                    group[field.key] = this.fb.group(subGroup);
+                }
+                else {
+                    const validators = field.getValidators();
+                    const fieldFormattedValue = this.getFieldFormattedValue(field);
+                    group[field.key] = [
+                        {
+                            value: fieldFormattedValue || '',
+                            disabled: field.disabled,
+                        },
+                        validators,
+                    ];
+                }
+            });
+        }
+        return this.fb.group(group);
+    }
+    createBaseField(uiControlField, dataField) {
+        const customField = this.convertToCustomField(uiControlField, dataField, this.canEditObject, this.menuDataField, this.hasCampaignDataField, this.indicatorsDataField, this.objectId, this.parentId, this.searchCode);
+        return customField;
+    }
+    showFormValidationMessage() {
+        const fields = this.fields;
+        let emptyMandatoryFieldsMsg = '';
+        let notValidFieldsMsg = '';
+        // for (let i: number = 0; i < fields.length; i++) {
+        //     let field = fields[i];
+        for (const field of fields) {
+            const formControl = this.form && this.form.get(field.key);
+            if (formControl) {
+                // Mandatory is empty.
+                if (field.mandatory &&
+                    formControl.value.toString().trim().length === 0) {
+                    emptyMandatoryFieldsMsg +=
+                        '<li><small>' + field.label + '</small></li>';
+                }
+                else if (!field.disabled && !formControl.valid) {
+                    notValidFieldsMsg +=
+                        '<li><small>' + field.label + '</small></li>';
+                }
+            }
+        }
+        // Add the header message of the empty mandatory fields
+        if (emptyMandatoryFieldsMsg.length > 0) {
+            emptyMandatoryFieldsMsg =
+                '<div>' +
+                    this.translate.instant('MESSAGES.ERROR_MANDATORY_FIELDS') +
+                    "</div><ul style='padding: 0 20px;'>" +
+                    emptyMandatoryFieldsMsg +
+                    '</ul><br/>';
+        }
+        // Add the header message of the empty mandatory fields
+        if (notValidFieldsMsg.length > 0) {
+            notValidFieldsMsg =
+                '<div>' +
+                    this.translate.instant('MESSAGES.ERROR_INVALID_FIELDS') +
+                    "</div><ul style='padding: 0 20px;'>" +
+                    notValidFieldsMsg +
+                    '</ul>';
+        }
+        const title = this.translate.instant('MESSAGES.TITLE_NOTICE');
+        const data = new PepDialogData({
+            title,
+            content: emptyMandatoryFieldsMsg + notValidFieldsMsg,
+        });
+        this.dialogService.openDefaultDialog(data);
+    }
+    ngOnInit() {
+        const themeVars = this.customizationService.getThemeVariables();
+        // convert rem to pixel
+        const RemToPixel = 16;
+        this.formGutterSize =
+            this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_SPACEING_KEY) * RemToPixel;
+        this.cardGutterSize =
+            this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.CARD_SPACEING_KEY) * RemToPixel;
+    }
+    ngDoCheck() {
+        const changes = this.differ.diff(this.data); // check for changes
+        if (changes) {
+            this.updateForm();
+            this.checkForChanges = new Date();
+        }
+    }
+    ngOnChanges(changes) {
+        // if (changes.data && changes.data.currentValue) {
+        //     // Load changes
+        //     if (!this.shouldReloadForm && changes.data.previousValue) {
+        //         this.data = changes.data.currentValue;
+        //         this.updateForm();
+        //     } else {
+        //         this._shouldReloadForm = false;
+        //         this.initForm();
+        //     }
+        // }
+        // if (this.shouldReloadForm || !changes?.data?.previousValue) {
+        //     this._shouldReloadForm = false;
+        //     this.initForm();
+        //     this.checkForChanges = new Date();
+        // }
+    }
+    ngOnDestroy() {
+        //
+    }
+    getUiControlFields() {
+        return this.layout ? this.layout.ControlFields : [];
+    }
+    initFieldsStructure(fields, maxRow) {
+        const themeVars = this.customizationService.getThemeVariables();
+        // Set form row height.
+        if (this.layoutType === 'card') {
+            const cardFieldHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.CARD_FIELD_HEIGHT_KEY);
+            this.rowHeight = cardFieldHeight;
+        }
+        else {
+            const rowFieldHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_FIELD_HEIGHT_KEY);
+            const rowFieldTitleHeight = this.customizationService.getNumberThemeVariable(themeVars, PepCustomizationService.FORM_FIELD_TITLE_HEIGHT_KEY);
+            this.rowHeight = rowFieldHeight + rowFieldTitleHeight;
+        }
+        // Create the fields structure (the fields must be sorted!!!).
+        if (fields.length > 0) {
+            // Init the layout.
+            if (
+            // this.layoutType === 'form' ||
+            this.layoutType === 'table') {
+                this.fields = fields;
+                this._fieldsSubject.next(fields);
+                this.rows = [];
+                for (let i = 0; i <= maxRow; i++) {
+                    this.rows[i] = [];
+                }
+                // for (let i = 0; i < fields.length; i++) {
+                // const field = fields[i]
+                for (const field of fields) {
+                    this.rows[field.row].push(field);
+                }
+            }
+            else {
+                const doesfieldExistIn = new Array(maxRow);
+                for (let i = 0; i < doesfieldExistIn.length; i++) {
+                    doesfieldExistIn[i] = new Array(this.columns);
+                    for (let j = 0; j < doesfieldExistIn[i].length; j++) {
+                        doesfieldExistIn[i][j] = false;
+                    }
+                }
+                // Run in squere (row - colspan, col - rowspan) and put true where it should.
+                // for (let index = 0; index < fields.length; index++) {
+                //     const currentField = fields[index];
+                for (const currentField of fields) {
+                    if (currentField.rowSpan > 1) {
+                        for (let row = currentField.row; row < currentField.row + currentField.rowSpan; row++) {
+                            if (currentField.colSpan > 1) {
+                                for (let col = currentField.col; col <
+                                    currentField.col + currentField.colSpan; col++) {
+                                    if (doesfieldExistIn.length > row &&
+                                        doesfieldExistIn[0].length > col) {
+                                        doesfieldExistIn[row][col] = true;
+                                    }
+                                }
+                            }
+                            else {
+                                if (doesfieldExistIn.length > row &&
+                                    doesfieldExistIn[0].length >
+                                        currentField.col) {
+                                    doesfieldExistIn[row][currentField.col] = true;
+                                }
+                            }
+                        }
+                    }
+                    else if (currentField.colSpan > 1) {
+                        for (let col = currentField.col; col < currentField.col + currentField.colSpan; col++) {
+                            if (doesfieldExistIn.length > currentField.row &&
+                                doesfieldExistIn[0].length > col) {
+                                doesfieldExistIn[currentField.row][col] = true;
+                            }
+                        }
+                    }
+                    else {
+                        if (doesfieldExistIn.length > currentField.row &&
+                            doesfieldExistIn[0].length > currentField.col) {
+                            doesfieldExistIn[currentField.row][currentField.col] = true;
+                        }
+                    }
+                }
+                // Create empty fields where doesfieldExistIn is false (For the md-grid-list UI Component).
+                for (let i = 0; i < doesfieldExistIn.length; i++) {
+                    for (let j = 0; j < doesfieldExistIn[i].length; j++) {
+                        if (!doesfieldExistIn[i][j]) {
+                            // Create empty field and add it to the fields list.
+                            fields.push(new PepPlaceholderField({
+                                key: i + '_' + j,
+                                label: '',
+                                placeholder: '',
+                                readonly: false,
+                                disabled: false,
+                                hidden: false,
+                                mandatory: false,
+                                value: '',
+                                formattedValue: '',
+                                row: i,
+                                rowSpan: 1,
+                                col: j,
+                                colSpan: 1,
+                                order: 1,
+                            }));
+                        }
+                    }
+                }
+                // Sort the fields again.
+                this.fields = fields.sort((f1, f2) => f1.row > f2.row
+                    ? 1
+                    : f1.row < f2.row
+                        ? -1
+                        : f1.col > f2.col
+                            ? 1
+                            : f1.col < f2.col
+                                ? -1
+                                : 0);
+                this._fieldsSubject.next(fields);
+            }
+        }
+    }
+    setForm(isForUpdate = false) {
+        var _a;
+        let allFieldsAreReadOnly = true;
+        if (!isForUpdate) {
+            const fields = [];
+            for (const currentField of this.fields) {
+                // Add all fields except 'internalPage' (for children).
+                if (currentField.controlType !== 'internalPage') {
+                    fields.push(currentField);
+                }
+                if (!currentField.readonly) {
+                    allFieldsAreReadOnly = false;
+                }
+            }
+            this.form = this.toControlGroup(fields);
+        }
+        else {
+            // Update form values if changed by calculated fields.
+            for (let i = 0; i < this.fields.length; i++) {
+                let currentField = this.fields[i];
+                if (currentField.controlType === 'internalCarusel') {
+                    // Hack to override (update) the field.
+                    const uiControlField = this.getUiControlFields().find(cf => cf.ApiName === currentField.key);
+                    const dataField = this.data.Fields.find(df => df.ApiName === currentField.key);
+                    currentField = this.createBaseField(uiControlField, dataField);
+                    this._fieldsSubject.value[i] = currentField;
+                }
+                else if (currentField.controlType !== 'internalPage') {
+                    if (currentField.groupFields &&
+                        currentField.groupFields.length > 0) {
+                        // for (let j = 0; j < currentField.groupFields.length; j++) {
+                        //     let currentGroupField = currentField.groupFields[j];
+                        for (const currentGroupField of currentField.groupFields) {
+                            const fieldFormattedValue = this.getFieldFormattedValue(currentGroupField);
+                            this.customizationService.updateFormField(this.form, currentGroupField, fieldFormattedValue, currentField);
+                        }
+                    }
+                    else {
+                        const fieldFormattedValue = this.getFieldFormattedValue(currentField);
+                        // this.form.controls[currentField.key].setValue(fieldFormattedValue);
+                        this.customizationService.updateFormField(this.form, currentField, fieldFormattedValue);
+                    }
+                }
+                if (!currentField.readonly) {
+                    allFieldsAreReadOnly = false;
+                }
+            }
+        }
+        let isFormValid = (_a = this.form) === null || _a === void 0 ? void 0 : _a.valid;
+        // Change validation to true if all fields are read only.
+        if (!isFormValid && allFieldsAreReadOnly) {
+            isFormValid = true;
+        }
+        this.onFormValidationChanged(isFormValid);
+        // Set it to false to enable all fields.
+        if (this.isInternal && this.isLocked) {
+            this.isLocked = false;
+        }
+    }
+    initForm() {
+        if (this.data && this.data.Fields) {
+            const fields = this.convertCustomFields(this.getUiControlFields(), this.data.Fields);
+            const maxRow = Math.max(...fields.map((f) => {
+                return f.row + f.rowSpan;
+            }));
+            this.columns = Math.max(...fields.map((f) => {
+                return f.col + f.colSpan;
+            }));
+            this.initFieldsStructure(fields, maxRow);
+            this.setForm();
+        }
+    }
+    updateField(customField, updatedField) {
+        const options = {
+            disabled: !updatedField.Enabled || !this.canEditObject,
+            readonly: !updatedField.Enabled || !this.canEditObject,
+            visible: updatedField.Visible,
+            value: updatedField.Value,
+            additionalValue: updatedField.AdditionalValue,
+            formattedValue: updatedField.FormattedValue,
+            textColor: updatedField.TextColor,
+        };
+        if (customField instanceof PepQuantitySelectorField) {
+            const notificationInfo = updatedField.NotificationInfo;
+            options.notificationInfo = notificationInfo;
+            // Change type if it's change (only for allowDecimal).
+            let allowDecimal = false;
+            if (updatedField.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                updatedField.FieldType === FIELD_TYPE.NumberReal ||
+                updatedField.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                allowDecimal = true;
+            }
+            options.allowDecimal = allowDecimal;
+        }
+        else if (customField instanceof PepSelectField) {
+            options.options = this.convertOptionalValues(updatedField.OptionalValues);
+            if (!options.options || options.options.length === 0) {
+                options.options.push({
+                    key: options.value,
+                    value: options.formattedValue,
+                });
+            }
+        }
+        else if (customField instanceof PepInternalCaruselField) {
+            options.pageInfo = updatedField.UIPageInfo;
+        }
+        customField.update(options);
+    }
+    updateForm() {
+        if (this.data && this.data.Fields) {
+            for (const currentField of this.data.Fields) {
+                const customField = this.fields.filter((f) => f.key === currentField.ApiName)[0];
+                // Update all fields except 'internalPage' type (for children).
+                if (customField && customField.controlType !== 'internalPage') {
+                    this.updateField(customField, currentField);
+                    // Update the group fields.
+                    if (customField.controlType === 'address' &&
+                        currentField.GroupFields) {
+                        // for (let j = 0; j < currentField.GroupFields.length; j++) {
+                        // let currentGroupField = currentField.GroupFields[j];
+                        for (const currentGroupField of currentField.GroupFields) {
+                            currentGroupField.Enabled = !currentField.Enabled
+                                ? false
+                                : currentGroupField.Enabled;
+                            const customGroupField = customField.groupFields.filter((f) => f.key === currentGroupField.ApiName)[0];
+                            this.updateField(customGroupField, currentGroupField);
+                        }
+                    }
+                }
+            }
+            this.setForm(true);
+        }
+    }
+    ReloadForm() {
+        this._shouldReloadForm = true;
+    }
+    // onSubmit() {
+    //     if (this.form.valid) {
+    //         this.payLoad = JSON.stringify(this.form.value);
+    //         //this.submitted.emit(this.form.value);
+    //     }
+    // }
+    getFormControlById(key) {
+        let formControl = null;
+        this.fields.forEach((field) => {
+            if (field.key === key) {
+                formControl = this.form.get(field.key);
+                return;
+            }
+            else if (field.groupFields && field.groupFields.length > 0) {
+                field.groupFields.forEach((groupField) => {
+                    if (groupField.key === key) {
+                        formControl = this.form.get(field.key + '.' + groupField.key);
+                        return;
+                    }
+                });
+            }
+        });
+        return formControl;
+    }
+    setSpecialFields(controlFields, dataFields) {
+        // let cf;
+        // for (let index = 0; index < controlFields.length; index++) {
+        //     cf = controlFields[index];
+        for (const cf of controlFields) {
+            if (cf.ApiName === 'ObjectMenu') {
+                this.menuField = cf;
+            }
+            else if (cf.ApiName === 'ItemHasActiveCampaign') {
+                this.hasCampaignField = cf;
+            }
+            else if (cf.ApiName === 'ItemIndicatorsWithoutCampaign') {
+                this.indicatorsField = cf;
+            }
+        }
+        // let df;
+        // for (let index = 0; index < dataFields.length; index++) {
+        //     df = dataFields[index];
+        for (const df of dataFields) {
+            if (df.ApiName === 'ObjectMenu') {
+                this.menuDataField = df;
+            }
+            else if (df.ApiName === 'ItemHasActiveCampaign') {
+                this.hasCampaignDataField = df;
+            }
+            else if (df.ApiName === 'ItemIndicatorsWithoutCampaign') {
+                this.indicatorsDataField = df;
+            }
+        }
+        if (this.menuField && this.menuDataField) {
+            this.menuDataField.Layout = this.menuField.Layout;
+        }
+        if (this.hasCampaignField && this.hasCampaignDataField) {
+            this.hasCampaignDataField.Layout = this.hasCampaignField.Layout;
+        }
+        if (this.indicatorsField && this.indicatorsDataField) {
+            this.indicatorsDataField.Layout = this.indicatorsField.Layout;
+        }
+        // Check if menu is floating on other field.
+        // for (let index = 0; index < controlFields.length; index++) {
+        //     cf = controlFields[index];
+        for (const cf of controlFields) {
+            if (this.menuField && cf.ApiName !== 'ObjectMenu') {
+                this.hasMenuFloatingOnOtherField = this.doesFieldHavaFloatingField(cf, this.menuField);
+                if (this.hasMenuFloatingOnOtherField) {
+                    break;
+                }
+            }
+        }
+    }
+    convertCustomFields(controlFields, dataFields) {
+        if (this.layoutType !== 'table') {
+            this.setSpecialFields(controlFields, dataFields);
+        }
+        else {
+            // HACK: convert to center alignment if table view & special fields)
+            controlFields.forEach((field, index) => {
+                if (field.ApiName === 'UnitsQuantity' ||
+                    field.ApiName === 'QuantitySelector' ||
+                    field.ApiName === 'ObjectMenu' ||
+                    field.FieldType === FIELD_TYPE.Image ||
+                    field.FieldType === FIELD_TYPE.ImageURL ||
+                    field.FieldType === FIELD_TYPE.Indicators ||
+                    field.FieldType === FIELD_TYPE.Boolean ||
+                    field.FieldType === FIELD_TYPE.CalculatedBool ||
+                    field.FieldType === FIELD_TYPE.Signature ||
+                    field.FieldType ===
+                        FIELD_TYPE.NumberIntegerQuantitySelector ||
+                    field.FieldType === FIELD_TYPE.NumberRealQuantitySelector ||
+                    field.FieldType === FIELD_TYPE.Package ||
+                    field.FieldType === FIELD_TYPE.NumberIntegerForMatrix ||
+                    field.FieldType === FIELD_TYPE.NumberRealForMatrix) {
+                    field.Layout.XAlignment = X_ALIGNMENT_TYPE.Center;
+                }
+                else {
+                    // HACK: align the rest of the fields by the culture.
+                    // field.Layout.XAlignment = this.layoutService.isRtl() ? X_ALIGNMENT_TYPE.Right : X_ALIGNMENT_TYPE.Left;
+                }
+            });
+        }
+        const fields = [];
+        controlFields.forEach((field, index) => {
+            const dataField = dataFields.filter((df) => df.ApiName === field.ApiName)[0];
+            if (!dataField) {
+                return;
+            }
+            // If current view is not table view and those fields are special.
+            if (this.layoutType !== 'table' &&
+                ((this.hasMenuFloatingOnOtherField &&
+                    this.menuField &&
+                    this.menuField.ApiName === field.ApiName) ||
+                    (this.indicatorsField &&
+                        this.indicatorsField.ApiName === field.ApiName) ||
+                    (this.hasCampaignField &&
+                        this.hasCampaignField.ApiName === field.ApiName))) {
+                return;
+            }
+            // Set type to link
+            if (index === 0 && this.firstFieldAsLink) {
+                dataField.FieldType = FIELD_TYPE.InternalLink;
+                // dataField.Value = this.getInternalLinkHref();
+            }
+            if (field.ApiName === 'ObjectMenu') {
+                dataField.Enabled = true;
+                // HACK : Until "Enabled" returns from the server, we set PepMenu to be
+                //        Disabled in cart on regular items and not campign items.
+            }
+            const customField = this.createBaseField(field, dataField);
+            fields.push(customField);
+        });
+        return fields.sort((f1, f2) => f1.row > f2.row
+            ? 1
+            : f1.row < f2.row
+                ? -1
+                : f1.col > f2.col
+                    ? 1
+                    : f1.col < f2.col
+                        ? -1
+                        : 0);
+    }
+    onFormValidationChanged(formValidationChange) {
+        this.formValidationChange.emit(formValidationChange);
+    }
+    onValueChanged(event) {
+        this.onFormValidationChanged(this.form.valid);
+        const formControl = this.getFormControlById(event.key);
+        const isValid = formControl ? formControl.valid : true;
+        // const isValid = true;
+        if (isValid) {
+            // Set it to false to disable all fields.
+            if (this.isInternal && this.layoutType === 'form') {
+                this.isLocked = true;
+            }
+            // Update the current field value.
+            const currentField = this.fields.find((f) => f.key === event.key);
+            if (currentField) {
+                currentField.formattedValue = currentField.value = event.value;
+            }
+            this.valueChange.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: event.key,
+                value: event.value,
+                controlType: event.controlType,
+            });
+        }
+    }
+    onClick(fieldClickEvent) {
+        const clickedUiControlField = this.data.Fields.filter((f) => f.ApiName === fieldClickEvent.key)[0];
+        const idType = this.data.Type ? this.data.Type.toString() : '';
+        if (clickedUiControlField) {
+            this.fieldClick.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: fieldClickEvent.key,
+                idType,
+                which: fieldClickEvent.eventWhich,
+                value: fieldClickEvent.value,
+                controlType: fieldClickEvent.controlType,
+                fieldType: clickedUiControlField.FieldType,
+                otherData: fieldClickEvent.otherData,
+            });
+        }
+        else {
+            // For other api names (like enter children etc).
+            this.fieldClick.emit({
+                id: this.data.UID.toString(),
+                uiObjectKey: this.data.Key,
+                key: fieldClickEvent.key,
+                idType,
+                which: fieldClickEvent.eventWhich,
+                value: fieldClickEvent.value,
+                controlType: fieldClickEvent.controlType,
+                otherData: fieldClickEvent.otherData,
+            });
+        }
+    }
+    // This event is for handle the internal page events.
+    onInternalFormFieldClicked(internalFormFieldClick) {
+        this.internalFormFieldClick.emit(internalFormFieldClick);
+    }
+    // This event is for handle the internal page events.
+    onInternalFormFieldChanged(internalFormFieldChange) {
+        this.internalFormFieldChange.emit(internalFormFieldChange);
+    }
+    // This event is for handle the related items change events.
+    onFormValueChanged(event) {
+        // this.valueChange.emit(event);
+    }
+    // This event is for handle the related items change events.
+    onFormFieldClick(event) {
+        this.fieldClick.emit(event);
+    }
+}
+PepFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", 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                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>", 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"] }, { kind: "component", type: i6.PepDateComponent, selector: "pep-date", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "visible", "minValue", "maxValue", "minDateValue", "maxDateValue", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType"], outputs: ["valueChange"] }, { 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"], outputs: ["fileChange", "elementClick"] }, { kind: "component", type: i9.PepQuantitySelectorComponent, selector: "pep-quantity-selector", inputs: ["key", "value", "formattedValue", "label", "type", "mandatory", "disabled", "readonly", "textColor", "xAlignment", "rowSpan", "allowDecimal", "additionalValue", "notificationInfo", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive", "styleType"], outputs: ["valueChange", "elementClick"] }, { kind: "component", type: i13.PepSignatureComponent, selector: "pep-signature", inputs: ["key", "src", "label", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "signatureURL", "visible", "form", "showTitle", "renderTitle", "layoutType", "isActive"], outputs: ["fileChange"] }, { 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"] }, { kind: "component", type: PepFieldGeneratorComponent, selector: "pep-field-generator", inputs: ["field", "isActive", "uid", "form", "layoutType", "showTitle", "checkForChanges"], outputs: ["valueChange", "formValidationChange", "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: "14.0.2", 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                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>", 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: [{
+                type: Input
+            }], isReport: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], lockEvents: [{
+                type: Input
+            }], canEditObject: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], lockFields: [{
+                type: Input
+            }], isActive: [{
+                type: Input
+            }], layoutType: [{
+                type: Input
+            }], objectId: [{
+                type: Input
+            }], parentId: [{
+                type: Input
+            }], searchCode: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], firstFieldAsLink: [{
+                type: Input
+            }], checkForChanges: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], fieldClick: [{
+                type: Output
+            }], internalFormFieldClick: [{
+                type: Output
+            }], internalFormFieldChange: [{
+                type: Output
+            }] } });
+
+const pepComponentsModules = [
+    PepAddressModule,
+    PepAttachmentModule,
+    PepButtonModule,
+    PepCarouselModule,
+    PepCheckboxModule,
+    PepDateModule,
+    PepImageModule,
+    PepImagesFilmstripModule,
+    PepQuantitySelectorModule,
+    PepRichHtmlTextareaModule,
+    PepSelectModule,
+    PepSeparatorModule,
+    PepSignatureModule,
+    PepTextareaModule,
+    PepTextboxModule,
+    PepLinkModule
+];
+class PepFormModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemEdit,
+            pepIconSystemMenu,
+            pepIconNumberPlus,
+            pepIconSystemBin,
+            pepIconIndicatorDotPlaceholder,
+        ]);
+    }
+}
+PepFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepFormModule, deps: [{ token: i1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", 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,
+        PepSeparatorModule,
+        PepSignatureModule,
+        PepTextareaModule,
+        PepTextboxModule,
+        PepLinkModule, PepFieldTitleModule,
+        PepGroupButtonsModule], exports: [PepFormComponent] });
+PepFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", 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: "14.0.2", ngImport: i0, type: PepFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatGridListModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        // External modules
+                        SignaturePadModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepDialogModule,
+                        PepIconModule,
+                        pepComponentsModules,
+                        PepFieldTitleModule,
+                        PepGroupButtonsModule,
+                    ],
+                    exports: [PepFormComponent],
+                    declarations: [
+                        PepFormComponent,
+                        PepInternalFormComponent,
+                        PepFieldGeneratorComponent,
+                        PepInternalFieldGeneratorComponent,
+                        PepIndicatorsComponent,
+                        PepInternalButtonComponent,
+                        PepInternalListComponent,
+                        PepInternalMenuComponent,
+                        PepInternalPageComponent,
+                        PepInternalCaruselComponent
+                    ],
+                    providers: [
+                        FormBuilder
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.PepIconRegistry }]; } });
+
+/*
+ * Public API Surface of ngx-lib/form
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PepFormComponent, PepFormModule };
+//# sourceMappingURL=pepperi-addons-ngx-lib-form.mjs.map