mmhglobal-dynamicform 2.15.3 → 2.16.0

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -7,7 +7,7 @@ import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@
 import { BehaviorSubject, forkJoin, of, tap as tap$1, map as map$1, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, first, auditTime } from 'rxjs';
 import { tap, switchMap, map, take, delay, concatMap, ignoreElements } from 'rxjs/operators';
 import * as i2 from 'mmhglobal-zcore';
-import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, DefaultMessage, DefaultDialogTitle, ActionType, Delimiter, ZSelectPostApiParams, ZComponentProperties, ComponentType as ComponentType$1, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
+import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ZComponentProperties, ComponentType as ComponentType$1, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
 import * as i2$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 import * as i3 from 'mmhglobal-zmodal';
@@ -18,7 +18,7 @@ import * as i8 from '@progress/kendo-angular-grid';
 import { DataBindingDirective, GridComponent, BaseFilterCellComponent, ExcelModule, GridModule } from '@progress/kendo-angular-grid';
 import * as i5 from '@angular/common';
 import { formatDate, CommonModule } from '@angular/common';
-import * as i2$b from '@angular/cdk/scrolling';
+import * as i3$b from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i4 from '@angular/forms';
 import { Validators, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -85,7 +85,7 @@ import 'brace/mode/json';
 import 'brace/mode/javascript';
 import 'brace/mode/html';
 import { process } from '@progress/kendo-data-query';
-import { trigger, transition, style, animate } from '@angular/animations';
+import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i3$7 from '@progress/kendo-angular-toolbar';
 import { MultiSelect, DropDownList } from '@syncfusion/ej2-dropdowns';
 import { createElement, getComponent } from '@syncfusion/ej2-base';
@@ -921,55 +921,7 @@ class MainService {
             }
             return of(false);
         }));
