mmhglobal-dynamicform 2.32.2 → 2.33.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -3,10 +3,10 @@ import { Injectable, Directive, Inject, Input, HostListener, Pipe, Component, Vi
 import { HttpParams, HttpEventType } from '@angular/common/http';
 import * as i1 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
-import { BehaviorSubject, of, forkJoin, tap as tap$1, map as map$1, first, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, auditTime } from 'rxjs';
-import { tap, switchMap, map, take, delay, concatMap, ignoreElements } from 'rxjs/operators';
+import { BehaviorSubject, forkJoin, of, tap as tap$1, map as map$1, first, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, auditTime } from 'rxjs';
+import { tap, switchMap, map, take, delay, concatMap, mergeMap, catchError, ignoreElements } from 'rxjs/operators';
 import * as i2 from 'mmhglobal-zcore';
-import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, TriggerFromType, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
+import { ZGroup, FormType, ZComponentHelper, AssetsRoutes, AssetsFolder, AssetsAllowedExtension, MESSAGETYPE, TriggerFromType, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, 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';
@@ -90,6 +90,7 @@ import 'brace/mode/javascript';
 import 'brace/mode/html';
 import { process } from '@progress/kendo-data-query';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import { event as event$1 } from 'jquery';
 import * as i3$8 from '@progress/kendo-angular-toolbar';
 import { MultiSelect, DropDownList } from '@syncfusion/ej2-dropdowns';
 import { createElement, getComponent } from '@syncfusion/ej2-base';
@@ -179,9 +180,6 @@ class ZComponentDebugService {
         }
         me.subscription = d.subject.subscribe((event) => this.subjectEvent(event, d, this));
         this.patchFieldsProperty(fieldElements);
-        if (this.environment.loadViaAsset) {
-            return of({});
-        }
         return this.loadDebugZModel(me);
     }
     patchFieldsProperty(fieldElements) {
@@ -193,31 +191,28 @@ class ZComponentDebugService {
         });
     }
     loadDebugZModel(me) {
-        const downloadList = [];
-        downloadList.push(this.getProjectId());
+        const projectId$ = this.getProjectId();
         const formType = me.group.isListForm ? FormType.listField : FormType.formField;
-        const fieldName = me.group.fieldName;
-        const fieldzModel = this.getFieldzModel(formType, fieldName);
-        downloadList.push(fieldzModel);
-        return forkJoin(downloadList);
+        const fieldElementFormName = me.group.fieldName;
+        const fieldzModel$ = this.getFieldzModel(formType, fieldElementFormName);
+        return forkJoin([projectId$, fieldzModel$]); // Emits when all observables complete
     }
     getProjectId() {
         const debuggerGroup = this.debug;
         const url = this.resourceApiService.getURL('projectsURL');
         return this.webApiService.getApi(url, {}, debuggerGroup.zData, 'ProjectOptions', null, debuggerGroup, false);
     }
