mmhglobal-dynamicform 2.12.2 → 2.12.4

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -1624,7 +1624,7 @@ class ZformComponent {
                             this.fieldService.incrementComponentCounter(field.FieldElementName);
                         }
                         if (isFormControl === true) {
-                            const validators = ZComponentHelper.getValidators(field, isVisible, isRequired);
+                            const validators = ZComponentHelper.getValidators(field, isVisible, isRequired, this.group);
                             formControls[field.Value] = new FormControl(this.group.zModel[field.Value], validators);
                             if (ZComponentHelper.hasCCField(field.Type)) {
                                 const ccValidators = ZComponentHelper.getCCValidators(field, isVisible, isRequired);
@@ -1928,7 +1928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 // import { ZComponentHelper, ZComponentOutputEvent, ModalPageParams, ZGrid } from '../dynamicform/zcomponent.model';
 // import { ZGroup, ZField } from '../model/zgroup.model';
 class MainService {
-    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandlerService, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalrService, dialogService, oauth2Service, sharepointService, toastService) {
+    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandlerService, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalrService, dialogService, oauth2Service, toastService, authService) {
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.modalCtrl = modalCtrl;
@@ -1947,8 +1947,8 @@ class MainService {
         this.signalrService = signalrService;
         this.dialogService = dialogService;
         this.oauth2Service = oauth2Service;
-        this.sharepointService = sharepointService;
         this.toastService = toastService;
+        this.authService = authService;
         this.backNavigationPath = [];
         this.routeParam = [];
         this.currentUrl = '';
@@ -3009,64 +3009,70 @@ class MainService {
     }
     alertFormModified(formId, group, resp, eventName) {
         var _a;
-        // TODO: 20230830: need to further enhance handling data refresh if there linked child/Id at same page. currently unsure how to pull the linked child record.
         if (!resp) {
             return false;
         }
         const respResult = JSON.parse(resp);
+        if (!respResult.UserName) {
+            return false;
+        }
         if (formId === ((_a = respResult.Id) === null || _a === void 0 ? void 0 : _a.toString()) && eventName === window.location.href) {
-            if (respResult.Action === ActionType.Delete) {
-                this.alertService.show("Record Deleted by Another User", "The current record has been deleted by another user.", [
-                    { text: "OK", cssClass: "primary" }
-                ], ["col-6"], undefined, true).pipe(switchMap((reply) => {
-                    if (reply === "OK") {
-                        this.navigateBackToPreviousPage(group);
-                        return of(true);
-                    }
-                })).subscribe();
-            }
-            else if (respResult.Action === ActionType.Update) {
-                this.webApiService.httpGet$(`${this.group.resourceURL}/${formId}`, null).subscribe(resp => {
-                    var _a;
-                    if (resp && resp.RowVersion) {
-                        // Find properties starting with 'zworkflowbuttons_'
-                        const workflowButtons = [];
-                        for (const key in this.group.zComponents) {
-                            if (key.startsWith("zworkflowbuttons_")) {
-                                workflowButtons.push(this.group.zComponents[key]);
-                            }
-                        }
-                        if (resp.RowVersion !== ((_a = this.group.zModel) === null || _a === void 0 ? void 0 : _a.RowVersion)) {
-                            this.alertService.show("The current page has been modified by other users.", "Would you like to refresh the page data?", [
-                                { text: "No", cssClass: "secondary" },
-                                { text: "Yes", cssClass: "primary" }
-                            ], ["col-6"], undefined, true).pipe(switchMap((reply) => {
-                                if (reply === "Yes") {
-                                    this.group.zModel = resp;
-                                    const fg = this.group.form;
-                                    fg.patchValue(this.group.zModel);
-                                    fg.markAsPristine();
-                                    //reload workflow buttons
-                                    workflowButtons.forEach(buttons => {
-                                        buttons.loadButton();
-                                    });
-                                    return of(true);
-                                }
-                                workflowButtons.forEach(buttons => {
-                                    buttons.removeGotoButton();
-                                });
-                                this.toastService.showPermanently('The data on the current page is not up to date, as it has been saved and overwritten by another user. Please refresh the page.', 'top', 'warning');
-                                return of(false);
-                            })).subscribe();
+            if (respResult.UserName === this.authService.e1Token.myProfile.UserName) {
+                if (respResult.Action === ActionType.Update) {
+                    this.reloadDataAndWorkflowButton(resp);
+                }
+            }
+            else {
+                if (respResult.Action === ActionType.Delete) {
+                    this.alertService.show("Record Deleted by Another User", "The current record has been deleted by another user.", [
+                        { text: "OK", cssClass: "primary" }
+                    ], ["col-6"], undefined, true).pipe(switchMap((reply) => {
+                        if (reply === "OK") {
+                            this.navigateBackToPreviousPage(group);
+                            return of(true);
                         }
-                        else {
-                            console.log(`Alert received regarding form modification, RowVersion remains unaltered. No further action has been taken.`);
+                    })).subscribe();
+                }
+                else if (respResult.Action === ActionType.Update) {
+                    this.webApiService.httpGet$(`${this.group.resourceURL}/${formId}`, null).subscribe(resp => {
+                        var _a;
+                        if (resp && resp.RowVersion) {
+                            if (resp.RowVersion !== ((_a = this.group.zModel) === null || _a === void 0 ? void 0 : _a.RowVersion)) {
+                                this.alertService.show("The current page has been modified by other users.", "Would you like to refresh the page data?", [
+                                    { text: "No", cssClass: "secondary" },
+                                    { text: "Yes", cssClass: "primary" }
+                                ], ["col-6"], undefined, true).pipe(switchMap((reply) => {
+                                    if (reply === "Yes") {
+                                        this.reloadDataAndWorkflowButton(resp);
+                                        return of(true);
+                                    }
+                                    this.toastService.showPermanently('The data on the current page is not up to date, as it has been saved and overwritten by another user. Please refresh the page.', 'top', 'warning');
+                                    return of(false);
+                                })).subscribe();
+                            }
+                            else {
+                                console.log(`Alert received regarding form modification, RowVersion remains unaltered. No further action has been taken.`);
+                            }
                         }
-                    }
-                });
+                    });
+                }
             }
         }
     }
+    reloadDataAndWorkflowButton(zModel) {
+        this.group.zModel = zModel;
+        const fg = this.group.form;
+        fg.patchValue(this.group.zModel);
+        fg.markAsPristine();
+        // Capture all workflow buttons
+        const workflowButtons = Object.keys(this.group.zComponents)
+            .filter(key => key.startsWith("zworkflowbuttons_"))
+            .map(key => this.group.zComponents[key]);
+        // Reload workflow buttons
+        workflowButtons.forEach(button => {
+            button.loadButton();
+        });
+    }
     //#endregion
     // #region DEC
     loadContainerView(elementContainer, containerPage, data, group) {
@@ -3120,14 +3126,14 @@ class MainService {
         }
     }
 }
-MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i3.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i1$2.DialogService }, { token: i2.OAuth2Service }, { token: i2.SharePointService }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i3.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i1$2.DialogService }, { token: i2.OAuth2Service }, { token: i2.ToastService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Injectable });
 MainService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i3.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i1$2.DialogService }, { type: i2.OAuth2Service }, { type: i2.SharePointService }, { type: i2.ToastService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i3.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i1$2.DialogService }, { type: i2.OAuth2Service }, { type: i2.ToastService }, { type: i2.AuthService }]; } });
 function refreshGrid(group) {
     const zgridControl = group["gridOptions"];
     if (zgridControl) {
@@ -3188,16 +3194,7 @@ class ZGridBindingDirective extends DataBindingDirective {
                 }
                 return;
             }
-            const array = this.resourceURL.split("/api/");
-            if (!!array[1]) {
-                array[1] = "Page" + array[1];
-                this.paginationApiPostUrl = array.join("/api/");
-            }
-            else {
-                const arr = this.resourceURL.split("/");
-                arr[arr.length - 2] = "Page" + arr[arr.length - 2];
-                this.paginationApiPostUrl = arr.join("/");
-            }
+            this.setResourceUrl(this.resourceURL);
             this.setFilterParamsByParentRefId();
         }
         // this.gridSubject.next(this);
