@pepperi-addons/ngx-lib 0.2.51-beta.21 → 0.2.51-beta.25

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

@@ -347,6 +347,7 @@
             // payLoad = '';
             this.rows = [];
             this.fields = [];
+            this._fieldsSubject = new rxjs.BehaviorSubject([]);
             this.columns = 1;
             this.hasMenuFloatingOnOtherField = false;
             this.indicatorsDataField = null;
@@ -372,6 +373,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(PepFormComponent.prototype, "fields$", {
+            get: function () {
+                return this._fieldsSubject.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PepFormComponent.prototype, "shouldReloadForm", {
             get: function () {
                 return this._shouldReloadForm;
@@ -1027,6 +1035,7 @@
                 // this.layoutType === 'form' ||
                 this.layoutType === 'table') {
                     this.fields = fields;
+                    this._fieldsSubject.next(fields);
                     this.rows = [];
                     for (var i = 0; i <= maxRow; i++) {
                         this.rows[i] = [];
@@ -1138,19 +1147,21 @@
                                 : f1.col < f2.col
                                     ? -1
                                     : 0; });
+                    this._fieldsSubject.next(fields);
                 }
             }
         };
         PepFormComponent.prototype.setForm = function (isForUpdate) {
-            var e_4, _b, e_5, _c;
+            var e_4, _b, e_5, _c, e_6, _d;
+            var _this = this;
             if (isForUpdate === void 0) { isForUpdate = false; }
             var _a;
             var allFieldsAreReadOnly = true;
             if (!isForUpdate) {
                 var fields = [];
                 try {
-                    for (var _d = __values(this.fields), _e = _d.next(); !_e.done; _e = _d.next()) {
-                        var currentField = _e.value;
+                    for (var _e = __values(this.fields), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var currentField = _f.value;
                         // Add all fields except 'internalPage' (for children).
                         if (currentField.controlType !== 'internalPage') {
                             fields.push(currentField);
@@ -1163,81 +1174,64 @@
                 catch (e_4_1) { e_4 = { error: e_4_1 }; }
                 finally {
                     try {
-                        if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+                        if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                     }
                     finally { if (e_4) throw e_4.error; }
                 }
                 this.form = this.toControlGroup(fields);
             }
             else {
-                var _loop_1 = function (currentField) {
-                    var e_6, _h;
-                    if (currentField.controlType !== 'internalPage') {
-                        if (currentField.groupFields &&
-                            currentField.groupFields.length > 0) {
-                            try {
-                                // for (let j = 0; j < currentField.groupFields.length; j++) {
-                                //     let currentGroupField = currentField.groupFields[j];
-                                for (var _j = (e_6 = void 0, __values(currentField.groupFields)), _k = _j.next(); !_k.done; _k = _j.next()) {
-                                    var currentGroupField = _k.value;
-                                    var fieldFormattedValue = this_1.getFieldFormattedValue(currentGroupField);
-                                    this_1.customizationService.updateFormField(this_1.form, currentGroupField, fieldFormattedValue, currentField);
-                                }
-                            }
-                            catch (e_6_1) { e_6 = { error: e_6_1 }; }
-                            finally {
+                try {
+                    // Update form values if changed by calculated fields.
+                    for (var _g = __values(this.fields), _h = _g.next(); !_h.done; _h = _g.next()) {
+                        var currentField = _h.value;
+                        if (currentField.controlType !== 'internalPage') {
+                            if (currentField.groupFields &&
+                                currentField.groupFields.length > 0) {
                                 try {
-                                    if (_k && !_k.done && (_h = _j.return)) _h.call(_j);
+                                    // for (let j = 0; j < currentField.groupFields.length; j++) {
+                                    //     let currentGroupField = currentField.groupFields[j];
+                                    for (var _j = (e_6 = void 0, __values(currentField.groupFields)), _k = _j.next(); !_k.done; _k = _j.next()) {
+                                        var currentGroupField = _k.value;
+                                        var fieldFormattedValue = this.getFieldFormattedValue(currentGroupField);
+                                        this.customizationService.updateFormField(this.form, currentGroupField, fieldFormattedValue, currentField);
+                                    }
+                                }
+                                catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                                finally {
+                                    try {
+                                        if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
+                                    }
+                                    finally { if (e_6) throw e_6.error; }
                                 }
-                                finally { if (e_6) throw e_6.error; }
                             }
-                        }
-                        else {
-                            var fieldFormattedValue = this_1.getFieldFormattedValue(currentField);
-                            // this.form.controls[currentField.key].setValue(fieldFormattedValue);
-                            this_1.customizationService.updateFormField(this_1.form, currentField, fieldFormattedValue);
-                            // Hack to override (update) the field.
-                            if (currentField.controlType === 'internalCarusel') {
-                                var tmp_1 = JSON.parse(JSON.stringify(currentField));
-                                currentField = null;
-                                setTimeout(function () {
-                                    // const customField: PepFieldBase = this.convertToCustomField(
-                                    //     field,
-                                    //     dataField,
-                                    //     this.canEditObject,
-                                    //     this.menuDataField,
-                                    //     this.hasCampaignDataField,
-                                    //     this.indicatorsDataField,
-                                    //     this.objectId,
-                                    //     this.parentId,
-                                    //     this.searchCode
-                                    // );
-                                    currentField = tmp_1;
-                                }, 0);
+                            else {
+                                var fieldFormattedValue = this.getFieldFormattedValue(currentField);
+                                // this.form.controls[currentField.key].setValue(fieldFormattedValue);
+                                this.customizationService.updateFormField(this.form, currentField, fieldFormattedValue);
+                                // // Hack to override (update) the field.
+                                // if (currentField.controlType === 'internalCarusel') {
+                                //     currentField = this.createCopyField(currentField);
+                                // }
                             }
                         }
-                    }
-                    if (!currentField.readonly) {
-                        allFieldsAreReadOnly = false;
-                    }
-                };
-                var this_1 = this;
-                try {
-                    // Update form values if changed by calculated fields.
-                    for (var _f = __values(this.fields), _g = _f.next(); !_g.done; _g = _f.next()) {
-                        var currentField = _g.value;
-                        _loop_1(currentField);
+                        if (!currentField.readonly) {
+                            allFieldsAreReadOnly = false;
+                        }
                     }
                 }
                 catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
-                        if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
+                        if (_h && !_h.done && (_c = _g.return)) _c.call(_g);
                     }
                     finally { if (e_5) throw e_5.error; }
                 }
-                // // Hack to override (update) the field.
-                // this.fields = JSON.parse(JSON.stringify(this.fields));
+                // Hack to override (update) the fields.
+                this._fieldsSubject.next(null);
+                setTimeout(function () {
+                    _this._fieldsSubject.next(_this.fields);
+                }, 0);
             }
             var isFormValid = (_a = this.form) === null || _a === void 0 ? void 0 : _a.valid;
             // Change validation to true if all fields are read only.
@@ -1248,6 +1242,12 @@
             // Set it to false to enable all fields.
             this.isLocked = false;
         };
+        PepFormComponent.prototype.createCopyField = function (baseField) {
+            var uiControlField = this.getUiControlFields().find(function (cf) { return cf.ApiName === baseField.key; });
+            var dataField = this.data.Fields.find(function (df) { return df.ApiName === baseField.key; });
+            var customField = this.convertToCustomField(uiControlField, dataField, this.canEditObject, this.menuDataField, this.hasCampaignDataField, this.indicatorsDataField, this.objectId, this.parentId, this.searchCode);
+            return customField;
+        };
         PepFormComponent.prototype.initForm = function () {
             if (this.data && this.data.Fields) {
                 var fields = this.convertCustomFields(this.getUiControlFields(), this.data.Fields);
@@ -1288,33 +1288,32 @@
                 options.pageInfo = updatedField.UIPageInfo;
             }
             customField.update(options);
-            // customField = JSON.parse(JSON.stringify(customField));
         };
         PepFormComponent.prototype.updateForm = function () {
             var e_7, _b;
             if (this.data && this.data.Fields) {
-                var _loop_2 = function (currentField) {
+                var _loop_1 = function (currentField) {
                     var e_8, _e;
-                    var customField = this_2.fields.filter(function (f) { return f.key === currentField.ApiName; })[0];
+                    var customField = this_1.fields.filter(function (f) { return f.key === currentField.ApiName; })[0];
                     // Update all fields except 'internalPage' type (for children).
                     if (customField && customField.controlType !== 'internalPage') {
-                        this_2.updateField(customField, currentField);
+                        this_1.updateField(customField, currentField);
                         // Update the group fields.
                         if (customField.controlType === 'address' &&
                             currentField.GroupFields) {
-                            var _loop_3 = function (currentGroupField) {
+                            var _loop_2 = function (currentGroupField) {
                                 currentGroupField.Enabled = !currentField.Enabled
                                     ? false
                                     : currentGroupField.Enabled;
                                 var customGroupField = customField.groupFields.filter(function (f) { return f.key === currentGroupField.ApiName; })[0];
-                                this_2.updateField(customGroupField, currentGroupField);
+                                this_1.updateField(customGroupField, currentGroupField);
                             };
                             try {
                                 // for (let j = 0; j < currentField.GroupFields.length; j++) {
                                 // let currentGroupField = currentField.GroupFields[j];
                                 for (var _f = (e_8 = void 0, __values(currentField.GroupFields)), _g = _f.next(); !_g.done; _g = _f.next()) {
                                     var currentGroupField = _g.value;
-                                    _loop_3(currentGroupField);
+                                    _loop_2(currentGroupField);
                                 }
                             }
                             catch (e_8_1) { e_8 = { error: e_8_1 }; }
@@ -1327,11 +1326,11 @@
                         }
                     }
                 };
-                var this_2 = this;
+                var this_1 = this;
                 try {
                     for (var _c = __values(this.data.Fields), _d = _c.next(); !_d.done; _d = _c.next()) {
                         var currentField = _d.value;
-                        _loop_2(currentField);
+                        _loop_1(currentField);
                     }
                 }
                 catch (e_7_1) { e_7 = { error: e_7_1 }; }
@@ -1615,7 +1614,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\" [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\" [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; 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; 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    <!-- New Form -->\n    <mat-grid-list *ngIf=\"layoutType == 'form'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"formGutterSize\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [checkForChanges]=\"checkForChanges\" [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\"\n                (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\"\n                (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                (formValidationChange)=\"onFormValidationChanged($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <!-- Thumbnails -->\n    <mat-grid-list *ngIf=\"layoutType == 'card'\" [cols]=\"columns\" [rowHeight]=\"rowHeight + 'rem'\"\n        [gutterSize]=\"cardGutterSize\" class=\"card-spacing\">\n        <mat-grid-tile *ngFor=\"let field of fields$ | async\" [rowspan]=\"field.rowSpan\" [colspan]=\"field.colSpan\"\n            [ngStyle]=\"{ overflow: field.type == 'qs' ? 'unset' : 'hidden' }\">\n            <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [form]=\"form\" [layoutType]=\"layoutType\"\n                [ngClass]=\"{ 'lock-events': lockEvents }\" [isActive]=\"isActive\" [checkForChanges]=\"checkForChanges\"\n                [uid]=\"data?.UID\" [field]=\"field\" [showTitle]=\"showTitle\" (valueChange)=\"onValueChanged($event)\"\n                (elementClick)=\"onClick($event)\" (internalFormFieldClick)=\"onInternalFormFieldClicked($event)\"\n                (internalFormFieldChange)=\"onInternalFormFieldChanged($event)\"\n                (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\">\n            </pep-field-generator>\n        </mat-grid-tile>\n    </mat-grid-list>\n\n    <ng-container *ngIf=\"layoutType == 'table'\">\n        <ng-container *ngIf=\"isReport; then reportBlock; else notReportBlock\"></ng-container>\n        <ng-template #reportBlock>\n            <ng-container *ngTemplateOutlet=\"report\"></ng-container>\n        </ng-template>\n        <ng-template #notReportBlock>\n            <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip table-cell \"\n                [ngClass]=\"['text-align-' + field.xAlignment]\" style=\"height: 100%\"\n                [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString}\">\n                <pep-field-generator *ngIf=\"field.controlType != 'placeholder'\" [checkForChanges]=\"checkForChanges\"\n                    [uid]=\"data?.UID\" [field]=\"field\" [form]=\"form\" [layoutType]=\"layoutType\" [showTitle]=\"false\"\n                    (elementClick)=\"onClick($event)\" (valueChange)=\"onValueChanged($event)\"\n                    (formValueChange)=\"onFormValueChanged($event)\" (formFieldClick)=\"onFormFieldClick($event)\"\n                    [isActive]=\"isActive\">\n                </pep-field-generator>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!------- For testing ------------\n    {{ form.value | json }}\n    {{ form.valid }}\n    ---------------------------------->\n</fieldset>\n\n<ng-template #report>\n    <div *ngFor=\"let field of fields$ | async; let j = index\" class=\"pull-left flip pep-report-fields\"\n        [ngStyle]=\"{ width: (layout?.ControlFields)[j]?.calcColumnWidthString }\"\n        [ngClass]=\"['text-align-' + field.xAlignment]\">\n        <ng-container [ngSwitch]=\"field.controlType\">\n            <pep-image *ngSwitchCase=\"'image'\" [uid]=\"data?.UID\" [form]=\"form\" [key]=\"field.key\"\n                [src]=\"field.formattedValue\" [srcLarge]=\"field.value\" [options]=\"field.options\" [label]=\"field.label\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\" [layoutType]=\"layoutType\"\n                (elementClick)=\"onClick($event)\">\n            </pep-image>\n\n            <pep-signature *ngSwitchCase=\"'signature'\" [form]=\"form\" [key]=\"field.key\" [src]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-signature>\n\n            <pep-checkbox *ngSwitchCase=\"'checkbox'\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"(field.value | lowercase) == 'true' || field.value == '1' ? true : false\" [label]=\"field.label\"\n                [type]=\"field.type\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [additionalValue]=\"field.additionalValue\" [layoutType]=\"layoutType\">\n            </pep-checkbox>\n\n            <pep-date *ngSwitchCase=\"'date'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [minValue]=\"field.minValue\" [maxValue]=\"field.maxValue\" [layoutType]=\"layoutType\">\n            </pep-date>\n\n            <pep-internal-button *ngSwitchCase=\"'button'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [disabled]=\"field.disabled\" [readonly]=\"field.readonly\" [xAlignment]=\"field.xAlignment\"\n                [layoutType]=\"layoutType\" (elementClick)=\"onClick($event)\">\n            </pep-internal-button>\n\n            <pep-textarea *ngSwitchCase=\"'textarea'\" [form]=\"form\" [key]=\"field.key\" [value]=\"field.value\"\n                [label]=\"field.label\" [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\"\n                [readonly]=\"field.readonly\" [maxFieldCharacters]=\"field.maxFieldCharacters\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\">\n            </pep-textarea>\n\n            <pep-quantity-selector *ngSwitchCase=\"'qs'\" [id]=\"field.key\" [form]=\"form\" [key]=\"field.key\"\n                [value]=\"field.value\" [formattedValue]=\"field.formattedValue\" [label]=\"field.label\" [type]=\"field.type\"\n                [mandatory]=\"field.mandatory\" [disabled]=\"field.disabled\" [readonly]=\"field.readonly\"\n                [textColor]=\"field.textColor\" [xAlignment]=\"field.xAlignment\" [rowSpan]=\"field.rowSpan\"\n                [layoutType]=\"layoutType\" (valueChange)=\"onValueChanged($event)\" (elementClick)=\"onClick($event)\">\n            </pep-quantity-selector>\n\n            <ng-container *ngSwitchDefault>\n                <ng-container *ngIf=\"field.formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\">\n                </ng-container>\n                <ng-template #notEmptyBlock>\n                    <ng-container\n                        *ngIf=\"field.controlType === 'attachment' || field.type === 'link'; then linkBlock; else notLinkBlock\">\n                    </ng-container>\n                    <ng-template #linkBlock>\n                        <a [id]=\"field.key\" class=\"color-link body-sm pep-report-input readonly\"\n                            *ngIf=\"field.formattedValue != null\" title=\"{{ field.formattedValue }}\" target=\"_blank\"\n                            href=\"{{ field.value }}\">{{ field.formattedValue }}</a>\n                    </ng-template>\n                    <ng-template #notLinkBlock>\n                        <span [id]=\"field.key\" class=\"body-sm pep-report-input readonly\"\n                            title=\"{{ field.formattedValue }}\" [ngStyle]=\"{ color: field.textColor }\">{{\n                            field.formattedValue }}</span>\n                    </ng-template>\n                </ng-template>\n                <ng-template #emptyBlock>\n                    <span>&nbsp;</span>\n                </ng-template>\n            </ng-container>\n        </ng-container>\n    </div>\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [":host{display:grid}"]
                 },] }
@@ -1664,6 +1663,16 @@
             this.formValueChange = new core.EventEmitter();
             this.formFieldClick = new core.EventEmitter();
         }
+        Object.defineProperty(PepFieldGeneratorComponent.prototype, "field", {
+            get: function () {
+                return this._field;
+            },
+            set: function (value) {
+                this._field = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(PepFieldGeneratorComponent.prototype, "isValid", {
             get: function () {
                 if (this.field.readonly || this.field.disabled) {