-        // const replySub = new Subject<boolean>();
-        // this.alertCtrl
-        //   .create({
-        //     header: "Data not save yet",
-        //     // subHeader: 'SubHeader statement here',
-        //     message: "Are you sure want to discard the changes?",
-        //     buttons: [
-        //       {
-        //         text: "Cancel",
-        //         role: "cancel",
-        //         cssClass: "secondary",
-        //         handler: () => {
-        //           replySub.next(false);
-        //         }
-        //       },
-        //       {
-        //         text: "Discard Changes",
-        //         cssClass: "warning",
-        //         handler: () => {
-        //           replySub.next(true);
-        //         }
-        //       }
-        //     ]
-        //   })
-        //   .then(alertElement => {
-        //     alertElement.present();
-        //   });
-        // return replySub.asObservable().pipe(take(1));
-    }
-    // async openModalForm(modalParams: ModalPageParams) {
-    //   // console.log("openModalForm");
-    //   console.error(
-    //     "Please use ModalService.show instead of MainService.openModalForm!"
-    //   );
-    //   // const modal = this.modalService.show(modalParams.colFields$ || modalParams.controllerName, modalParams.parentGroup,
-    //   //   modalParams.formHeader, modalParams.zModel, modalParams.referId);
-    //   const modal = await this.modalCtrl.create({
-    //     component: ZmodalPage,
-    //     backdropDismiss: true,
-    //     componentProps: {
-    //       modalParams,
-    //     },
-    //   });
-    //   modal.present();
-    //   return modal;
-    //   // .onWillDismiss((zmodel: any) => {
-    //   //   this.
-    //   // });
-    // }
+    }
     closeModalForm(group) {
         if (group && group.subject) {
             group.subject.next({
@@ -1107,8 +1059,9 @@ class MainService {
                 if (this.previousRouteParam) {
                     const paramSegment = this.previousRouteParam.split("/");
                     const actionSegment = paramSegment[paramSegment.length - 1];
-                    // If the last segment is 'new' or 'update', store the previous route param in session storage
-                    if (actionSegment === 'new' || actionSegment === 'edit' || actionSegment === 'update') {
+                    // If the last segment is 'new' or 'update', store the previous route param in session storage 
+                    const validActionTypes = [ActionType.New.toString(), ActionType.Edit.toString(), ActionType.Update.toString()];
+                    if (validActionTypes.includes(actionSegment)) {
                         this.storageService.set(this.PREVIOUS_PAGE_ROUTE_PARAM_STORAGE_KEY, JSON.stringify(this.previousRouteParam));
                     }
                 }
@@ -1336,11 +1289,11 @@ class MainService {
             //const lastSegment = pathSegment[pathSegment.length - 1];
             const currentNavigationParam = this.getNavigationCurrentParam();
             const navigationSegments = currentNavigationParam ? currentNavigationParam.split('/') : null;
-            const defaultAction = group.isCloneNew ? 'new' : 'edit';
-            const actionSegment = group.isCloneNew ? (navigationSegments ? navigationSegments[navigationSegments.length - 1] : 'new') : defaultAction;
+            const defaultAction = group.isCloneNew ? ActionType.New : ActionType.Edit;
+            const actionSegment = group.isCloneNew ? (navigationSegments ? navigationSegments[navigationSegments.length - 1] : ActionType.New) : defaultAction;
             if (group.isListForm) {
                 this.tryUpdateGroupTrigger(false);
-                this.setNavigationParams([referenceId, 'new']);
+                this.setNavigationParams([referenceId, ActionType.New.toString()]);
                 this.router.navigate([group.editModelURL], {
                     relativeTo: group.ctrlScope.activatedRoute,
                 });
@@ -1354,7 +1307,7 @@ class MainService {
                 // Scenario 6: From List open record(action: edit), isCloneNew, Save, Click New ==> Clear form (When UpdateModel, need change isCloneNew = false)
                 // Scenario 7: From List open record(action: edit), Click New ==> Clear form
                 // Scenario 8: From List open record(action: edit), Click New, Save, isCloneNew ==> DONT Clear form
-                if (actionSegment === "edit" || actionSegment === "new") {
+                if (actionSegment === ActionType.Edit || actionSegment === ActionType.New) {
                     if (!group.isCloneNew) {
                         group.zModel = {};
                         group.form.reset();
@@ -1363,14 +1316,14 @@ class MainService {
                             this.reloadWorkflowButton(group, event.data.zButtonName);
                         }
                     }
-                    if (actionSegment === "edit") {
+                    if (actionSegment === ActionType.Edit) {
                         // clear cloneNewModel cache(if have)
                         if (this.cacheService.getCache(this.CLONE_NEW_MODEL_CACHE_KEY)) {
                             this.cacheService.clearCache(this.CLONE_NEW_MODEL_CACHE_KEY);
                         }
                         //this.setNavigationParams([referenceId, 'new']);
                         this.removeLastRouteParam();
-                        this.setRouteParam([referenceId, 'new']);
+                        this.setRouteParam([referenceId, ActionType.New.toString()]);
                         group.zModel[group.parentReferenceField] = referenceId;
                     }
                     group.isEdit = false;
@@ -1379,7 +1332,7 @@ class MainService {
                 }
                 else {
                     this.tryUpdateGroupTrigger(false);
-                    this.setNavigationParams([referenceId, 'new']);
+                    this.setNavigationParams([referenceId, ActionType.New.toString()]);
                     this.router.navigate([group.editModelURL], {
                         relativeTo: group.ctrlScope.activatedRoute,
                     });
@@ -1395,10 +1348,10 @@ class MainService {
     }
     createModel(event, group) {
         const fg = group.form;
-        const resMessage = group.SuccessCreatedMessage || "Record is created successfully.";
+        const resMessage = group.SuccessCreatedMessage || DefaultMessage.recordCreated;
         let createModelres = null;
         if (!fg.dirty) {
-            console.warn("Form is not dirty hence record is not save.");
+            console.warn(DefaultMessage.notDirtyMessage);
             return;
         }
         if (!fg.valid) {
@@ -1453,7 +1406,7 @@ class MainService {
     }
     updateModelObservable(event, group, form = null, updateAPIObservable = null, isSkipDirty = false) {
         const fg = form || group.form;
-        const resMessage = group.SuccessUpdatedMessage || "Record is updated successfully.";
+        const resMessage = group.SuccessUpdatedMessage || DefaultMessage.recordUpdated;
         let updateModelres = null;
         if (!this.isFormDirtyAndValid(fg, group, isSkipDirty, event)) {
             if (isSkipDirty) {
@@ -1461,7 +1414,7 @@ class MainService {
             }
             return of(false);
         }
-        updateAPIObservable = updateAPIObservable || this.webApiService.httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel, false).pipe(tap((res) => {
+        updateAPIObservable = updateAPIObservable || this.webApiService.httpPut$(`${group.resourceURL}/${group.zModel.Id}`, group.zModel, false).pipe(tap((res) => {
             this.handleSuccess(res, resMessage);
         }
         //this.handleSuccess(res, "Record is updated successfully.")
@@ -1535,14 +1488,14 @@ class MainService {
     }
     deleteModel(event, group) {
         const fg = group.form;
-        const resMessage = group.SuccessDeletedMessage || "Record is deleted successfully.";
+        const resMessage = group.SuccessDeletedMessage || DefaultMessage.recordDeleted;
         of(group.zModel)
             .pipe(switchMap((zmodel) => {
             console.log("Before delete, zModel:", zmodel);
             return this.beforeDeleteModel(group);
         }), switchMap(() => {
             group.isTriggered = false;
-            return this.alertService.show("Delete Record", "Are you sure?", [
+            return this.alertService.show("Delete Record", DefaultMessage.confirmation, [
                 { text: "No", cssClass: "secondary" },
                 { text: "Yes", cssClass: "primary" }
             ]);
@@ -1608,7 +1561,7 @@ class MainService {
     }
     isFormDirtyAndValid(fg, group, isSkipDirty = false, event) {
         if (!isSkipDirty && !fg.dirty) {
-            console.warn("Form is not dirty hence record is not save.");
+            console.warn(DefaultMessage.notDirtyMessage);
             const message = event && event.data && event.data[`FormNotDirtyMessage`] ? event.data[`FormNotDirtyMessage`] : DefaultMessage.notDirtyMessage;
             this.alertService.showOkay(DefaultDialogTitle.nothingToUpdate, message, ["col-5"]);
             return false;
@@ -1813,7 +1766,7 @@ class MainService {
         }
     }
     handleSignalRModificationAlert(formId) {
-        if (this.signalrService.signalREnabled()) {
+        if (this.signalrService.signalREnabled() && this.environment.enableFormPageModificationAlert) {
             const eventName = `${window.location.href}`.replace(/([^:]\/)\/+/g, "$1");
             if (!this.group.signalRCallbackHandler) {
                 this.group.signalRCallbackHandler = {};
@@ -1823,7 +1776,7 @@ class MainService {
             this.signalrService.subscribeToEvent(this.group, `${eventName}`, `group.signalRCallbackHandler.alertFormModified`);
         }
         else {
-            console.warn('signalR not enabled.');
+            console.warn('enableFormPageModificationAlert not enabled.');
         }
     }
     alertFormModified(formId, group, resp, eventName) {
@@ -6677,6 +6630,33 @@ const hideAndShowVerticalAnimation = trigger('hideAndShowAnimation', [
         style({ transform: 'translateY(0)', opacity: 1, height: 100 }),
         animate('300ms ease-in', style({ transform: 'translateY(-20%)', opacity: 0, height: 0 }))
     ])
+]);
+const rotateAnimation = trigger('rotateAnimation', [
+    state('default', style({
+        transform: 'rotate(0deg)'
+    })),
+    state('rotate', style({
+        transform: 'rotate(' + '{{degree}}' + 'deg)'
+    }), { params: { degree: 90 } }),
+    transition('* => *', [
+        animate('{{duration}}')
+    ], { params: { duration: '0.2s' } }),
+]);
+const collapseAnimation = trigger('collapseAnimation', [
+    state('default', style({
+        transform: 'translateY(0)', opacity: 1, display: 'block'
+    })),
+    state('collapse', style({
+        transform: 'translateY(' + '{{height}}' + ')',
+        opacity: 0,
+        display: 'none'
+    }), { params: { height: '-10%' } }),
+    transition('* => collapse', [
+        animate('{{duration}}')
+    ], { params: { duration: '0.2s' } }),
+    transition('* => default', [
+        animate('{{duration}}')
+    ], { params: { duration: '0.2s' } })
 ]);
 
 /********** Angular **********/
@@ -7138,9 +7118,7 @@ class ZselectmultipleComponent extends InputFieldBase {
                 getzDataForzModel$.subscribe((zdata) => {
                     console.log(data.Name, ' - initial zData load: ', zdata);
                     if (this.group) {
-                        if (this.group.afterLoadzDataOptions) {
-                            this.group.afterLoadzDataOptions(this.group);
-                        }
+                        this.afterLoadzDataOptions();
                     }
                     this.isLoading = false;
                 });
@@ -7162,9 +7140,7 @@ class ZselectmultipleComponent extends InputFieldBase {
                         this.autoSelectFirstOption(isRequired, optionData[0], fieldValue, zModel.Id);
                     }
                     if (this.group) {
-                        if (this.group.afterLoadzDataOptions) {
-                            this.group.afterLoadzDataOptions(this.group);
-                        }
+                        this.afterLoadzDataOptions();
                     }
                     this.isLoading = false;
                 });
@@ -7181,9 +7157,7 @@ class ZselectmultipleComponent extends InputFieldBase {
                         setTimeout(function () {
                             thisComponent.autoSelectFirstOption(isRequired, optionData[0], fieldValue, thisComponent.group.zModel.Id);
                             if (this.group) {
-                                if (this.group.afterLoadzDataOptions) {
-                                    this.group.afterLoadzDataOptions(this.group);
-                                }
+                                this.afterLoadzDataOptions();
                             }
                         }, 100);
                     }
@@ -7314,7 +7288,7 @@ class ZselectmultipleComponent extends InputFieldBase {
             this.onSearch({ component: null, text: value });
             if (this.group) {
                 if (this.group.afterLoadzDataOptions) {
-                    this.group.afterLoadzDataOptions(this.group);
+                    this.group.afterLoadzDataOptions(this.group, this.data);
                 }
             }
         });
@@ -7331,9 +7305,7 @@ class ZselectmultipleComponent extends InputFieldBase {
             .subscribe(() => {
             this.onSearch({ component: null, text: value });
             if (this.group) {
-                if (this.group.afterLoadzDataOptions) {
-                    this.group.afterLoadzDataOptions(this.group);
-                }
+                this.afterLoadzDataOptions();
             }
             this.isLoading = false;
         });
@@ -7557,6 +7529,12 @@ class ZselectmultipleComponent extends InputFieldBase {
             }
         }
     }
+    afterLoadzDataOptions() {
+        if (this.group.afterLoadzDataOptions) {
+            console.log("group.afterLoadzDataOptions triggered." + this.data);
+            this.group.afterLoadzDataOptions(this.group, this.data);
+        }
+    }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
 ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$5.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$2.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$5.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$5.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$5.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$5.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5.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: i6$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$2.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$2.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
@@ -8883,7 +8861,6 @@ class ZgridComponent extends DataListingFieldBase {
                 console.warn('Invalid/Empty grid(' + this.data.Name + ') data to generate column');
             }
             else {
-                const fieldName = this.data['FieldElementName'];
                 this.columns = [];
                 const generateHiddenColumns = [];
                 ZComponentHelper.getGridColumns({
@@ -9151,6 +9128,9 @@ class ZgridComponent extends DataListingFieldBase {
             this.inlineEditedFormGroups = {};
             this.zgrid.getDataBinding();
         }
+        else {
+            console.warn('this.zgrid is undefined.');
+        }
     }
     getGridData() {
         return this.isUseLocalData() ? (this.zgrid.data || this.zgrid.originalData) : (this.zgrid.grid.data && this.zgrid.grid.data.data ? this.zgrid.grid.data.data : []);
@@ -11492,10 +11472,10 @@ class ZtreeComponent extends DataListingFieldBase {
     }
 }
 ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$9.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$9.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$9.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$9.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$9.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$9.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5.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$9.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$9.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$9.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$9.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$9.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$9.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$9.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$9.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$9.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5.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$9.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$9.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$9.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"] }]
+            args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { nodetemplate: [{
                 type: ViewChild,
                 args: ["nodetemplate", { static: true }]
@@ -13852,14 +13832,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 // Approach 1: Total Count is known, get next page upon scroll. (Will only have multiple pages / pageable)
 // Approach 2: Total Count is not known, append more data at runtime. (Will only have 1 page / not pageable)
 class VirtualScrollComponent extends ContainerFieldBase {
-    constructor(componentService) {
+    constructor(componentService, fontAweSomeService) {
         super(componentService);
+        this.fontAweSomeService = fontAweSomeService;
+        this.collapsedGroupBy = []; // Used to define animation status
+        this.groupByValueToExpand = ''; // Used to define animation status
+        this.collapsedGroupBy_FirstNodeIndexList = new Array(); // When collapse, need to retain the first node in the list so that the group by title will not be hidden
+        this.fullDataItems = [];
+        this.dataItems = [];
         this.pageSize = 50;
         this.pageFetched = [];
         this.footerFields = [];
     }
     ngOnInit() {
-        this.setData();
+        this.setupComponent();
+        this.setupDataItems();
         this.setupFooter();
         super.initComponent().subscribe();
     }
@@ -13874,7 +13861,8 @@ class VirtualScrollComponent extends ContainerFieldBase {
             this.viewPort.scrollToIndex(0);
         }
     }
-    setData() {
+    setupComponent() {
+        this.collapsedGroupBy = [];
         if (this.data.Options) {
             if (typeof this.data.Options === 'string' && this.data.Options.startsWith('group.')) {
                 this.options = ZComponentHelper.getGroupValue(this.data.Options, this.group);
@@ -13884,36 +13872,49 @@ class VirtualScrollComponent extends ContainerFieldBase {
             }
             this.pageSize = this.options.pageSize || 50;
             this.options.loadingLabel = this.options.loadingLabel || '<div>Loading</div>';
-            this.setupDataItems();
         }
     }
     appendData(dataItems) {
-        this.dataItems = this.dataItems.concat(dataItems);
-        this.options.totalCount = this.dataItems.length;
-        this.pageSize = this.dataItems.length;
+        // this.dataItems = this.dataItems.concat(dataItems);
+        // this.pageSize = this.dataItems.length;
+        this.fullDataItems = this.fullDataItems.concat(dataItems);
+        this.pageSize = this.fullDataItems.length;
+        this.computeDataItems();
     }
     setupDataItems() {
         this.pageFetched = [];
-        if (this.options.dataItems) { // init: 50, pagesize: 20
-            if (Array.isArray(this.options.dataItems) && this.options.dataItems.length > 0) {
-                const cnt = this.options.totalCount - this.options.dataItems.length;
-                if (cnt < 0) {
-                    console.error('DataItems cannot be more than total count.');
-                    return;
-                }
-                this.dataItems = this.options.dataItems.concat(Array(cnt).fill(false));
-                const pageNoToMarkAsFetch = Math.ceil(this.options.dataItems.length / this.pageSize) - 1;
-                for (let i = 0; i <= pageNoToMarkAsFetch; i++) {
-                    this.pageFetched.push(i);
-                }
+        if (this.data.DataSetResult) {
+            let dataSetResult = this.data.DataSetResult;
+            if (typeof dataSetResult == 'string' && dataSetResult.startsWith('group.')) {
+                dataSetResult = ZComponentHelper.getGroupValue(dataSetResult, this.group);
             }
-            else {
-                this.dataItems = Array(this.options.totalCount).fill(false);
+            this.setData(dataSetResult);
+        }
+        else {
+            this.dataItems = [];
+        }
+    }
+    setData(dataSetResult) {
+        if (dataSetResult.dataSet && Array.isArray(dataSetResult.dataSet) && dataSetResult.dataSet.length > 0) {
+            const cnt = dataSetResult.totalCount - dataSetResult.dataSet.length;
+            if (cnt < 0) {
+                console.error('DataItems cannot be more than total count.');
+                return;
             }
+            this.dataItems = dataSetResult.dataSet.concat(Array(cnt).fill(false));
+            const pageNoToMarkAsFetch = Math.ceil(dataSetResult.dataSet.length / this.pageSize) - 1;
+            for (let i = 0; i <= pageNoToMarkAsFetch; i++) {
+                this.pageFetched.push(i);
+            }
+        }
+        else if (dataSetResult.totalCount) {
+            this.dataItems = Array(dataSetResult.totalCount).fill(false);
         }
         else {
-            this.dataItems = Array(this.options.totalCount).fill(false);
+            this.dataItems = [];
         }
+        this.fullDataItems = this.dataItems;
+        this.computeDataItems();
     }
     populateListData() {
         const renderRange = this.viewPort.getRenderedRange();
@@ -13942,8 +13943,8 @@ class VirtualScrollComponent extends ContainerFieldBase {
         }
     }
     fetchData(pageNo) {
-        if (this.data['OnScroll'] && typeof this.data['OnScroll'] == 'string' && this.data['OnScroll'].startsWith('group.')) {
-            const onScrollEvent = ZComponentHelper.getGroupEvalValue.call(this, this.data['OnScroll']);
+        if (this.data.OnScroll && typeof this.data.OnScroll == 'string' && this.data.OnScroll.startsWith('group.')) {
+            const onScrollEvent = ZComponentHelper.getGroupEvalValue.call(this, this.data.OnScroll);
             if (typeof onScrollEvent === 'function') {
                 const callFunc = onScrollEvent.bind(this.group.ctrlScope);
                 return callFunc(this.group, { pageNo: pageNo, pageSize: this.pageSize });
@@ -13964,13 +13965,72 @@ class VirtualScrollComponent extends ContainerFieldBase {
             this.footerFields = this.data.Value.filter(x => x.Section === 'footer');
         }
     }
+    //#region Group By
+    getGroupByLabelTemplate(dataItem, options) {
+        if (options.groupByLabelTemplate && typeof options.groupByLabelTemplate == 'string') {
+            if (options.groupByLabelTemplate.startsWith('group.')) {
+                const getTemplateFunc = ZComponentHelper.getGroupEvalValue.call(this, options.groupByLabelTemplate);
+                if (getTemplateFunc) {
+                    return getTemplateFunc({
+                        dataItem,
+                        options,
+                    });
+                }
+            }
+            else {
+                return dataItem[options.groupByLabelTemplate];
+            }
+        }
+    }
+    groupByOnClick(groupByValue) {
+        if (!this.options.isGroupByCollapsible) {
+            return;
+        }
+        // use collapse / expand to control animation sequence
+        const isToCollapse = !this.collapsedGroupBy.includes(groupByValue);
+        const firstNodeIndex = this.fullDataItems.map(x => x[this.options.groupBy]).indexOf(groupByValue);
+        if (isToCollapse) {
+            // to collapse (For animation: Change status, then append data)
+            this.collapsedGroupBy.push(groupByValue);
+            this.collapsedGroupBy_FirstNodeIndexList.push(firstNodeIndex);
+            of({}).pipe(delay$1(400), tap$1(() => this.computeDataItems())).subscribe();
+        }
+        else {
+            // to expand (For animation: Append data, then change status)
+            this.collapsedGroupBy_FirstNodeIndexList = this.collapsedGroupBy_FirstNodeIndexList.filter(x => x != firstNodeIndex);
+            const tempCollapsedGroupBy = this.collapsedGroupBy.filter(x => x !== groupByValue);
+            this.dataItems = this.fullDataItems.filter((x, index) => !tempCollapsedGroupBy.includes(x[this.options.groupBy]) || this.collapsedGroupBy_FirstNodeIndexList.includes(index));
+            this.groupByValueToExpand = groupByValue;
+            of({}).pipe(delay$1(0), tap$1(() => {
+                this.collapsedGroupBy = tempCollapsedGroupBy;
+                this.groupByValueToExpand = groupByValue;
+            })).subscribe();
+        }
+    }
+    computeDataItems() {
+        this.dataItems = this.fullDataItems.filter((x, index) => !this.collapsedGroupBy.includes(x[this.options.groupBy]) || this.collapsedGroupBy_FirstNodeIndexList.includes(index));
+    }
+    expandAll() {
+        this.collapsedGroupBy = [];
+        this.computeDataItems();
+    }
+    expandByGroupByValues(groupByValue) {
+        this.collapsedGroupBy = this.collapsedGroupBy.filter(x => !groupByValue.includes(x));
+        this.computeDataItems();
+    }
 }
-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 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], 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 class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n        *ngIf=\"options.groupBy && (!dataItems[i-1] || dataItem[options.groupBy] !== dataItems[i-1][options.groupBy])\"\r\n        (click)=\"groupByOnClick(dataItem[options.groupBy])\" [class.groupby-collapsible]=\"options.isGroupByCollapsible\">\r\n        <fa-icon class=\"virtual-scroll-groupby-arrow-icon e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" *ngIf=\"!!options.isGroupByCollapsible\"\r\n          [icon]=\"getFontAwesome('caret-down', fontAweSomeService)\"\r\n          [@rotateAnimation]=\"{value: collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'rotate' : 'default', params: {degree: -90}}\">\r\n        </fa-icon>\r\n        <span class=\"virtual-scroll-groupby-label e1tag-container-style6\"\r\n          [style]=\"componentProperties.containerStyle.style6\">\r\n          {{options.groupByLabelTemplate ? getGroupByLabelTemplate(dataItem, options) : dataItem[options.groupBy]}}\r\n        </span>\r\n      </div>\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 virtual-scroll-dataitem\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n        [@collapseAnimation]=\"{value: !!options.groupBy && collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'collapse' : 'default'}\"\r\n        [class.groupby-value-expand]=\"groupByValueToExpand == (dataItem[options.groupBy])\">\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}.virtual-scroll-viewport .virtual-scroll-groupby{background:rgba(var(--ion-color-secondary-rgb),.1);font-weight:500;padding:12px 0 4px 12px;margin:1px}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible{cursor:pointer;display:grid;grid-template-columns:20px auto}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible:hover{background:rgba(var(--ion-color-secondary-rgb),.05)}.virtual-scroll-viewport .virtual-scroll-groupby>.virtual-scroll-groupby-arrow-icon{width:-moz-fit-content;width:fit-content}.virtual-scroll-viewport .virtual-scroll-dataitem.groupby-value-expand{transform:translateY(-10%);opacity:.2}\n"], components: [{ type: i3$b.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i5$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: i3$b.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$b.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe }, animations: [
+        collapseAnimation,
+        rotateAnimation
+    ] });
 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 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: [{
+            args: [{ selector: "app-virtual-scroll", animations: [
+                        collapseAnimation,
+                        rotateAnimation
+                    ], 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 class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n        *ngIf=\"options.groupBy && (!dataItems[i-1] || dataItem[options.groupBy] !== dataItems[i-1][options.groupBy])\"\r\n        (click)=\"groupByOnClick(dataItem[options.groupBy])\" [class.groupby-collapsible]=\"options.isGroupByCollapsible\">\r\n        <fa-icon class=\"virtual-scroll-groupby-arrow-icon e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" *ngIf=\"!!options.isGroupByCollapsible\"\r\n          [icon]=\"getFontAwesome('caret-down', fontAweSomeService)\"\r\n          [@rotateAnimation]=\"{value: collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'rotate' : 'default', params: {degree: -90}}\">\r\n        </fa-icon>\r\n        <span class=\"virtual-scroll-groupby-label e1tag-container-style6\"\r\n          [style]=\"componentProperties.containerStyle.style6\">\r\n          {{options.groupByLabelTemplate ? getGroupByLabelTemplate(dataItem, options) : dataItem[options.groupBy]}}\r\n        </span>\r\n      </div>\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 virtual-scroll-dataitem\" (click)=\"onClick($event, dataItem)\"\r\n        [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n        [@collapseAnimation]=\"{value: !!options.groupBy && collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'collapse' : 'default'}\"\r\n        [class.groupby-value-expand]=\"groupByValueToExpand == (dataItem[options.groupBy])\">\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}.virtual-scroll-viewport .virtual-scroll-groupby{background:rgba(var(--ion-color-secondary-rgb),.1);font-weight:500;padding:12px 0 4px 12px;margin:1px}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible{cursor:pointer;display:grid;grid-template-columns:20px auto}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible:hover{background:rgba(var(--ion-color-secondary-rgb),.05)}.virtual-scroll-viewport .virtual-scroll-groupby>.virtual-scroll-groupby-arrow-icon{width:-moz-fit-content;width:fit-content}.virtual-scroll-viewport .virtual-scroll-dataitem.groupby-value-expand{transform:translateY(-10%);opacity:.2}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }]; }, propDecorators: { viewPort: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
             }] } });