@@ -3218,6 +3215,18 @@ class ZGridBindingDirective extends DataBindingDirective {
             this.generateGridColumns();
         }
     }
+    setResourceUrl(resourceUrl) {
+        const array = resourceUrl.split("/api/");
+        if (!!array[1]) {
+            array[1] = "Page" + array[1];
+            this.paginationApiPostUrl = array.join("/api/");
+        }
+        else {
+            const arr = this.resourceURL.split("/");
+            arr[arr.length - 2] = "Page" + arr[arr.length - 2];
+            this.paginationApiPostUrl = arr.join("/");
+        }
+    }
     setFilterParamsByParentRefId() {
         // Use field own referenceId if available
         const refId = this.getFieldReferenceId() || this.grp.referenceId;
@@ -4460,7 +4469,7 @@ class UipageComponent {
                 this.setupRouteParams(routeParam);
             }
             else {
-                console.warn("Error in uipage init.");
+                console.warn("routeParam is undefined.");
             }
         }), switchMap(() => {
             const formType = isListForm ? FieldType.listField : FieldType.formField;
@@ -9161,7 +9170,7 @@ class ZgridComponent extends DataListingFieldBase {
                     gridCols.forEach(c => {
                         const isVisible = ZComponentHelper.isVisibleFormControl(this, c.field);
                         const isRequired = ZComponentHelper.isRequiredFormControl(this, c.field);
-                        const validators = ZComponentHelper.getValidators(c.field, isVisible, isRequired);
+                        const validators = ZComponentHelper.getValidators(c.field, isVisible, isRequired, this.group);
                         items[c.field] = new FormControl(d[c.field], validators);
                     });
                     const formGroup = new FormGroup(items);
@@ -10498,7 +10507,7 @@ class ZtabComponent extends ContainerFieldBase {
                     Label: field.Label,
                     Icon: field.Icon ? field.Icon : null,
                     Visible: ZComponentHelper.getGroupValue(field.Visible, this.group),
-                    Counter: typeof (field["Counter"]) === "string" ? ZComponentHelper.getGroupValue(field["Counter"], this.group) : field["Counter"],
+                    Counter: typeof (field.Counter) === "string" ? ZComponentHelper.getGroupValue(field.Counter, this.group) : field.Counter,
                     Index: ind++
                 });
             }
@@ -10558,7 +10567,7 @@ class ZtabComponent extends ContainerFieldBase {
                 }
             }
         }
