@pepperi-addons/ngx-lib 0.3.15-loader.2 → 0.3.15-loader.20

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

@@ -331,6 +331,7 @@
             this.canEditObject = true;
             this._data = null;
             this.isActive = false;
+            this.isDynamic = false;
             this.layoutType = 'card';
             // @Input() listType = '';
             this.objectId = '0';
@@ -1611,7 +1612,7 @@
     PepFormComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-form',
-                    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>",
+                    template: "<fieldset *ngIf=\"form\" [formGroup]=\"form\" [disabled]=\"isLocked\" class=\"pep-form\"\n    [ngStyle]=\"{ 'background-color': layoutType == 'card' && data?.BackgroundColor }\">\n    \n    <!-- Dynamic Form -->\n    <mat-grid-list *ngIf=\"layoutType == 'form' && isDynamic\" [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-dynamic-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [showTitle]=\"showTitle\" [field]=\"field\"\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-dynamic-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- New Form -->\n    <mat-grid-list *ngIf=\"layoutType == 'form' && !isDynamic\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"formGutterSize\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:grid}"]
                 },] }
@@ -1633,6 +1634,7 @@
         data: [{ type: core.Input }],
         lockFields: [{ type: core.Input }],
         isActive: [{ type: core.Input }],
+        isDynamic: [{ type: core.Input }],
         layoutType: [{ type: core.Input }],
         objectId: [{ type: core.Input }],
         parentId: [{ type: core.Input }],
@@ -1706,9 +1708,6 @@
             enumerable: false,
             configurable: true
         });
-        PepFieldGeneratorComponent.prototype.ngOnDestroy = function () {
-            //
-        };
         PepFieldGeneratorComponent.prototype.onFileChanged = function (fileData, field) {
             var value = fileData ? JSON.stringify(fileData) : '';
             var fieldValueChange = {
@@ -1757,12 +1756,15 @@
             // For testing.
             // this.field.disabled = this.field.readonly = false;
         };
+        PepFieldGeneratorComponent.prototype.ngOnDestroy = function () {
+            //
+        };
         return PepFieldGeneratorComponent;
     }());
     PepFieldGeneratorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-field-generator',
-                    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>",
+                    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>\n\n",
                     encapsulation: core.ViewEncapsulation.Emulated,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{width:100%;height:100%}"]
@@ -1975,6 +1977,180 @@
         valueChange: [{ type: core.Output }]
     };
 