-    getFieldzModel(type, activityName) {
-        if (type === 'FormField') {
-            return this.getFormFieldzModel(activityName);
-        }
-        else {
-            return this.getListFieldzModel(activityName);
+    getFieldzModel(type, fieldElementFormName) {
+        const isFormField = type === 'FormField';
+        if (this.environment.loadViaAsset) {
+            return isFormField ? this.getAssetFormFieldzModel(fieldElementFormName) : this.getAssetListFieldzModel(fieldElementFormName);
         }
+        return isFormField ? this.getFormFieldzModel(fieldElementFormName) : this.getListFieldzModel(fieldElementFormName);
     }
-    getFormFieldzModel(activityName) {
+    getFormFieldzModel(fieldElementFormName) {
         const debuggerGroup = this.debug;
         const fieldUrl = this.resourceApiService.getURL('field');
-        return this.webApiService.httpGet$(fieldUrl, { name: activityName, type: 'FormField' }).pipe(tap((respData) => {
+        return this.webApiService.httpGet$(fieldUrl, { name: fieldElementFormName, type: FormType.formField }).pipe(tap((respData) => {
             // console.log('respData: ', respData);
             Object.assign(debuggerGroup.zModel, respData);
             debuggerGroup.form.patchValue(debuggerGroup.zModel);
@@ -228,11 +223,11 @@ class ZComponentDebugService {
             });
         }));
     }
-    getListFieldzModel(activityName) {
+    getListFieldzModel(fieldElementFormName) {
         const debuggerGroup = this.debug;
         const fieldsMappingUrl = this.resourceApiService.getURL('fieldsMapping');
         const fieldUrl = this.resourceApiService.getURL('field');
-        return this.webApiService.httpGet$(fieldsMappingUrl, { name: activityName }).pipe(switchMap((fieldMapping) => {
+        return this.webApiService.httpGet$(fieldsMappingUrl, { name: fieldElementFormName }).pipe(switchMap((fieldMapping) => {
             // Fetch field data based on FieldElementMasterId
             return this.webApiService.httpGet$(fieldUrl, { id: fieldMapping.FieldElementMasterId });
         }), tap((respData) => {
@@ -252,6 +247,71 @@ class ZComponentDebugService {
             }
         }));
     }
+    getAssetFormFieldzModel(fieldElementFormName) {
+        const debuggerGroup = this.debug;
+        const param = {
+            assetsRoute: AssetsRoutes.fields,
+            assetsFolder: AssetsFolder.fieldelement,
+            extension: AssetsAllowedExtension.json,
+            params: new HttpParams()
+                .set('name', fieldElementFormName)
+                .set('type', FormType.formField)
+        };
+        return this.webApiService.assetsHttpNodeGet(param).pipe(tap((respData) => {
+            Object.assign(debuggerGroup.zModel, respData);
+            debuggerGroup.form.patchValue(debuggerGroup.zModel);
+            debuggerGroup.form.markAsPristine();
+            if (!ZComponentHelper.isJson(debuggerGroup.zModel.Code)) {
+                Object.assign(debuggerGroup, {
+                    treeModel: ZComponentHelper.convertTreeModel(JSON.parse(debuggerGroup.zModel.Code))
+                });
+            }
+            else {
+                Object.assign(debuggerGroup, {
+                    treeModel: ZComponentHelper.convertTreeModel(debuggerGroup.zModel.Code)
+                });
+            }
+        }));
+    }
+    getAssetListFieldzModel(fieldElementFormName) {
+        const debuggerGroup = this.debug;
+        const listParam = {
+            assetsRoute: AssetsRoutes.fieldElementMappings,
+            assetsFolder: AssetsFolder.listfieldmapping,
+            extension: AssetsAllowedExtension.json,
+            params: new HttpParams().set('name', fieldElementFormName)
+        };
+        return this.webApiService.assetsHttpNodeGet(listParam).pipe(switchMap((fieldMapping) => {
+            const formParam = {
+                assetsRoute: AssetsRoutes.fields,
+                assetsFolder: AssetsFolder.fieldelement,
+                extension: AssetsAllowedExtension.json,
+                params: new HttpParams()
+                    .set('name', fieldMapping.FieldElementMasterName)
+                    .set('type', FormType.listField)
+            };
+            // Fetch field data based on FieldElementMasterId
+            return this.webApiService.assetsHttpNodeGet(formParam);
+        }), tap((respData) => {
+            // Update debuggerGroup with field data
+            Object.assign(debuggerGroup.zModel, respData);
+            debuggerGroup.form.patchValue(debuggerGroup.zModel);
+            debuggerGroup.form.markAsPristine();
+            // Parse and convert Code to treeModel
+            try {
+                let fields = debuggerGroup.zModel.Code;
+                if (typeof debuggerGroup.zModel.Code === 'string') {
+                    fields = JSON.parse(typeof debuggerGroup.zModel.Code);
+                }
+                Object.assign(debuggerGroup, {
+                    treeModel: ZComponentHelper.convertTreeModel(fields)
+                });
+            }
+            catch (error) {
+                console.error('Error parsing JSON:', error);
+            }
+        }));
+    }
     subjectEvent(event, group, me) {
         if (!event || !event.target || event.target.startsWith("modalGroup.")) {
             return;
@@ -444,7 +504,7 @@ class ZComponentDebugService {
             nodeModel: JSON.stringify(dataItem, null, 2)
         };
         this.showzModal({
-            fieldElementName: 'mvEditFieldNodeForm',
+            fieldElementName: 'ionmvEditFieldNodeForm',
             parentGroup: this.debug._group,
             zModel: zmodel,
             formHeader: 'Field Element Info'
@@ -557,7 +617,7 @@ class ZComponentDebugService {
             nodeModel: JSON.stringify(initialModel, null, 2)
         };
         this.showzModal({
-            fieldElementName: 'mvEditFieldNodeForm',
+            fieldElementName: 'ionmvEditFieldNodeForm',
             parentGroup: this.debug._group,
             zModel: zmodel,
             formHeader: 'Add Field Element Item'
@@ -618,8 +678,17 @@ class ZComponentDebugService {
         tap(() => {
             Object.assign(debug.zModel, fg.value);
         }), switchMap(() => {
-            return this.webApiService.httpPut$(debug.resourceURL + "/" + debug.zModel.Id, debug.zModel)
-                .pipe(map(res => this.handleSuccess(res, "Record is updated successfully.")), map(res => this.signalrService.sendToClientGroup(this.groupsToSend, this.eventName, debug.zModel)));
+            if (this.environment.loadViaAsset) {
+                const payload = typeof debug.zModel === 'string' ? JSON.parse(debug.zModel) : debug.zModel;
+                const param = {
+                    id: debug.zModel.Id,
+                    assetsRoute: AssetsRoutes.fields,
+                    assetsFolder: AssetsFolder.fieldelement,
+                    params: payload
+                };
+                return this.webApiService.assetsHttpNodePut(param).pipe(map(res => this.handleSuccess(res, "Record is updated successfully.")), map(res => this.signalrService.sendToClientGroup(this.groupsToSend, this.eventName, debug.zModel)));
+            }
+            return this.webApiService.httpPut$(`${debug.resourceURL}/"${debug.zModel.Id}`, debug.zModel).pipe(map(res => this.handleSuccess(res, "Record is updated successfully.")), map(res => this.signalrService.sendToClientGroup(this.groupsToSend, this.eventName, debug.zModel)));
         }), switchMap((zmodel) => {
             console.log("After updating Debug Form, zModel:", zmodel);
             if (zmodel && zmodel.Data) {
@@ -853,10 +922,10 @@ class MainService {
             Timestamp: timestamp,
             Duration: duration ?? null,
             RequestMethod: 'POST',
-            UserId: this.authService.userId,
-            UserName: this.authService.e1Token.userName,
+            UserName: this.authService.userId,
+            UserId: this.authService.e1Token.userName,
             Success: isSuccess,
-            Environment: null,
+            Environment: 'UI',
             ProjectCode: this.environment.projectCodes[0],
             SourceName: this.environment.projectCodes[0],
             ComponentCode: null,
@@ -5020,11 +5089,11 @@ class ZformComponent {
         }
     }
     getGroup() {
-        if (this.fieldName !== 'debugV2') {
-            return this.group;
+        if (this.fieldName === 'debugV2') {
+            return this.group._debug;
         }
         else {
-            return this.group._debug;
+            return this.group;
         }
     }
     onInitNormal() {
@@ -7335,25 +7404,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 /********** Angular **********/
 class ZselectmultipleComponent extends InputFieldBase {
-    constructor(componentService, resourceApiService, webApiService, cacheService, fieldService) {
+    constructor(componentService, resourceApiService, cdr, webApiService, cacheService, fieldService) {
         super(componentService);
         this.componentService = componentService;
         this.resourceApiService = resourceApiService;
+        this.cdr = cdr;
         this.webApiService = webApiService;
         this.cacheService = cacheService;
         this.fieldService = fieldService;
         this.allDataItems = [];
         this.items = [];
         this.infinitezData = [];
-        this.infiniteSearchText = null;
-        // subscription: Subscription;
+        this.hasSearched = false;
         this.toggleSelectable = true;
         this.itemValueField = null;
         this.itemTextField = null;
         this.itemDataField = null;
         this.itemTemplate = "{{item[itemTextField]}}";
         this.infiniteScrollPageNo = 0;
-        this.infiniteDataLoaded = false;
         this.isLoading = true;
         this.allowCustomValue = false;
         this.autoClose = true;
@@ -7376,10 +7444,18 @@ class ZselectmultipleComponent extends InputFieldBase {
             caseSensitive: false,
             operator: "contains",
         };
+        // For lazyloading
+        this.defaultTake = 50;
+        this.itemHeight = 28;
         this.virtual = {
-            itemHeight: 28,
-            pageSize: 15
+            itemHeight: this.itemHeight,
+            pageSize: this.defaultTake,
+        };
+        this.state = {
+            skip: 0,
+            take: this.defaultTake,
         };
+        this.stateChange = new BehaviorSubject({ state: this.state, eventType: null, searchTerm: '' });
         // Multi Selection Tree
         this.hasChildren = (dataitem) => !!dataitem['items'];
     }
@@ -7416,34 +7492,15 @@ class ZselectmultipleComponent extends InputFieldBase {
         const data = this.data;
         const zModel = this.group.zModel;
         /*
-         * 4 Styles of declare the component�s option list data source.
+         * 4 Styles of declare the component s option list data source.
          * Style #1 - Field.SelectOptions defined as an array of object that contain text and value.
-         * Style #2 - Field.SelectOptions defined as a phase like �item.Id as item.Name for item in group.zData.ProjectOptions�.
+         * Style #2 - Field.SelectOptions defined as a phase like  item.Id as item.Name for item in group.zData.ProjectOptions .
          * Style #3 - Field.OptionResourceURL defined the name of resource server api.
-         * Style #4 - Field.InfiniteScroll$ defined the method name as �group.getMoreDataAsScroll�.
+         * Style #4 - Field.InfiniteScroll$ defined the method name as  group.getMoreDataAsScroll .
          */
         if (data.HasInfiniteScroll && data.InfiniteScroll$) {
-            // when infinitie scroll
-            let recordId = null;
-            if (zModel && zModel[fieldValue]) {
-                // get zModel Value
-                recordId = zModel[fieldValue].toString();
-            }
-            let getzDataForzModel$ = ZComponentHelper.getInfiniteData(null, '', this, recordId);
-            if (getzDataForzModel$) {
-                getzDataForzModel$.subscribe((zdata) => {
-                    console.log(data.Name, ' - initial zData load: ', zdata);
-                    if (this.group) {
-                        this.afterLoadzDataOptions();
-                    }
-                    this.isLoading = false;
-                });
-            }
-            else {
-                this.isLoading = false;
-            }
             if (!this.isMobileScreen()) {
-                this.handleFilter(null, true);
+                this.handleFilter(null);
             }
         }
         else {
@@ -7487,14 +7544,17 @@ class ZselectmultipleComponent extends InputFieldBase {
         super.focusOnDefault(this.focus.bind(this));
     }
     ngAfterViewInit() {
+        // Subscribe to stateChange and trigger data fetching here because
+        // ngAfterViewInit ensures that all view components (e.g., dropdownlist, multiselect)
+        // are fully initialized. This avoids issues where view elements might not be ready
+        // during the constructor phase. The initial state emission and fetch are done here
+        // to guarantee that the view is prepared before interacting with it.
+        this.loadInfiniteData();
         this.componentService.decrementComponentCounterForField(this.data);
     }
     ngOnDestroy() {
-        // if (this.subscription) {
-        //   this.subscription.unsubscribe();
-        // }
-        if (this.debounceSub) {
-            this.debounceSub.unsubscribe();
+        if (this.stateSubscription) {
+            this.stateSubscription.unsubscribe();
         }
         for (const e of this.eventSubscriptions) {
             if (e && !e.closed) {
@@ -7502,6 +7562,79 @@ class ZselectmultipleComponent extends InputFieldBase {
             }
         }
     }
+    reloadInfiniteData() {
+        this.infinitezData = [];
+        this.state = { skip: 0, take: this.defaultTake };
+        this.stateChange.next(this.state);
+    }
+    loadInfiniteData() {
+        const { Value: fieldValue } = this.data;
+        const { zModel } = this.group;
+        const recordValue = zModel?.[fieldValue]?.toString() ?? null;
+        const recordValueList = recordValue ? recordValue.split(',').filter(Boolean) : [];
+        const newItems$ = ZComponentHelper.getGroupEvalValue.call(this, this.data.InfiniteScroll$);
+        if (!newItems$) {
+            return;
+        }
+        this.stateSubscription = this.stateChange.pipe(switchMap(({ state, eventType, searchTerm }) => {
+            // Update hasSearched based on searchTerm
+            this.hasSearched = !ZComponentHelper.isNullUndefinedEmpty(searchTerm);
+            if (!this.infinitezData || this.hasSearched || eventType === 'Closed') {
+                this.infinitezData = [];
+            }
+            this.isLoading = true;
+            this.state = state ?? this.state;
+            const pageNo = this.getPageNo(this.state.skip, this.state.take);
+            return newItems$(null, searchTerm, pageNo, this.group.ctrlScope, this.data).pipe(map(response => ({ response, eventType, searchTerm })));
+        }), tap(({ response, eventType }) => {
+            const dataSet = response.dataSet;
+            const totalCount = response.totalCount ?? dataSet?.length;
+            if (dataSet) {
+                if (this.infinitezData.length === 0) {
+                    if (totalCount === 0) {
+                        this.infinitezData = [];
+                    }
+                    else if (totalCount <= this.state.take) {
+                        this.infinitezData = dataSet;
+                    }
+                    else {
+                        this.infinitezData = dataSet.concat(new Array(totalCount - this.state.take));
+                    }
+                }
+                else {
+                    this.infinitezData.splice(this.state.skip, this.state.take, ...dataSet);
+                }
+            }
+        }), switchMap(({ eventType, searchTerm }) => {
+            if (eventType !== null || !ZComponentHelper.isNullUndefinedEmpty(searchTerm) || recordValueList.length === 0) {
+                return of(null);
+            }
+            return from(recordValueList).pipe(mergeMap(value => {
+                const existingIndex = this.infinitezData.findIndex(item => item && item[this.itemValueField].toString() === value.toString());
+                if (existingIndex !== -1) {
+                    return of(null);
+                }
+                return newItems$(null, '', 0, this.group.ctrlScope, this.data, value).pipe(tap(resp => {
+                    if (resp['dataSet']) {
+                        this.infinitezData = [...resp['dataSet'], ...this.infinitezData];
+                    }
+                }));
+            }));
+        }), tap(() => {
+            if (this.group) {
+                this.afterLoadzDataOptions();
+            }
+            this.isLoading = false;
+            this.cdr.detectChanges();
+        }), catchError((error) => {
+            console.warn('Error in loadInfiniteData:', error);
+            this.isLoading = false;
+            return of(null);
+        })).subscribe();
+    }
+    getPageNo(stateSkip, stateTake) {
+        return Math.round(stateSkip / stateTake);
+    }
     // Auto select first option (if required & only 1 option)
     autoSelectFirstOption(required, data, zModelPropertyName, id) {
         if (ZComponentHelper.isNullUndefinedEmpty(id) && required) {
@@ -7513,7 +7646,7 @@ class ZselectmultipleComponent extends InputFieldBase {
             this.group.subject.next({
                 type: "onChange",
                 target: this.data.OnChange,
-                event,
+                event: event$1,
                 data: { ['value']: optionId, field: this.data }
             });
             this.form.markAsPristine();
@@ -7530,32 +7663,36 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
     // Style #4, used in ionic-selectable
     getInfiniteData(event) {
-        ZComponentHelper.getInfiniteData(event.component, event.text, this);
+        const searchTerm = event.text ?? '';
+        ZComponentHelper.getInfiniteData(event.component, searchTerm, this).subscribe();
     }
     getItemsData() {
+        // Local helper function for slicing option name based on start index
+        const getOptionNameSuffix = (optionName, startIndex) => {
+            return optionName.slice(startIndex);
+        };
         if (this.data.HasInfiniteScroll) {
             return this.infinitezData;
         }
         const optionName = this.data.OptionName || this.itemDataField || 'group.zData.' + this.data.Name;
-        if (Array.isArray(this.data.SelectOptions) && !this.group.zData[optionName.slice(12)]) {
-            // return selectionOptions;
-            // return this.data.SelectOptions;
-            this.group.zData[optionName.slice(12)] = this.data.SelectOptions;
+        if (Array.isArray(this.data.SelectOptions) && !this.group.zData[getOptionNameSuffix(optionName, 12)]) {
+            this.group.zData[getOptionNameSuffix(optionName, 12)] = this.data.SelectOptions;
             this.itemDataField = optionName;
         }
         if (optionName.startsWith('zData.')) {
-            return this.group.zData[optionName.slice(6)] || [];
+            return this.group.zData[getOptionNameSuffix(optionName, 6)] || [];
         }
         if (optionName.startsWith('group.zData.')) {
-            return this.group.zData[optionName.slice(12)] || [];
+            return this.group.zData[getOptionNameSuffix(optionName, 12)] || [];
         }
         if (optionName.startsWith('group.')) {
-            return this.group[optionName.slice(6)] || [];
+            return this.group[getOptionNameSuffix(optionName, 6)] || [];
         }
         if (optionName) {
             return this.group[optionName] || [];
         }
         console.warn(this.data.Name, ' - Invalid setting for OptionName: ', optionName);
+        this.cdr.detectChanges();
     }
     onSearch(event) {
         // console.log("At zselectmultiple.component (onSearch): ", event);
@@ -7563,52 +7700,44 @@ class ZselectmultipleComponent extends InputFieldBase {
         const searchTerm = event.text;
         const component = event.component;
         // Start search and enable infinite scrolling on the component if available
-        component?.startSearch();
-        component?.enableInfiniteScroll();
-        // Reset paging and clear data if new search text is detected or infinite scrolling is enabled
-        if (this.data.HasInfiniteScroll) {
-            this.resetInfiniteData();
-            if (searchTerm) {
-                if (ZComponentHelper.isNullUndefinedEmpty(searchTerm) !== ZComponentHelper.isNullUndefinedEmpty(this.infiniteSearchText)) {
-                    const valueField = this.itemValueField.toString();
-                    let zdataModel = [];
-                    zdataModel = this.infinitezData.filter(x => x[valueField] === searchTerm);
-                    this.modelzData = zdataModel.slice();
-                    this.infiniteDataLoaded = ZComponentHelper.isNullUndefinedEmpty(event.text);
-                }
-            }
-            this.getInfiniteData(event);
-        }
-        else {
-            // Reset scroll page, empty items
-            this.infiniteScrollPageNo = 0;
-            if (component) {
-                component.items = [];
-            }
-            // Prepare default parameters for item filtering
-            const params = {
-                referId: null,
-                pageNo: 0,
-                pageSize: 20,
-                sortColumnName: "",
-                sortOrder: "",
-                sortColumnNames: [],
-                sortOrders: [],
-                filterParams: [],
-                parameters: ""
-            };
-            const searchBy = this.data.SearchFields ?? this.itemTextField;
-            const itemsData = this.getItemsData();
-            const filteredItems = ZComponentHelper.filterSearchItems(itemsData, searchTerm, searchBy, params.pageNo, params.pageSize, this.data.SearchOperator);
-            this.checkAllowCustomValue(searchBy, searchTerm, filteredItems, itemsData);
-            // Update component items and handle search completion
-            if (component) {
-                component.items = [...component.items, ...filteredItems];
-                component.endInfiniteScroll();
-                component.endSearch();
-                this.isLoading = false;
-            }
-        }
+        component?.startSearch(); //mobile
+        component?.enableInfiniteScroll(); //mobile
+        // // Reset paging and clear data if new search text is detected or infinite scrolling is enabled
+        // // Reset scroll page, empty items
+        // this.infiniteScrollPageNo = 0;
+        // if (component) {
+        //   component.items = [];
+        // }
+        // // Prepare default parameters for item filtering
+        // const params: zSelectMultipleParams = {
+        //   referId: null,
+        //   pageNo: 0,
+        //   pageSize: 20,
+        //   sortColumnName: "",
+        //   sortOrder: "",
+        //   sortColumnNames: [],
+        //   sortOrders: [],
+        //   filterParams: [],
+        //   parameters: ""
+        // };
+        // const searchBy = this.data.SearchFields ?? this.itemTextField;
+        // const itemsData = this.getItemsData();
+        // const filteredItems = ZComponentHelper.filterSearchItems(
+        //   itemsData,
+        //   searchTerm,
+        //   searchBy,
+        //   params.pageNo,
+        //   params.pageSize,
+        //   this.data.SearchOperator
+        // );
+        // this.checkAllowCustomValue(searchBy, searchTerm, filteredItems, itemsData);
+        // // Update component items and handle search completion
+        // if (component) {
+        //   component.items = [...component.items, ...filteredItems];
+        //   component.endInfiniteScroll();
+        //   component.endSearch();
+        //   this.isLoading = false;
+        // }
     }
     checkAllowCustomValue(searchBy, searchTerm, filteredItems, itemsData) {
         // Allow custom value unless a direct match is found
@@ -7631,7 +7760,7 @@ class ZselectmultipleComponent extends InputFieldBase {
             }
         }
     }
-    handleFilter(searchTerm, justOneTime) {
+    handleFilter(searchTerm) {
         if (this.multiselect && this.data.SearchLength) {
             const meetsLengthCondition = this.data.SearchLength && this.data.SearchLength <= searchTerm.length;
             this.multiselect.toggle(meetsLengthCondition);
@@ -7641,66 +7770,46 @@ class ZselectmultipleComponent extends InputFieldBase {
         if (this.data.AllowCustomValue) {
             this.checkAllowCustomValue(searchBy, searchTerm, itemsData);
         }
-        if (this.debounceSub) {
-            this.debounceSub.unsubscribe();
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$ && searchTerm) {
+            this.stateChange.next({ state: this.state, eventType: 'Filter', searchTerm: searchTerm });
         }
-        this.debounceSub = of([]).pipe(tap(() => (this.isLoading = true)), delay(500), tap(() => this.performSearch(searchTerm)), tap(() => (this.isLoading = false))).subscribe();
     }
-    performSearch(value) {
-        const searchAction = () => {
-            this.onSearch({ component: null, text: value });
-            if (this.group) {
-                this.afterLoadzDataOptions();
+    onComboOpened() {
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$) {
+            if (this.comboboxComponent?.optionsList?.pageChange) {
+                this.comboboxComponent.optionsList.scrollToIndex(0);
             }
-        };
-        if (!this.data.SearchLength || this.data.SearchLength <= value.length) {
-            searchAction();
+            this.comboboxComponent.optionsList.pageChange.subscribe((state) => this.stateChange.next({ state: state, eventType: 'Opened', searchTerm: '' }));
         }
     }
-    handleLazyLoadFilter(value, justOneTime) {
-        debugger;
-        if (this.debounceSub) {
-            this.debounceSub.unsubscribe();
-        }
-        this.debounceSub = of([]).pipe(delay(500)).subscribe(() => {
-            this.isLoading = true;
-            this.onSearch({ component: null, text: value });
-            if (this.group) {
-                if (this.group.afterLoadzDataOptions) {
-                    this.group.afterLoadzDataOptions(this.group, this.data);
-                }
-            }
-        });
-    }
-    handleOpen(event) {
-        if (this.data.HasInfiniteScroll) {
-            this.resetInfiniteData();
-            // if (!this.infiniteDataLoaded) {
-            // this.infiniteDataLoaded = true;
-            this.handleFilter(null);
-            // }
-        }
+    onMultiSelectOpen(event) {
         // Ensure multiselect value meets the search length requirement
-        if (this.multiselect && this.data.SearchLength && this.multiselect.value.length < this.data.SearchLength) {
+        if (this.data.SearchLength && this.multiselect.value.length < this.data.SearchLength) {
             event.preventDefault();
             return; // Early return to avoid unnecessary checks
         }
     }
-    resetInfiniteData() {
-        //ZComponentHelper.cancelGetInfiniteData; 
-        this.infiniteDataLoaded = false;
-        this.infinitezData = [];
-        this.infiniteScrollPageNo = 0;
-    }
-    handleClose(event) {
+    onMultiSelectOpened() {
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$) {
+            if (this.multiselect?.optionsList?.pageChange) {
+                this.multiselect.optionsList.scrollToIndex(0);
+            }
+            this.multiselect.optionsList.pageChange.subscribe((state) => this.stateChange.next({ state: state, eventType: 'Opened', searchTerm: '' }));
+        }
     }
-    handleBlur() {
-        // this.handleClose();
+    onDropDownListOpened() {
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$) {
+            // optionsList is a reference to the internal kendo-list component used in the DropDownList popup
+            // pass the current state to the stateChange BehaviorSubject on each pageChange event
+            if (this.dropdownlistComponent?.optionsList?.pageChange) {
+                this.dropdownlistComponent.optionsList.scrollToIndex(0);
+            }
+            this.dropdownlistComponent.optionsList.pageChange.subscribe((state) => this.stateChange.next({ state: state, eventType: 'Opened', searchTerm: '' }));
+        }
     }
-    handleFocus() {
-        if (this.data.HasInfiniteScroll) {
-            this.resetInfiniteData();
-            this.handleFilter(null);
+    handleClose(event) {
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$ && this.hasSearched) {
+            this.stateChange.next({ state: this.state, eventType: 'Closed', searchTerm: '' });
         }
     }
     getItemTemplate(item, data, group, itemValueField, itemTextField) {
@@ -7716,6 +7825,9 @@ class ZselectmultipleComponent extends InputFieldBase {
             });
         }
         else if (itemTextField) {
+            if (!item) {
+                return null;
+            }
             return item[itemTextField];
         }
         else {
@@ -7723,6 +7835,11 @@ class ZselectmultipleComponent extends InputFieldBase {
             return Object.values(item).join(", ");
         }
     }
+    resetInfiniteData() {
+        this.infinitezData = [];
+        this.state = { skip: 0, take: this.defaultTake };
+        this.infiniteScrollPageNo = 0;
+    }
     onAddItem(event) {
         const f = ZComponentHelper.getGroupEvalValue.call(this, this.data.OnAddItem);
         if (typeof f === 'function') {
@@ -7922,12 +8039,12 @@ class ZselectmultipleComponent extends InputFieldBase {
         }
     }
 }
-ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", 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.3.3", 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($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\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($event)\"\r\n                     (close)=\"handleClose($event)\"\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($event)\"\r\n                         (close)=\"handleClose($event)\"\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($event)\"\r\n                  (close)=\"handleClose($event)\"\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 kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}: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$6.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: i4.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$1.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$1.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$1.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$1.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$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.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$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
+ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i0.ChangeDetectorRef }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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 }, { propertyName: "itemElement", first: true, predicate: ["itemElement"], 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)\"\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                (close)=\"handleClose($event)\"\r\n                (opened)=\"onComboOpened()\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\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                     [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"onMultiSelectOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (opened)=\"onMultiSelectOpened()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </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                         (close)=\"handleClose($event)\"\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                  (close)=\"handleClose($event)\"\r\n                  (opened)=\"onDropDownListOpened()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\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 kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}: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$6.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: i4.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$1.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$1.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$1.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$1.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$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.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$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zselectmultiple", 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($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\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($event)\"\r\n                     (close)=\"handleClose($event)\"\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($event)\"\r\n                         (close)=\"handleClose($event)\"\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($event)\"\r\n                  (close)=\"handleClose($event)\"\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 kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}: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"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.ResourceApiService }, { type: i2.WebApiService }, { type: i2.CacheService }, { type: i2.FieldService }]; }, propDecorators: { comboboxComponent: [{
+            args: [{ selector: "app-zselectmultiple", 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)\"\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                (close)=\"handleClose($event)\"\r\n                (opened)=\"onComboOpened()\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\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                     [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"onMultiSelectOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (opened)=\"onMultiSelectOpened()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </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                         (close)=\"handleClose($event)\"\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                  (close)=\"handleClose($event)\"\r\n                  (opened)=\"onDropDownListOpened()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\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 kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}: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"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.ResourceApiService }, { type: i0.ChangeDetectorRef }, { type: i2.WebApiService }, { type: i2.CacheService }, { type: i2.FieldService }]; }, propDecorators: { comboboxComponent: [{
                 type: ViewChild,
                 args: ["comboboxComponent"]
             }], dropdownlistComponent: [{
@@ -7942,6 +8059,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             }], selectComponent: [{
                 type: ViewChild,
                 args: ["selectComponent"]
+            }], itemElement: [{
+                type: ViewChild,
+                args: ['itemElement', { static: false }]
             }] } });
 
 /********** Angular **********/
@@ -12516,6 +12636,8 @@ class ZtrendcardComponent {
         this.icon = "address-card";
         this.color = "#000000";
         this.value = 0;
+        this.iconColumnSize = 4;
+        this.valueColumnSize = 4;
         this.options = {
             title: this.title,
             icon: this.icon,
@@ -12556,6 +12678,18 @@ class ZtrendcardComponent {
                 }
             }
         }
+        const ratio = this.data['InnerRatio'] ? this.data['InnerRatio'].split(':').map(val => val.trim()) : null;
+        if (ratio) {
+            if (ratio.length === 2) {
+                // When there are two values, assign them directly
+                this.iconColumnSize = parseInt(ratio[0]); // 4 for iconColumnSize
+                this.valueColumnSize = parseInt(ratio[1]); // 8 for valueColumnSize
+            }
+            else if (ratio && ratio.length === 1) {
+                // If only one value is provided, split evenly
+                this.iconColumnSize = this.valueColumnSize = parseInt(ratio[0]);
+            }
+        }
         this.getFieldDeclarationForSetup(this.data, this.options);
         this.isLoading = false;
     }
@@ -12567,10 +12701,10 @@ class ZtrendcardComponent {
     }
 }
 ZtrendcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtrendcardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtrendcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtrendcardComponent, selector: "app-ztrendcard", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4.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.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ZtrendcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtrendcardComponent, selector: "app-ztrendcard", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" [sizeLg]=\"iconColumnSize\" [sizeXs]=\"iconColumnSize\" [sizeMd]=\"iconColumnSize\" [sizeXl]=\"iconColumnSize\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" [sizeLg]=\"valueColumnSize\" [sizeXs]=\"valueColumnSize\" [sizeMd]=\"valueColumnSize\" [sizeXl]=\"valueColumnSize\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4.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.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtrendcardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ztrendcard', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" sizeLg=\"4\" sizeXs=\"4\" sizeMd=\"4\" sizeXl=\"4\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"] }]
+            args: [{ selector: 'app-ztrendcard', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <ion-grid>\r\n    <ion-row>\r\n      <ion-col>\r\n        <!-- <div class=\"trend-btn ion-activatable ripple-parent\" [routerLink]=\"[item.URL]\"> -->\r\n        <div class=\"trend-btn ion-activatable ripple-parent\">\r\n          <ion-label>\r\n            <ion-grid style=\"width: 100%;\">\r\n              <ion-row>\r\n                <ion-col class=\"trend-btn-icon\" [sizeLg]=\"iconColumnSize\" [sizeXs]=\"iconColumnSize\" [sizeMd]=\"iconColumnSize\" [sizeXl]=\"iconColumnSize\">\r\n                  <fa-icon [icon]=\"options.icon\" [style.color]=\"options.color\"></fa-icon>\r\n                </ion-col>\r\n                <ion-col class=\"trend-btn-value\" [sizeLg]=\"valueColumnSize\" [sizeXs]=\"valueColumnSize\" [sizeMd]=\"valueColumnSize\" [sizeXl]=\"valueColumnSize\">\r\n                  <ion-label>{{ options.value }}</ion-label><br/>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </ion-label>\r\n          <ion-label class=\"trend-btn-label\">{{ options.title }}</ion-label>\r\n          <ion-ripple-effect></ion-ripple-effect>\r\n        </div>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n<div style=\"padding-bottom: 10px;\"></div>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".trend-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:8px 0;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.ripple-parent{position:relative;overflow:hidden}.trend-btn-label{text-align:right;font-size:14px;padding-right:20px}.trend-btn-value{text-align:right;zoom:2;vertical-align:middle;padding-top:10px}.trend-btn-icon{text-align:center;zoom:2.5}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], group: [{
@@ -14505,7 +14639,7 @@ class VirtualScrollComponent extends ContainerFieldBase {
     }
 }
 VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && 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 *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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      </div>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\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: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }, { 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: [
+VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", 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\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && 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 *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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      </div>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\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: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: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }, { 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
     ] });
@@ -14514,7 +14648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             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\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && 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 *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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      </div>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\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"] }]
+                    ], 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\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && 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 *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [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      </div>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\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: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]