-        let tabSelections = "tabSelections" in this.group ? this.group['tabSelections'] : null;
+        let tabSelections = ("tabSelections" in this.group ? this.group['tabSelections'] : null);
         if (tabSelections !== null && tabSelections.has(this.data.Name)) { // subsequent loads
             this.state.lastSelectedTabIndex = tabSelections.get(this.data.Name);
         }
@@ -11690,7 +11699,7 @@ class ZudfComponent extends ContainerFieldBase {
         this.toastService = toastService;
         this.componentErrorHandlerService = componentErrorHandlerService;
         this.cdr = cdr;
-        // formFields: any[]; // populate using field element. 
+        // formFields: any[]; // populate using field element.
         this.componentProperties = new ZComponentProperties();
         this.prefixValueOption = '_zudfmvgOptions';
         this.prefixDataSourceName = '_zudfmvgDataSource';
@@ -12050,7 +12059,7 @@ class ZudfComponent extends ContainerFieldBase {
                             });
                         }
                         // validator for the component
-                        const validators = ZComponentHelper.getValidators(field, isVisible, isRequired);
+                        const validators = ZComponentHelper.getValidators(field, isVisible, isRequired, this.group);
                         formControls[field.Value] = new FormControl(zudfGroup.zModel[field.Value], validators);
                         if (ZComponentHelper.hasCCField(field.Type)) {
                             const ccValidators = ZComponentHelper.getCCValidators(field, isVisible, isRequired);
@@ -12099,7 +12108,7 @@ class ZudfComponent extends ContainerFieldBase {
         const patchedModelData = this.addZModelPropertyPrefix(modelData);
         // Update the zModel values of the form group
         Object.assign(group[this.componentScopeName].zModel, patchedModelData);
-        // Update grid values for any arrays in the model data base on kcard component. 
+        // Update grid values for any arrays in the model data base on kcard component.
         for (const model in patchedModelData) {
             if (Array.isArray(patchedModelData[model])) {
                 const gridValue = `${model}${this.prefixValueOption}`;
@@ -12362,7 +12371,7 @@ class ZudfComponent extends ContainerFieldBase {
         });
         this.group[gridDataSourceName] = [];
         this.group[gridColumnFieldsName] = groupFieldElements;
-        // Create grid column based on field elements and insert them into the grid. 
+        // Create grid column based on field elements and insert them into the grid.
         this.group[`${name}${this.prefixCustomAddButtonOnClick}`] = this.captureContainerFieldValueToModel.bind(this, this.group, gridValueName, gridDataSourceName, containerName);
         this.group[`${name}${this.prefixCustomResetButtonOnClick}`] = this.clearContainerRelatedFieldValue.bind(this, this.group, containerName);
         this.group[`${name}${this.prefixCustomRemoveButtonOnClick}`] = this.removeGridRow.bind(this, gridValueName, gridDataSourceName);
@@ -13326,7 +13335,7 @@ class ZloopComponent extends ContainerFieldBase {
                 const isVisible = ZComponentHelper.isVisibleFormControl(this, field);
                 const isRequired = ZComponentHelper.isRequiredFormControl(this, field);
                 if (isFormControl === true) {
-                    const validators = ZComponentHelper.getValidators(field, isVisible, isRequired);
+                    const validators = ZComponentHelper.getValidators(field, isVisible, isRequired, this.group);
                     this.group.form.addControl(field.Value, new FormControl(this.group.zModel[field.Value], validators));
                     this.clonedFormControlList.push(field.Value);
                     if (ZComponentHelper.hasCCField(field.Type)) {
@@ -13355,10 +13364,10 @@ class KsplitterComponent extends ContainerFieldBase {
     }
 }
 KsplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KsplitterComponent, selector: "app-ksplitter", usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.TabItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2$4.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2$4.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "tabfilter": TabFilter } });
+KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KsplitterComponent, selector: "app-ksplitter", usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2$4.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2$4.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "tabfilter": TabFilter } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-ksplitter", template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.TabItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""] }]
+            args: [{ selector: "app-ksplitter", template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
 /********** Angular **********/
@@ -13369,7 +13378,7 @@ class VirtualScrollComponent extends ContainerFieldBase {
         super(componentService);
         this.pageSize = 50;
         this.pageFetched = [];
-        this.footerValue = [];
+        this.footerFields = [];
     }
     ngOnInit() {
         this.setData();
@@ -13474,15 +13483,15 @@ class VirtualScrollComponent extends ContainerFieldBase {
     }
     setupFooter() {
         if (this.data.Value && Array.isArray(this.data.Value)) {
-            this.footerValue = this.data.Value.filter(x => x.TabArea === 'footer');
+            this.footerFields = this.data.Value.filter(x => x.Section === 'footer');
         }
     }
 }
 VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VirtualScrollComponent, selector: "app-virtual-scroll", viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style1\"\r\n    class=\"virtual-scroll-viewport e1tag-container-style1\" [minBufferPx]=\"options.minBufferPx\"\r\n    [maxBufferPx]=\"options.maxBufferPx\">\r\n    <!-- <ng-container *cdkVirtualFor=\"let field of clonedFields\"> -->\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div [style.height.px]=\"options.itemSize\" [style.min-height.px]=\"options.itemSize\"\r\n        [style.max-height.px]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style2\"\r\n        class=\"e1tag-container-style2\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\">\r\n        <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n        <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n      </div>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerValue\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}\n"], components: [{ type: i2$b.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$b.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$b.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VirtualScrollComponent, selector: "app-virtual-scroll", viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style1\"\r\n    class=\"virtual-scroll-viewport e1tag-container-style1\" [minBufferPx]=\"options.minBufferPx\"\r\n    [maxBufferPx]=\"options.maxBufferPx\">\r\n    <!-- <ng-container *cdkVirtualFor=\"let field of clonedFields\"> -->\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div [style.height.px]=\"options.itemSize\" [style.min-height.px]=\"options.itemSize\"\r\n        [style.max-height.px]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style2\"\r\n        class=\"e1tag-container-style2\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\">\r\n        <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n        <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n      </div>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerFields\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}\n"], components: [{ type: i2$b.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$b.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$b.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VirtualScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-virtual-scroll", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style1\"\r\n    class=\"virtual-scroll-viewport e1tag-container-style1\" [minBufferPx]=\"options.minBufferPx\"\r\n    [maxBufferPx]=\"options.maxBufferPx\">\r\n    <!-- <ng-container *cdkVirtualFor=\"let field of clonedFields\"> -->\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div [style.height.px]=\"options.itemSize\" [style.min-height.px]=\"options.itemSize\"\r\n        [style.max-height.px]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style2\"\r\n        class=\"e1tag-container-style2\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\">\r\n        <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n        <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n      </div>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerValue\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}\n"] }]
+            args: [{ selector: "app-virtual-scroll", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style1\"\r\n    class=\"virtual-scroll-viewport e1tag-container-style1\" [minBufferPx]=\"options.minBufferPx\"\r\n    [maxBufferPx]=\"options.maxBufferPx\">\r\n    <!-- <ng-container *cdkVirtualFor=\"let field of clonedFields\"> -->\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div [style.height.px]=\"options.itemSize\" [style.min-height.px]=\"options.itemSize\"\r\n        [style.max-height.px]=\"options.itemSize\" [style]=\"componentProperties.containerStyle.style2\"\r\n        class=\"e1tag-container-style2\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\">\r\n        <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n        <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n      </div>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerFields\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { viewPort: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]