+    var PepInternalMenuComponent = /** @class */ (function () {
+        function PepInternalMenuComponent() {
+            this.key = '';
+            this.label = '';
+            this.disabled = false;
+            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
+            // @Input() hasSubMenu = false;
+            this.options = [];
+            this.invertClass = true;
+            this.controlType = 'menu';
+            this.layoutType = 'form';
+            this.elementClick = new core.EventEmitter();
+        }
+        // @Output() menuItemClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();
+        PepInternalMenuComponent.prototype.ngOnDestroy = function () {
+            // if (this.elementClick) {
+            //     this.elementClick.unsubscribe();
+            // }
+            // if (this.menuItemClick) {
+            //     this.menuItemClick.unsubscribe();
+            // }
+        };
+        PepInternalMenuComponent.prototype.menuClicked = function (event) {
+            this.elementClick.emit({
+                key: this.key,
+                controlType: this.controlType,
+                eventWhich: event.which,
+            });
+        };
+        PepInternalMenuComponent.prototype.menuItemClicked = function (itemKey) {
+            // Not in use comment in version 16.55 for webapp.
+            // this.menuItemClick.emit({ key: itemKey });
+        };
+        return PepInternalMenuComponent;
+    }());
+    PepInternalMenuComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-internal-menu',
+                    template: "<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\n<ng-template #noSubMenuBlock>\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button,.pepperi-button{cursor:pointer}.pep-button.left-alignment,.pepperi-button.left-alignment{justify-self:flex-start}.pep-button.center-alignment,.pepperi-button.center-alignment{justify-self:center}.pep-button.right-alignment,.pepperi-button.right-alignment{justify-self:flex-end}"]
+                },] }
+    ];
+    PepInternalMenuComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        options: [{ type: core.Input }],
+        invertClass: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        elementClick: [{ type: core.Output }]
+    };
+
+    var PepInternalPageService = /** @class */ (function () {
+        function PepInternalPageService(httpService) {
+            this.httpService = httpService;
+            this.parentId = '0';
+            this.additionalApiName = '';
+            this.transactionUrl = 'Service1.svc/v1/OrderCenter/Transaction/';
+        }
+        PepInternalPageService.prototype.getBaseParentUrl = function () {
+            var url = "" + this.transactionUrl + this.objectId + "/ParentLine/" + this.parentId + "/";
+            return url;
+        };
+        PepInternalPageService.prototype.getChildren = function (callbackFunc) {
+            var _a;
+            var 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.
+            var moreParams = ((_a = this.additionalApiName) === null || _a === void 0 ? void 0 : _a.length) > 0
+                ? this.additionalApiName + "/" + this.viewType
+                : "''/" + this.viewType;
+            var url = this.getBaseParentUrl() + "Items/" + moreParams;
+            this.httpService.postWapiApiCall(url, body).subscribe(function (res) {
+                callbackFunc(res);
+            }
+            // (error) => {},
+            // () => {}
+            );
+        };
+        PepInternalPageService.prototype.initDetails = function (objectId, parentId, searchCode, callbackFunc) {
+            if (!objectId || !parentId) {
+                return;
+            }
+            this.objectId = objectId;
+            this.parentId = parentId;
+            this.searchCode = searchCode;
+            this.httpService
+                .getWapiApiCall(this.getBaseParentUrl() + "ViewTypes")
+                .subscribe(function (res) {
+                callbackFunc(res);
+            }
+            // (error) => {},
+            // () => {}
+            );
+        };
+        PepInternalPageService.prototype.changeChildrenViewType = function (viewType, callbackFunc) {
+            this.viewType = viewType;
+            this.getChildren(callbackFunc);
+        };
+        PepInternalPageService.prototype.changeAdditionalApiName = function (additionalApiName, callbackFunc) {
+            this.additionalApiName = additionalApiName;
+            this.getChildren(callbackFunc);
+        };
+        PepInternalPageService.prototype.childPlusClick = function (itemId, fieldApiName, callbackFunc) {
+            var 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(function (res) {
+                callbackFunc(res);
+            }
+            // (error) => {},
+            // () => {}
+            );
+        };
+        PepInternalPageService.prototype.childMinusClick = function (itemId, fieldApiName, callbackFunc) {
+            var 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(function (res) {
+                callbackFunc(res);
+            }
+            // (error) => {},
+            // () => {}
+            );
+        };
+        PepInternalPageService.prototype.childValueChanged = function (itemId, fieldApiName, value, callbackFunc) {
+            var 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(function (res) {
+                callbackFunc(res);
+            }
+            // (error) => {},
+            // () => {}
+            );
+        };
+        return PepInternalPageService;
+    }());
+    PepInternalPageService.decorators = [
+        { type: core.Injectable }
+    ];
+    PepInternalPageService.ctorParameters = function () { return [
+        { type: ngxLib.PepHttpService }
+    ]; };
+
     var PepInternalListComponent = /** @class */ (function () {
         function PepInternalListComponent(element, layoutService, cd, renderer) {
             var _this = this;
@@ -2481,180 +2657,6 @@
         selectAllCB: [{ type: core.ViewChild, args: ['selectAllCB',] }]
     };
 
-    var PepInternalMenuComponent = /** @class */ (function () {
-        function PepInternalMenuComponent() {
-            this.key = '';
-            this.label = '';
-            this.disabled = false;
-            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
-            // @Input() hasSubMenu = false;
-            this.options = [];
-            this.invertClass = true;
-            this.controlType = 'menu';
-            this.layoutType = 'form';
-            this.elementClick = new core.EventEmitter();
-        }
-        // @Output() menuItemClick: EventEmitter<IPepFieldClickEvent> = new EventEmitter<IPepFieldClickEvent>();
-        PepInternalMenuComponent.prototype.ngOnDestroy = function () {
-            // if (this.elementClick) {
-            //     this.elementClick.unsubscribe();
-            // }
-            // if (this.menuItemClick) {
-            //     this.menuItemClick.unsubscribe();
-            // }
-        };
-        PepInternalMenuComponent.prototype.menuClicked = function (event) {
-            this.elementClick.emit({
-                key: this.key,
-                controlType: this.controlType,
-                eventWhich: event.which,
-            });
-        };
-        PepInternalMenuComponent.prototype.menuItemClicked = function (itemKey) {
-            // Not in use comment in version 16.55 for webapp.
-            // this.menuItemClick.emit({ key: itemKey });
-        };
-        return PepInternalMenuComponent;
-    }());
-    PepInternalMenuComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-internal-menu',
-                    template: "<ng-container *ngIf=\"options?.length > 0; then subMenuBlock; else noSubMenuBlock\"></ng-container>\n<ng-template #noSubMenuBlock>\n    <button (click)=\"menuClicked($event)\" title=\"{{ label }}\" mat-button\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'lock-events': disabled,\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n\n<ng-template #subMenuBlock>\n    <button mat-button [matMenuTriggerFor]=\"menu\" menu-blur\n        class=\"pep-button icon-button weak {{ layoutType === 'table' ? 'sm' : 'md' }}\" [ngClass]=\"{\n            'left-alignment': xAlignment == 'left',\n            'right-alignment': xAlignment == 'right',\n            'center-alignment': xAlignment == 'center',\n            'invert': invertClass\n        }\" title=\"{{ label }}\">\n        <mat-icon>\n            <pep-icon name=\"system_menu\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n\n    <mat-menu #menu=\"matMenu\" xPosition=\"{{xAlignment == 'right' ? 'after' : 'before'}}\"\n        [ngClass]=\"{ rtlMenu: xAlignment == 'right' }\">\n        <button *ngFor=\"let option of options\" mat-menu-item (click)=\"menuItemClicked(option.key)\">\n            <span>{{ option.value | translate }}</span>\n        </button>\n    </mat-menu>\n\n</ng-template>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{height:inherit;display:grid}:host>*{align-self:center}.pep-button,.pepperi-button{cursor:pointer}.pep-button.left-alignment,.pepperi-button.left-alignment{justify-self:flex-start}.pep-button.center-alignment,.pepperi-button.center-alignment{justify-self:center}.pep-button.right-alignment,.pepperi-button.right-alignment{justify-self:flex-end}"]
-                },] }
-    ];
-    PepInternalMenuComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        options: [{ type: core.Input }],
-        invertClass: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        elementClick: [{ type: core.Output }]
-    };
-
-    var PepInternalPageService = /** @class */ (function () {
-        function PepInternalPageService(httpService) {
-            this.httpService = httpService;
-            this.parentId = '0';
-            this.additionalApiName = '';
-            this.transactionUrl = 'Service1.svc/v1/OrderCenter/Transaction/';
-        }
-        PepInternalPageService.prototype.getBaseParentUrl = function () {
-            var url = "" + this.transactionUrl + this.objectId + "/ParentLine/" + this.parentId + "/";
-            return url;
-        };
-        PepInternalPageService.prototype.getChildren = function (callbackFunc) {
-            var _a;
-            var 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.
-            var moreParams = ((_a = this.additionalApiName) === null || _a === void 0 ? void 0 : _a.length) > 0
-                ? this.additionalApiName + "/" + this.viewType
-                : "''/" + this.viewType;
-            var url = this.getBaseParentUrl() + "Items/" + moreParams;
-            this.httpService.postWapiApiCall(url, body).subscribe(function (res) {
-                callbackFunc(res);
-            }
-            // (error) => {},
-            // () => {}
-            );
-        };
-        PepInternalPageService.prototype.initDetails = function (objectId, parentId, searchCode, callbackFunc) {
-            if (!objectId || !parentId) {
-                return;
-            }
-            this.objectId = objectId;
-            this.parentId = parentId;
-            this.searchCode = searchCode;
-            this.httpService
-                .getWapiApiCall(this.getBaseParentUrl() + "ViewTypes")
-                .subscribe(function (res) {
-                callbackFunc(res);
-            }
-            // (error) => {},
-            // () => {}
-            );
-        };
-        PepInternalPageService.prototype.changeChildrenViewType = function (viewType, callbackFunc) {
-            this.viewType = viewType;
-            this.getChildren(callbackFunc);
-        };
-        PepInternalPageService.prototype.changeAdditionalApiName = function (additionalApiName, callbackFunc) {
-            this.additionalApiName = additionalApiName;
-            this.getChildren(callbackFunc);
-        };
-        PepInternalPageService.prototype.childPlusClick = function (itemId, fieldApiName, callbackFunc) {
-            var 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(function (res) {
-                callbackFunc(res);
-            }
-            // (error) => {},
-            // () => {}
-            );
-        };
-        PepInternalPageService.prototype.childMinusClick = function (itemId, fieldApiName, callbackFunc) {
-            var 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(function (res) {
-                callbackFunc(res);
-            }
-            // (error) => {},
-            // () => {}
-            );
-        };
-        PepInternalPageService.prototype.childValueChanged = function (itemId, fieldApiName, value, callbackFunc) {
-            var 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(function (res) {
-                callbackFunc(res);
-            }
-            // (error) => {},
-            // () => {}
-            );
-        };
-        return PepInternalPageService;
-    }());
-    PepInternalPageService.decorators = [
-        { type: core.Injectable }
-    ];
-    PepInternalPageService.ctorParameters = function () { return [
-        { type: ngxLib.PepHttpService }
-    ]; };
-
     var PepInternalPageComponent = /** @class */ (function () {
         function PepInternalPageComponent(fb, dialogService, internalPageService, customizationService, elementRef, changeDetectorRef) {
             this.fb = fb;
@@ -3203,6 +3205,187 @@
         internalFormFieldClick: [{ type: core.Output }]
     };
 
+    var PepDynamicFieldGeneratorComponent = /** @class */ (function () {
+        function PepDynamicFieldGeneratorComponent(_resolver) {
+            this._resolver = _resolver;
+            /*get field(): any {
+                return this._field;
+            }*/
+            this.isActive = false;
+            this.uid = null;
+            this.layoutType = 'form';
+            this.showTitle = true;
+            this.checkForChanges = null;
+            this.valueChange = new core.EventEmitter();
+            this.formValidationChange = new core.EventEmitter();
+            this.elementClick = new core.EventEmitter();
+            this.internalFormFieldChange = new core.EventEmitter();
+            this.internalFormFieldClick = new core.EventEmitter();
+            this.formValueChange = new core.EventEmitter();
+            this.formFieldClick = new core.EventEmitter();
+        }
+        Object.defineProperty(PepDynamicFieldGeneratorComponent.prototype, "controlContainer", {
+            set: function (val) {
+                this._controlContainer = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepDynamicFieldGeneratorComponent.prototype, "field", {
+            set: function (value) {
+                var _this = this;
+                this._field = value;
+                setTimeout(function () {
+                    _this.createControlDynamically();
+                }, 0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepDynamicFieldGeneratorComponent.prototype.hasProperty = function (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop);
+        };
+        PepDynamicFieldGeneratorComponent.prototype.createControlDynamically = function () {
+            if (this._controlContainer) {
+                //const factory: ComponentFactory<any> = this.getComponentFactory();
+                var factory = this._resolver.resolveComponentFactory(textbox.PepTextboxComponent);
+                if (factory) {
+                    var componentRef = this._controlContainer.createComponent(factory);
+                    this._containerRef = componentRef.instance;
+                    this.setBaseProperties();
+                    this.setControlProperties();
+                    this.setAdditionalProperties();
+                }
+                else {
+                    console.log('no fctory for comp type - ', this._field.controlType);
+                }
+                //if (this._resolvedComponent) {
+                // }
+                // this.pepList = componentRef.instance;
+            }
+            else {
+                //error
+            }
+        };
+        PepDynamicFieldGeneratorComponent.prototype.getComponentFactory = function () {
+            switch (this._field.controlType) {
+                case 'address':
+                    this._resolvedComponent = address.PepAddressComponent;
+                    return this._resolver.resolveComponentFactory(address.PepAddressComponent);
+                case 'attachment':
+                    this._resolvedComponent = attachment.PepAttachmentComponent;
+                    return this._resolver.resolveComponentFactory(attachment.PepAttachmentComponent);
+                case 'checkbox':
+                    this._resolvedComponent = checkbox.PepCheckboxComponent;
+                    return this._resolver.resolveComponentFactory(checkbox.PepCheckboxComponent);
+                case 'date':
+                    this._resolvedComponent = date.PepDateComponent;
+                    return this._resolver.resolveComponentFactory(date.PepDateComponent);
+                case 'image':
+                    this._resolvedComponent = image.PepImageComponent;
+                    return this._resolver.resolveComponentFactory(image.PepImageComponent);
+                case 'images':
+                    this._resolvedComponent = imagesFilmstrip.PepImagesFilmstripComponent;
+                    return this._resolver.resolveComponentFactory(imagesFilmstrip.PepImagesFilmstripComponent);
+                case 'qs':
+                    this._resolvedComponent = quantitySelector.PepQuantitySelectorComponent;
+                    return this._resolver.resolveComponentFactory(quantitySelector.PepQuantitySelectorComponent);
+                case 'richhtmltextarea':
+                    this._resolvedComponent = richHtmlTextarea.PepRichHtmlTextareaComponent;
+                    return this._resolver.resolveComponentFactory(richHtmlTextarea.PepRichHtmlTextareaComponent);
+                case 'select':
+                    this._resolvedComponent = select.PepSelectComponent;
+                    return this._resolver.resolveComponentFactory(select.PepSelectComponent);
+                case 'separator':
+                    this._resolvedComponent = separator.PepSeparatorComponent;
+                    return this._resolver.resolveComponentFactory(separator.PepSeparatorComponent);
+                /*case 'signature':
+                    this._resolvedComponent = PepSignatureComponent;
+                    return this._resolver.resolveComponentFactory(PepSignatureComponent); */
+                case 'textarea':
+                    this._resolvedComponent = textarea.PepTextareaComponent;
+                    return this._resolver.resolveComponentFactory(textarea.PepTextareaComponent);
+                case 'textbox':
+                    this._resolvedComponent = textbox.PepTextboxComponent;
+                    return this._resolver.resolveComponentFactory(textbox.PepTextboxComponent);
+                case 'link':
+                    this._resolvedComponent = link.PepLinkComponent;
+                    return this._resolver.resolveComponentFactory(link.PepLinkComponent);
+                case 'indicators':
+                    this._resolvedComponent = PepIndicatorsComponent;
+                    return this._resolver.resolveComponentFactory(PepIndicatorsComponent);
+                case 'button':
+                    this._resolvedComponent = PepInternalButtonComponent;
+                    return this._resolver.resolveComponentFactory(PepInternalButtonComponent);
+                case 'menu':
+                    this._resolvedComponent = PepInternalMenuComponent;
+                    return this._resolver.resolveComponentFactory(PepInternalMenuComponent);
+                case 'internalPage':
+                    this._resolvedComponent = PepInternalPageComponent;
+                    return this._resolver.resolveComponentFactory(PepInternalPageComponent);
+                case 'internalCarusel':
+                    this._resolvedComponent = PepInternalCaruselComponent;
+                    return this._resolver.resolveComponentFactory(PepInternalCaruselComponent);
+            }
+        };
+        PepDynamicFieldGeneratorComponent.prototype.setBaseProperties = function () {
+            switch (this._field.controlType) {
+                case 'textbox':
+                    this._containerRef.form = this.form;
+                    this._containerRef.showTitle = this.showTitle;
+                    this._containerRef.layoutType = this.layoutType;
+                    break;
+            }
+        };
+        PepDynamicFieldGeneratorComponent.prototype.setControlProperties = function () {
+            var _this = this;
+            // debugger;
+            /*Object.entries(this._field).forEach((prop: [string, any]) => {
+                console.log('prop', prop);
+                if (prop[1] !== undefined && this.hasProperty(this._resolvedComponent.propDecorators, prop[0])) {
+                    this._containerRef[prop[0]] = prop[1];
+                }
+            }) */
+            Object.entries(this._field).forEach(function (prop) {
+                console.log('prop', prop);
+                if (prop[1] !== undefined && _this.hasProperty(_this._containerRef, prop[0])) {
+                    _this._containerRef[prop[0]] = prop[1];
+                }
+            });
+        };
+        PepDynamicFieldGeneratorComponent.prototype.setAdditionalProperties = function () {
+        };
+        return PepDynamicFieldGeneratorComponent;
+    }());
+    PepDynamicFieldGeneratorComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-dynamic-field-generator',
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-container #controlContainer></ng-container>\n</ng-container>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [":host{width:100%;height:100%}"]
+                },] }
+    ];
+    PepDynamicFieldGeneratorComponent.ctorParameters = function () { return [
+        { type: core.ComponentFactoryResolver }
+    ]; };
+    PepDynamicFieldGeneratorComponent.propDecorators = {
+        controlContainer: [{ type: core.ViewChild, args: ['controlContainer', { read: core.ViewContainerRef },] }],
+        field: [{ type: core.Input }],
+        isActive: [{ type: core.Input }],
+        uid: [{ type: core.Input }],
+        form: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        checkForChanges: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }],
+        formValidationChange: [{ type: core.Output }],
+        elementClick: [{ type: core.Output }],
+        internalFormFieldChange: [{ type: core.Output }],
+        internalFormFieldClick: [{ type: core.Output }],
+        formValueChange: [{ type: core.Output }],
+        formFieldClick: [{ type: core.Output }]
+    };
+
     var pepComponentsModules = [
         address.PepAddressModule,
         attachment.PepAttachmentModule,
@@ -3260,6 +3443,7 @@
                     declarations: [
                         PepFormComponent,
                         PepFieldGeneratorComponent,
+                        PepDynamicFieldGeneratorComponent,
                         PepIndicatorsComponent,
                         PepInternalButtonComponent,
                         PepInternalListComponent,
@@ -3284,14 +3468,15 @@
     exports.PepFormComponent = PepFormComponent;
     exports.PepFormModule = PepFormModule;
     exports.ɵa = PepFieldGeneratorComponent;
-    exports.ɵb = PepIndicatorsComponent;
-    exports.ɵc = PepInternalButtonComponent;
-    exports.ɵd = PepInternalListComponent;
-    exports.ɵe = PepInternalMenuComponent;
-    exports.ɵf = PepInternalPageComponent;
-    exports.ɵg = PepInternalPageService;
-    exports.ɵh = PepInternalCaruselComponent;
-    exports.ɵi = PepInternalCaruselService;
+    exports.ɵb = PepDynamicFieldGeneratorComponent;
+    exports.ɵc = PepIndicatorsComponent;
+    exports.ɵd = PepInternalButtonComponent;
+    exports.ɵe = PepInternalListComponent;
+    exports.ɵf = PepInternalMenuComponent;
+    exports.ɵg = PepInternalPageComponent;
+    exports.ɵh = PepInternalPageService;
+    exports.ɵi = PepInternalCaruselComponent;
+    exports.ɵj = PepInternalCaruselService;
 
     Object.defineProperty(exports, '__esModule', { value: true });