mmhglobal-dynamicform 2.34.0 → 2.35.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, 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 { BehaviorSubject, forkJoin, of, tap as tap$1, defer, switchMap as switchMap$1, map as map$1, first, isObservable, 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, 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 { ZGroup, FormType, ZComponentHelper, AssetsRoutes, AssetsFolder, AssetsAllowedExtension, MESSAGETYPE, TriggerFromType, ActionType, DefaultMessage, DefaultDialogTitle, StateType, 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';
@@ -688,7 +688,7 @@ class ZComponentDebugService {
                 };
                 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)));
+            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,7 +853,7 @@ class MainService {
         //#region for signalR alert
         this.getListFieldName = (fieldName) => {
             const params = new HttpParams().set("name", fieldName);
-            return this.oauth2Service.httpGet$(this.fieldService.downloadListFieldUrl, params).pipe(map(res => res.FieldElementMasterId), switchMap(id => this.oauth2Service.httpGet$(this.fieldService.downloadFormFieldUrl, { id })), map(res => res.Name));
+            return this.oauth2Service.httpGet$(this.fieldService.listFieldApiRoute, params).pipe(map(res => res.FieldElementMasterId), switchMap(id => this.oauth2Service.httpGet$(this.fieldService.formFieldApiRoute, { id })), map(res => res.Name));
         };
         this.clearFormListFields = () => {
             this.fieldService.dataFormFields = {};
@@ -2393,21 +2393,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 /********** Angular **********/
-var GridSettingType;
-(function (GridSettingType) {
-    GridSettingType["OriginalSetting"] = "OriginalSetting";
-    GridSettingType["SavedSetting"] = "SavedSetting";
-    GridSettingType["CachedDataSetting"] = "CachedDataSetting";
-})(GridSettingType || (GridSettingType = {}));
-var GridStateLogicType;
-(function (GridStateLogicType) {
-    GridStateLogicType["SettingAndDataCache"] = "SettingAndDataCache";
-    GridStateLogicType["SettingOnly"] = "SettingOnly";
-    GridStateLogicType["DataCacheOnly"] = "DataCache";
-})(GridStateLogicType || (GridStateLogicType = {}));
 class ZGridService {
-    constructor(offlineDatabaseService) {
-        this.offlineDatabaseService = offlineDatabaseService;
+    constructor(stateSettingService) {
+        this.stateSettingService = stateSettingService;
         this.gridDefaultState = { skip: 0, take: 20 };
     }
     /**
@@ -2421,64 +2409,79 @@ class ZGridService {
         // Create a copy of the default state and assign it to this.gridState.
         this.gridState = Object.assign({}, this.gridDefaultState);
         if (field.CacheInfo) {
-            //const cacheName = this.getGridStateCacheStorageKey(GridSettingType.OriginalSetting);
-            //sessionStorage.setItem(cacheName, JSON.stringify(this.gridSettings));
-            // Generate a cache name based on the cache type and the field.
-            let cacheName = this.getGridStateCacheStorageKey(GridSettingType.CachedDataSetting, field);
+            let stateType = this.getGridStateLogic(field);
             // Determine whether to use SavedSetting cache type based on configuration.
-            if (field.CacheInfo.EnableSaveState === true && field.CacheInfo.DisableCacheData === true) {
-                cacheName = this.getGridStateCacheStorageKey(GridSettingType.SavedSetting, field);
-            }
-            // Retrieve the cached value from sessionStorage.
-            const cacheInfo = this.generateCacheInfo(field, cacheName);
-            const cacheValue = this.offlineDatabaseService.getItemByKey(cacheInfo, cacheInfo.offlineDatabaseKey);
-            // If a cached value exists, update this.gridState with the cached value.
-            if (cacheValue) {
-                this.gridState = cacheValue.gridState;
+            if (stateType === StateType.cachedDataSetting || stateType === StateType.savedAndCachedDataSetting) {
+                let cacheName = this.stateSettingService.getStorageCacheKey(stateType, field);
+                const cacheData = sessionStorage.getItem(cacheName);
+                if (cacheData) {
+                    this.gridState = JSON.parse(cacheData).gridState;
+                }
             }
         }
         return this.gridState;
     }
-    generateCacheInfo(gridField, offlineDatabaseKey) {
-        const cacheInfo = gridField.CacheInfo;
-        return {
-            priorityNumber: 0,
-            componentType: 'zgrid',
-            resourceURL: cacheInfo.ResourceURL,
-            appendPaginationData: cacheInfo.AppendPaginationData,
-            definedDatabase: cacheInfo.DefinedDatabase,
-            definedTable: cacheInfo.DefinedTable,
-            offlineDatabaseKey: offlineDatabaseKey ?? (GridSettingType.SavedSetting + `${Delimiter.default}${gridField.FieldElementName}${Delimiter.default}${gridField.CacheInfo.Name ?? gridField.FieldElementName}`),
-            saveAsJson: cacheInfo.SaveAsJson,
-            encryptValue: cacheInfo.EncryptValue
-        };
-    }
-    // Used for Grid state setting ONLY.
-    getGridStateCacheStorageKey(gridStateType, field) {
-        if (!field.CacheInfo) {
-            return;
-        }
-        const cacheName = `${field.FieldElementName}${Delimiter.default}${field.CacheInfo.Name ?? field.FieldElementName}`;
-        if (gridStateType === GridSettingType.OriginalSetting || gridStateType === GridSettingType.SavedSetting) {
-            return gridStateType + Delimiter.default + cacheName;
-        }
-        else if (gridStateType === GridSettingType.CachedDataSetting) {
-            return cacheName;
+    getStateCacheByName(cacheName) {
+        try {
+            if (!cacheName) {
+                console.warn('Invalid cache name provided');
+                return null;
+            }
+            return JSON.parse(localStorage.getItem(cacheName));
         }
-        return null;
+        catch (error) {
+            console.warn('Error accessing localStorage:', error);
+            return null; // Fallback in case of an error
+        }
+    }
+    getStateCache(stateType, field) {
+        const cacheName = this.stateSettingService.getStorageCacheKey(stateType, field);
+        const cachedState = this.getStateCacheByName(cacheName);
+        if (cachedState !== null) {
+            // Return the cached state immediately if it's not null
+            return of(cachedState);
+        }
+        const stateSettingInfo = this.stateSettingService.initGetStateSettingInfo(field);
+        stateSettingInfo.stateType = stateType;
+        return defer(() => this.stateSettingService.getStateSetting(stateSettingInfo).pipe(switchMap$1((retrievedState) => {
+            if (retrievedState) {
+                // Parse and set state if available
+                const stateSettingInfo = retrievedState;
+                if (stateSettingInfo.stateData) {
+                    const gridStateData = JSON.parse(stateSettingInfo.stateData);
+                    if (gridStateData) {
+                        gridStateData.id = stateSettingInfo.id.toString();
+                        this.setStateToCache(cacheName, gridStateData);
+                        return of(gridStateData); // Emit the retrieved state
+                    }
+                }
+            }
+            return of(null); // Complete without emitting anything
+        })));
+    }
+    setStateToCache(cacheName, gridSetting) {
+        const cacheData = JSON.stringify(gridSetting);
+        localStorage.setItem(cacheName, cacheData);
+    }
+    deleteStateCacheByName(cacheName) {
+        localStorage.removeItem(cacheName);
+    }
+    deleteStateCache(stateType, field) {
+        const cacheName = this.stateSettingService.getStorageCacheKey(stateType, field);
+        localStorage.removeItem(cacheName);
     }
     getGridStateLogic(field) {
         if (field.CacheInfo) {
             const enableSaveState = field.CacheInfo.EnableSaveState;
             const disableCacheData = field.CacheInfo.DisableCacheData;
             if (enableSaveState && !disableCacheData) {
-                return GridStateLogicType.SettingAndDataCache;
+                return StateType.savedAndCachedDataSetting;
             }
             else if (enableSaveState && disableCacheData) {
-                return GridStateLogicType.SettingOnly;
+                return StateType.savedSetting;
             }
             else if (!enableSaveState && !disableCacheData) {
-                return GridStateLogicType.DataCacheOnly;
+                return StateType.cachedDataSetting;
             }
         }
         else {
@@ -2487,28 +2490,29 @@ class ZGridService {
         return null;
     }
 }
-ZGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, deps: [{ token: i2.OfflineDatabaseService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZGridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, deps: [{ token: i2.StateSettingService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZGridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2.OfflineDatabaseService }]; } });
+        }], ctorParameters: function () { return [{ type: i2.StateSettingService }]; } });
 
 /********** Angular **********/
 class ZGridBindingDirective extends DataBindingDirective {
     constructor(grid, // Injecting GridComponent provides access to the scope and context of the GridComponent.
     webapiService, toastService, 
     //private mainService: MainService,
-    offlineDatabaseService, signalrService, gridService, loggingService) {
+    //private offlineDatabaseService: OfflineDatabaseService,
+    signalrService, gridService, loggingService, stateSettingService) {
         super(grid);
         this.webapiService = webapiService;
         this.toastService = toastService;
-        this.offlineDatabaseService = offlineDatabaseService;
         this.signalrService = signalrService;
         this.gridService = gridService;
         this.loggingService = loggingService;
+        this.stateSettingService = stateSettingService;
         this.changeEvent = {
             pageChanged: false,
             filterChanged: false,
@@ -2580,11 +2584,24 @@ class ZGridBindingDirective extends DataBindingDirective {
         }
     }
     ngAfterViewInit() {
-        this.subscribeCacheDataChanges();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
+    retrieveGridStateCache(stateType, field) {
+        return this.gridService.getStateCache(stateType, field).pipe(map((settingCacheValue) => {
+            // If settingCacheValue is null or undefined, continue with a fallback value 
+            return settingCacheValue;
+        }), tap((settingCacheValue) => {
+            if (settingCacheValue) {
+                const parsedJsonData = settingCacheValue;
+                if (parsedJsonData) {
+                    this.gridSetting.gridState = parsedJsonData.gridState ?? this.gridSetting.gridState;
+                    this.gridSetting.columnConfigurations = parsedJsonData.columnConfigurations ?? null;
+                }
+            }
+        }));
+    }
     setResourceUrl(resourceUrl) {
         const array = resourceUrl.split("/api/");
         if (!!array[1]) {
@@ -2620,23 +2637,19 @@ class ZGridBindingDirective extends DataBindingDirective {
     generateGridColumns() {
         const columnFields$ = ZComponentHelper.getGroupValue(this.field.ColumnFields, this.grp);
         if (columnFields$) {
-            columnFields$.pipe(tap((data) => {
-                let columnsConfig = null;
-                // Note: Obtaining the grid state is during initialization; if not, it will prevent the grid from loading.
-                const settingCacheName = this.gridService.getGridStateCacheStorageKey(GridSettingType.SavedSetting, this.field);
-                const settingCacheValue = sessionStorage.getItem(settingCacheName);
-                if (settingCacheValue) {
-                    const parsedJsonData = JSON.parse(decodeURIComponent(settingCacheValue));
-                    if (parsedJsonData) {
-                        columnsConfig = parsedJsonData.columnConfigurations ?? null;
-                        this.gridSetting.gridState = parsedJsonData.gridState;
-                    }
-                }
+            columnFields$.pipe(switchMap((data) => {
+                const gridStateLogic = this.gridService.getGridStateLogic(this.field);
+                if (gridStateLogic && gridStateLogic !== StateType.cachedDataSetting) {
+                    return this.retrieveGridStateCache(StateType.savedSetting, this.field).pipe(map((state) => {
+                        return data;
+                    }));
+                }
+                return of(data);
+            }), tap((data) => {
                 this.gridSetting = {
                     ...this.gridSetting,
                     columnField: data,
-                    group: this.zgridbinding.group,
-                    columnConfigurations: columnsConfig
+                    group: this.zgridbinding.group
                 };
                 ZComponentHelper.getGridColumns(this.gridSetting);
                 this.loggingService.debugLog('generated grid columns', this.gridSetting);
@@ -2883,18 +2896,19 @@ class ZGridBindingDirective extends DataBindingDirective {
      */
     getDataBinding(skipUseCache) {
         this.grid.loading = true;
-        const cacheInfo = this.zgridbinding.data.CacheInfo;
-        if (!cacheInfo || skipUseCache) {
-            this.getGridData();
-            return;
-        }
-        if (cacheInfo) {
-            const gridStateLogic = this.gridService.getGridStateLogic(this.field);
-            if (gridStateLogic === GridStateLogicType.SettingOnly) {
-                this.getGridData();
-                return;
-            }
-        }
+        this.getGridData();
+        // const cacheInfo = this.zgridbinding.data.CacheInfo;
+        // if (!cacheInfo || skipUseCache) {
+        //   this.getGridData();
+        //   return;
+        // }
+        // if (cacheInfo) {
+        //   const gridStateLogic = this.gridService.getGridStateLogic(this.field);
+        //   if (gridStateLogic === GridStateLogicType.SettingOnly) {
+        //     this.getGridData();
+        //     return;
+        //   }
+        // }
         // comment out on 20241001. default to fetch the data from api instead of loading fromt he cache.
         // if (!this.changeEvent.pageChanged && !this.changeEvent.sortChanged && !this.changeEvent.filterChanged) {
         //   const currentDataCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
@@ -2906,7 +2920,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         //   }
         // }
         // else {
-        this.getGridData();
+        // this.getGridData();
         // }
     }
     /**
@@ -2967,10 +2981,9 @@ class ZGridBindingDirective extends DataBindingDirective {
         this.aggregateHandling(data.dataSet);
         this.grid.data = { data: data.dataSet, total: data.totalCount };
         if (!skipCacheData) {
-            const gridStateLogic = this.gridService.getGridStateLogic(this.field);
-            if (gridStateLogic === GridStateLogicType.DataCacheOnly || gridStateLogic === GridStateLogicType.SettingAndDataCache) {
-                this.cacheGridData();
-                this.subscribeCacheDataChanges();
+            const stateLogic = this.gridService.getGridStateLogic(this.field);
+            if (stateLogic === StateType.cachedDataSetting || stateLogic === StateType.savedAndCachedDataSetting) {
+                this.cacheGridData(stateLogic);
             }
         }
         this.grid.loading = false;
@@ -2985,8 +2998,8 @@ class ZGridBindingDirective extends DataBindingDirective {
             sortChanged: false
         };
     }
-    async cacheGridData() {
-        const me = this;
+    cacheGridData(stateLogic) {
+        const cacheName = this.stateSettingService.getStorageCacheKey(stateLogic, this.field);
         const gridState = this.gridSetting.gridState;
         const gridData = this.grid?.data || null;
         if (!gridData['data']) {
@@ -2994,18 +3007,10 @@ class ZGridBindingDirective extends DataBindingDirective {
         }
         const cacheInfo = this.zgridbinding.data.CacheInfo;
         if (cacheInfo && !cacheInfo.DisableCacheData) {
-            // keep originalData 
-            const originalDataCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
-            const result = await this.offlineDatabaseService.getItemByKey(originalDataCacheInfo, originalDataCacheInfo.offlineDatabaseKey);
+            const columnConfigurations = ZComponentHelper.getGridColumnsConfig(this.zgridbinding.gridSetting.columns);
             let updatedData = [...gridData['data']];
             let skipList = [gridState.skip];
             let currentGridSkip = gridState.skip;
-            if (originalDataCacheInfo.appendPaginationData) {
-                if (result && !result.skipList.includes(currentGridSkip)) {
-                    updatedData = [...result.data.dataSet, ...gridData['data']];
-                    skipList = [...result.skipList, ...skipList];
-                }
-            }
             const cacheGridData = {
                 data: {
                     dataSet: updatedData,
@@ -3014,91 +3019,91 @@ class ZGridBindingDirective extends DataBindingDirective {
                 gridState: gridState,
                 skipList: skipList,
                 cacheDuration: cacheInfo.CacheDuration,
-                //columnConfigurations: me.grid.columns // by including this property will cause circular reference error. 
+                columnConfigurations: columnConfigurations
             };
-            await this.offlineDatabaseService.addItem(originalDataCacheInfo, cacheGridData);
+            sessionStorage.setItem(cacheName, JSON.stringify(cacheGridData));
         }
     }
     //"FeatureDevelopment|Competency" 
-    async subscribeCacheDataChanges() {
-        const cacheInfo = this.zgridbinding.data.CacheInfo;
-        if (cacheInfo && !cacheInfo.DisableCacheData) {
-            // cannot use main service here. will get circular error when build lib
-            //this.mainService.joinProjectSignalR();
-            const callBackFunction = `${cacheInfo.Name}_handleReceivedMessage`;
-            // create and bind a function to be called back for the grid in the group trigger by signalR.
-            if (!this.grp.signalRCallbackHandler) {
-                this.grp.signalRCallbackHandler = {};
-            }
-            this.grp.signalRCallbackHandler[callBackFunction] = this.handleReceivedMessage.bind(this);
-            const generatedCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
-            if (generatedCacheInfo.definedDatabase && generatedCacheInfo.definedTable) {
-                generatedCacheInfo.definedDatabase.forEach(db => {
-                    generatedCacheInfo.definedTable.forEach(table => {
-                        const eventName = `${db}|${table}`;
-                        console.log(`Listening to event name: ${eventName}`);
-                        this.signalrService.subscribeToEvent(this.grp, `${eventName}`, `group.signalRCallbackHandler.${callBackFunction}`);
-                    });
-                });
-            }
-        }
-    }
-    async handleReceivedMessage(group, result, eventName) {
-        console.log(`The Signalr trigger has been detected. Now, proceed to update the cache and grid data.`);
-        const responsedResult = JSON.parse(result);
-        const actionType = responsedResult.Action;
-        const responsedResultId = responsedResult['Id'];
-        const tempParams = ZComponentHelper.deepClone(this.params);
-        const currentDataCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
-        const currentData = await this.offlineDatabaseService.getItemByKey(currentDataCacheInfo, currentDataCacheInfo.offlineDatabaseKey);
-        if (currentData) {
-            tempParams.filters = `Id=${responsedResultId}`;
-            if (actionType === ActionType.Delete) {
-                currentData.data.dataSet = currentData.data.dataSet.filter(item => item.Id !== parseInt(responsedResultId));
-                this.handleGetDataBindingComplete(currentData.data, true);
-                await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
-                this.handleGetDataBindingComplete(currentData.data, true);
-                console.log(`Item updated: ${currentData}`);
-            }
-            else {
-                this.webapiService.postApi(this.paginationApiPostUrl, tempParams, null, null, null, null, true).subscribe(async (resp) => {
-                    const databaseRecord = resp.dataSet[0];
-                    if (databaseRecord) {
-                        if (actionType === ActionType.Update) {
-                            const indexToUpdate = currentData.data.dataSet.findIndex(item => item.Id === databaseRecord.Id);
-                            if (indexToUpdate !== -1) {
-                                // Create a new object with the updated name
-                                const updatedItem = { ...currentData.data.dataSet[indexToUpdate], ...databaseRecord };
-                                // Replace the old item with the updated one
-                                currentData.data.dataSet[indexToUpdate] = updatedItem;
-                                this.handleGetDataBindingComplete(currentData.data, true);
-                                await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
-                                console.log(`Item updated: ${currentData}`);
-                            }
-                            else {
-                                console.log("Item not found with ID:", databaseRecord.Id);
-                            }
-                        }
-                        else if (actionType === ActionType.Add && currentData.gridState.skip < 20) {
-                            currentData.data.dataSet.unshift(databaseRecord);
-                            this.handleGetDataBindingComplete(currentData.data, true);
-                            await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
-                            this.handleGetDataBindingComplete(currentData.data, true);
-                            console.log(`Item updated: ${currentData}`);
-                        }
-                    }
-                    else {
-                        // Unable to get data, refresh the whole grid data from API
-                        this.getGridData();
-                    }
-                });
-            }
-        }
-        else {
-            // Unable to get from indexedDB straight get from API
-            this.getGridData();
-        }
-    }
+    // commented out for future reference and re-develop.
+    // private async subscribeCacheDataChanges() {
+    //   const cacheInfo = this.zgridbinding.data.CacheInfo;
+    //   if (cacheInfo && !cacheInfo.DisableCacheData) {
+    //     // cannot use main service here. will get circular error when build lib
+    //     //this.mainService.joinProjectSignalR();
+    //     const callBackFunction = `${cacheInfo.Name}_handleReceivedMessage`;
+    //     // create and bind a function to be called back for the grid in the group trigger by signalR.
+    //     if (!this.grp.signalRCallbackHandler) {
+    //       this.grp.signalRCallbackHandler = {};
+    //     }
+    //     this.grp.signalRCallbackHandler[callBackFunction] = this.handleReceivedMessage.bind(this);
+    //     const generatedCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
+    //     if (generatedCacheInfo.definedDatabase && generatedCacheInfo.definedTable) {
+    //       generatedCacheInfo.definedDatabase.forEach(db => {
+    //         generatedCacheInfo.definedTable.forEach(table => {
+    //           const eventName = `${db}|${table}`;
+    //           console.log(`Listening to event name: ${eventName}`);
+    //           this.signalrService.subscribeToEvent(this.grp, `${eventName}`, `group.signalRCallbackHandler.${callBackFunction}`);
+    //         });
+    //       });
+    //     }
+    //   }
+    // }
+    // async handleReceivedMessage(group: ZGroup, result: any, eventName: string) {
+    //   console.log(`The Signalr trigger has been detected. Now, proceed to update the cache and grid data.`);
+    //   const responsedResult = JSON.parse(result);
+    //   const actionType = responsedResult.Action;
+    //   const responsedResultId = responsedResult['Id'];
+    //   const tempParams = ZComponentHelper.deepClone(this.params);
+    //   const currentDataCacheInfo = this.gridService.generateCacheInfo(this.zgridbinding.data);
+    //   const currentData = await this.offlineDatabaseService.getItemByKey(currentDataCacheInfo, currentDataCacheInfo.offlineDatabaseKey);
+    //   if (currentData) {
+    //     tempParams.filters = `Id=${responsedResultId}`;
+    //     if (actionType === ActionType.Delete) {
+    //       currentData.data.dataSet = currentData.data.dataSet.filter(item => item.Id !== parseInt(responsedResultId));
+    //       this.handleGetDataBindingComplete(currentData.data, true);
+    //       await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
+    //       this.handleGetDataBindingComplete(currentData.data, true);
+    //       console.log(`Item updated: ${currentData}`);
+    //     }
+    //     else {
+    //       this.webapiService.postApi(this.paginationApiPostUrl, tempParams, null, null, null, null, true).subscribe(async resp => {
+    //         const databaseRecord = resp.dataSet[0];
+    //         if (databaseRecord) {
+    //           if (actionType === ActionType.Update) {
+    //             const indexToUpdate = currentData.data.dataSet.findIndex(item => item.Id === databaseRecord.Id);
+    //             if (indexToUpdate !== -1) {
+    //               // Create a new object with the updated name
+    //               const updatedItem = { ...currentData.data.dataSet[indexToUpdate], ...databaseRecord };
+    //               // Replace the old item with the updated one
+    //               currentData.data.dataSet[indexToUpdate] = updatedItem;
+    //               this.handleGetDataBindingComplete(currentData.data, true);
+    //               await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
+    //               console.log(`Item updated: ${currentData}`);
+    //             } else {
+    //               console.log("Item not found with ID:", databaseRecord.Id);
+    //             }
+    //           }
+    //           else if (actionType === ActionType.Add && currentData.gridState.skip < 20) {
+    //             currentData.data.dataSet.unshift(databaseRecord);
+    //             this.handleGetDataBindingComplete(currentData.data, true);
+    //             await this.offlineDatabaseService.updateItem(currentDataCacheInfo, currentData);
+    //             this.handleGetDataBindingComplete(currentData.data, true);
+    //             console.log(`Item updated: ${currentData}`);
+    //           }
+    //         }
+    //         else {
+    //           // Unable to get data, refresh the whole grid data from API
+    //           this.getGridData();
+    //         }
+    //       });
+    //     }
+    //   }
+    //   else {
+    //     // Unable to get from indexedDB straight get from API
+    //     this.getGridData();
+    //   }
+    // }
     afterDataBinded(data) {
         // allow to call back project page after data binded.
         let bindedValue = this.zgridbinding.data['AfterDataBinded'];
@@ -3322,7 +3327,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         this.loggingService.debugLog('generated grid columns', this.gridSetting);
     }
 }
-ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.OfflineDatabaseService }, { token: i2.SignalrService }, { token: ZGridService }, { token: i2.LoggingService }], target: i0.ɵɵFactoryTarget.Directive });
+ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.SignalrService }, { token: ZGridService }, { token: i2.LoggingService }, { token: i2.StateSettingService }], target: i0.ɵɵFactoryTarget.Directive });
 ZGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.3", type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: { zgridbinding: "zgridbinding" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZGridBindingDirective, decorators: [{
             type: Directive,
@@ -3332,7 +3337,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GridComponent]
-                }] }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.OfflineDatabaseService }, { type: i2.SignalrService }, { type: ZGridService }, { type: i2.LoggingService }]; }, propDecorators: { zgridbinding: [{
+                }] }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.SignalrService }, { type: ZGridService }, { type: i2.LoggingService }, { type: i2.StateSettingService }]; }, propDecorators: { zgridbinding: [{
                 type: Input
             }] } });
 
@@ -4388,7 +4393,7 @@ class UibulletinComponent {
     }
 }
 UibulletinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UibulletinComponent, deps: [{ token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: MainService }, { token: i2.SignalrService }, { token: i3$2.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-UibulletinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UibulletinComponent, selector: "app-uibulletin", inputs: { group: "group" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true, read: ViewContainerRef }, { propertyName: "bulletinTemplate", first: true, predicate: ["bulletinTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ion-button (click)=\"showBulletinMessage()\" fill=\"none\" size=\"small\" *ngIf=\"showBulletinIcon\">\r\n\r\n  <ion-label [title]=\"title\">\r\n    <ion-badge color=\"danger\" class=\"pending-counter\"\r\n               *ngIf=\"bulletinMessages.length > 0\">\r\n    </ion-badge>\r\n    <ion-label><fa-icon [icon]=\"['fas', 'bell']\" size=\"lg\" style=\"margin-right: 5px;\"></fa-icon> Notification</ion-label>\r\n    <ion-ripple-effect></ion-ripple-effect>\r\n  </ion-label>\r\n\r\n  <!--<fa-icon [icon]=\"['fas', 'bell']\" style=\"margin-right: 5px;\"></fa-icon> Bulletin-->\r\n</ion-button>\r\n<ng-template #bulletinTemplate>\r\n  <div *ngIf=\"bulletinMessages.length > 0\">\r\n    <!--<h6>Bulletin</h6>-->\r\n    <ul>\r\n      <li *ngFor=\"let msg of bulletinMessages\">{{ msg }}</li>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"bulletinMessages.length <= 0\">\r\n    {{ defaultMessage }}\r\n  </div>\r\n</ng-template>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.pending-counterX{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:2px;text-overflow:ellipsis;top:2px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:2.2em}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;left:8px;top:7px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:1.5em}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+UibulletinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UibulletinComponent, selector: "app-uibulletin", inputs: { group: "group" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true, read: ViewContainerRef }, { propertyName: "bulletinTemplate", first: true, predicate: ["bulletinTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ion-button (click)=\"showBulletinMessage()\" fill=\"none\" size=\"small\" *ngIf=\"showBulletinIcon\">\r\n\r\n  <ion-label [title]=\"title\">\r\n    <ion-badge color=\"danger\" class=\"pending-counter\"\r\n               *ngIf=\"bulletinMessages.length > 0\">\r\n    </ion-badge>\r\n    <ion-label><fa-icon [icon]=\"['fas', 'bell']\" size=\"lg\" style=\"margin-right: 5px;\"></fa-icon> Notification</ion-label>\r\n    <ion-ripple-effect></ion-ripple-effect>\r\n  </ion-label>\r\n\r\n  <!--<fa-icon [icon]=\"['fas', 'bell']\" style=\"margin-right: 5px;\"></fa-icon> Bulletin-->\r\n</ion-button>\r\n<ng-template #bulletinTemplate>\r\n  <div *ngIf=\"bulletinMessages.length > 0\">\r\n    <!--<h6>Bulletin</h6>-->\r\n    <ul>\r\n      <li *ngFor=\"let msg of bulletinMessages\">{{ msg }}</li>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"bulletinMessages.length <= 0\">\r\n    {{ defaultMessage }}\r\n  </div>\r\n</ng-template>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.pending-counterX{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:2px;text-overflow:ellipsis;top:2px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:2.2em}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;left:8px;top:7px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:1.5em}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { 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"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UibulletinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uibulletin', template: "<ion-button (click)=\"showBulletinMessage()\" fill=\"none\" size=\"small\" *ngIf=\"showBulletinIcon\">\r\n\r\n  <ion-label [title]=\"title\">\r\n    <ion-badge color=\"danger\" class=\"pending-counter\"\r\n               *ngIf=\"bulletinMessages.length > 0\">\r\n    </ion-badge>\r\n    <ion-label><fa-icon [icon]=\"['fas', 'bell']\" size=\"lg\" style=\"margin-right: 5px;\"></fa-icon> Notification</ion-label>\r\n    <ion-ripple-effect></ion-ripple-effect>\r\n  </ion-label>\r\n\r\n  <!--<fa-icon [icon]=\"['fas', 'bell']\" style=\"margin-right: 5px;\"></fa-icon> Bulletin-->\r\n</ion-button>\r\n<ng-template #bulletinTemplate>\r\n  <div *ngIf=\"bulletinMessages.length > 0\">\r\n    <!--<h6>Bulletin</h6>-->\r\n    <ul>\r\n      <li *ngFor=\"let msg of bulletinMessages\">{{ msg }}</li>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"bulletinMessages.length <= 0\">\r\n    {{ defaultMessage }}\r\n  </div>\r\n</ng-template>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.pending-counterX{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:2px;text-overflow:ellipsis;top:2px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:2.2em}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;left:8px;top:7px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:1.5em}\n"] }]
@@ -4845,7 +4850,7 @@ class UiactionbuttonComponent extends ButtonFieldBase {
     }
 }
 UiactionbuttonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiactionbuttonComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }, { token: i2$1.ActionSheetController }], target: i0.ɵɵFactoryTarget.Component });
-UiactionbuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiactionbuttonComponent, selector: "app-uiactionbutton", usesInheritance: true, ngImport: i0, template: "<ion-button (click)=\"onAction()\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            *ngIf=\"isMobileScreen() && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            class=\"ion-activatable ripple-parent\">\r\n  <!-- <ion-icon name=\"more\" slot=\"icon-only\"></ion-icon> -->\r\n  <fa-icon [icon]=\"'ellipsis-v'\"></fa-icon>\r\n  <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\r\n</ion-button>\r\n", styles: [":host ion-button{width:48px;height:48px;justify-content:center;margin-right:4px;cursor:pointer}:host ion-button fa-icon{text-align:center;justify-content:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none;text-decoration:none;font-size:21px}:host ion-button:hover{color:#fff;background-color:#0006;border-radius:20px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: 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"] }] });
+UiactionbuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiactionbuttonComponent, selector: "app-uiactionbutton", usesInheritance: true, ngImport: i0, template: "<ion-button (click)=\"onAction()\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            *ngIf=\"isMobileScreen() && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            class=\"ion-activatable ripple-parent\">\r\n  <!-- <ion-icon name=\"more\" slot=\"icon-only\"></ion-icon> -->\r\n  <fa-icon [icon]=\"'ellipsis-v'\"></fa-icon>\r\n  <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\r\n</ion-button>\r\n", styles: [":host ion-button{width:48px;height:48px;justify-content:center;margin-right:4px;cursor:pointer}:host ion-button fa-icon{text-align:center;justify-content:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none;text-decoration:none;font-size:21px}:host ion-button:hover{color:#fff;background-color:#0006;border-radius:20px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: UiactionbuttonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uiactionbutton', template: "<ion-button (click)=\"onAction()\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            *ngIf=\"isMobileScreen() && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            class=\"ion-activatable ripple-parent\">\r\n  <!-- <ion-icon name=\"more\" slot=\"icon-only\"></ion-icon> -->\r\n  <fa-icon [icon]=\"'ellipsis-v'\"></fa-icon>\r\n  <ion-ripple-effect type=\"unbounded\"></ion-ripple-effect>\r\n</ion-button>\r\n", styles: [":host ion-button{width:48px;height:48px;justify-content:center;margin-right:4px;cursor:pointer}:host ion-button fa-icon{text-align:center;justify-content:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none;text-decoration:none;font-size:21px}:host ion-button:hover{color:#fff;background-color:#0006;border-radius:20px}\n"] }]
@@ -5590,7 +5595,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
     }
 }
 ZbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zbuttons", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
@@ -5861,7 +5866,7 @@ class DataListingFieldBase extends FieldBase {
         const func = ZComponentHelper.getGroupEvalValue.call(this, style);
         if (typeof func === 'function') {
             const callFunc = func.bind(this.group.ctrlScope);
-            return callFunc(dataItem);
+            return callFunc(dataItem, columnField);
         }
         else if (typeof func === 'string') {
             return func;
@@ -6859,7 +6864,7 @@ class ZdatetimeComponent extends InputFieldBase {
     }
 }
 ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".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)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { type: i2$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i2$3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "focusableId", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i2$3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": DateIonicMinMaxParser, "dateFormatIonic": DateIonicFormatParser, "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser } });
+ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".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)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }, { type: i2$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i2$3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "focusableId", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i2$3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": DateIonicMinMaxParser, "dateFormatIonic": DateIonicFormatParser, "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zdatetime", template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".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)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"] }]
@@ -7245,7 +7250,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
     }
 }
 ZworkflowbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZworkflowbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], 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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZworkflowbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zworkflowbuttons', template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
@@ -7418,6 +7423,7 @@ class ZselectmultipleComponent extends InputFieldBase {
         this.cacheService = cacheService;
         this.fieldService = fieldService;
         this.allDataItems = [];
+        this.isFirstOpened = false;
         this.items = [];
         this.infinitezData = [];
         this.hasSearched = false;
@@ -7587,9 +7593,11 @@ class ZselectmultipleComponent extends InputFieldBase {
             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);
+            if (pageNo < 1) {
+                this.isLoading = true;
+            }
             return newItems$(null, searchTerm, pageNo, this.group.ctrlScope, this.data).pipe(map(response => ({ response, eventType, searchTerm })));
         }), tap(({ response, eventType }) => {
             const dataSet = response.dataSet;
@@ -7779,14 +7787,6 @@ class ZselectmultipleComponent extends InputFieldBase {
             this.stateChange.next({ state: this.state, eventType: 'Filter', searchTerm: searchTerm });
         }
     }
-    onComboOpened() {
-        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$) {
-            if (this.comboboxComponent?.optionsList?.pageChange) {
-                this.comboboxComponent.optionsList.scrollToIndex(0);
-            }
-            this.comboboxComponent.optionsList.pageChange.subscribe((state) => this.stateChange.next({ state: state, eventType: 'Opened', searchTerm: '' }));
-        }
-    }
     onMultiSelectOpen(event) {
         // Ensure multiselect value meets the search length requirement
         if (this.data.SearchLength && this.multiselect.value.length < this.data.SearchLength) {
@@ -7794,26 +7794,35 @@ class ZselectmultipleComponent extends InputFieldBase {
             return; // Early return to avoid unnecessary checks
         }
     }
+    onComboOpened() {
+        this.handleOpened(this.comboboxComponent, 'Opened');
+    }
     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: '' }));
-        }
+        this.handleOpened(this.multiselect, 'Opened');
     }
     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: '' }));
+        this.handleOpened(this.dropdownlistComponent, 'Opened');
+    }
+    handleOpened(component, eventType) {
+        if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$ && component) {
+            this.isFirstOpened = true;
+            component.optionsList.pageChange.subscribe((state) => {
+                this.stateChange.next({ state: state, eventType: eventType, searchTerm: '' });
+                this.scrollToTop(component);
+            });
+        }
+    }
+    scrollToTop(component) {
+        // 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 (component.optionsList?.pageChange && this.isFirstOpened) {
+            component.optionsList.scrollToIndex(0);
+            this.isFirstOpened = false;
         }
     }
     handleClose(event) {
         if (this.data.HasInfiniteScroll && this.data.InfiniteScroll$ && this.hasSearched) {
+            this.isFirstOpened = false;
             this.stateChange.next({ state: this.state, eventType: 'Closed', searchTerm: '' });
         }
     }
@@ -7912,6 +7921,9 @@ class ZselectmultipleComponent extends InputFieldBase {
                 zdataModel = this.infinitezData.filter(x => x[valueField] === value);
                 this.modelzData = zdataModel.slice();
             }
+            else {
+                this.reloadInfiniteData();
+            }
             if (this.itemDataField.startsWith('group.zData.')) {
                 this.group.zData[this.itemDataField.slice(12)] = zdataModel;
             }
@@ -8075,6 +8087,7 @@ class SfdatetimepickerComponent extends InputFieldBase {
         super(componentService);
         this.minDate = null;
         this.maxDate = null;
+        this.disableStrictMode = false;
         this.setDateRange = (MinDate, MaxDate) => {
             if (!isNaN(Date.parse(MinDate))) {
                 this.minDate = new Date(MinDate);
@@ -8087,6 +8100,7 @@ class SfdatetimepickerComponent extends InputFieldBase {
     ngOnInit() {
         super.setupInnerField();
         this.interval = this.data.StepValue ? Number(this.data.StepValue) : 30;
+        this.disableStrictMode = !this.data.DisableStrictMode;
         this.setMinAndMaxDateRange();
     }
     ngAfterViewInit() {
@@ -8101,10 +8115,10 @@ class SfdatetimepickerComponent extends InputFieldBase {
     }
 }
 SfdatetimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
+SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-sfdatetimepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"] }]
+            args: [{ selector: 'app-sfdatetimepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [value]=\"form.get(data.Value).value | dateParser : data\" \r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"data.IsRequired\"\r\n                        [placeholder]=\"data.PlaceHolder\" \r\n                        [showClearButton]=\"data.ClearButton\" \r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\" \r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div> ", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { sfdatetimepicker: [{
                 type: ViewChild,
                 args: ["sfdatetimepicker"]
@@ -9226,7 +9240,7 @@ class InputFieldAddOnsComponent extends InputFieldBase {
     }
 }
 InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"], components: [{ 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.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { 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"] }] });
+InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"], components: [{ 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.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"] }]
@@ -9296,7 +9310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 /********** Angular **********/
 class ZgridComponent extends DataListingFieldBase {
-    constructor(componentService, fontAweSomeService, activatedRoute, router, formBuilder, webApiService, toastService, zcoreService, storageService, mainService, cdr, gridService, offlineDatabaseService, resourceApiService) {
+    constructor(componentService, fontAweSomeService, activatedRoute, router, formBuilder, webApiService, toastService, zcoreService, storageService, mainService, cdr, gridService, stateSettingService, resourceApiService, authService) {
         super(componentService);
         this.componentService = componentService;
         this.fontAweSomeService = fontAweSomeService;
@@ -9310,8 +9324,9 @@ class ZgridComponent extends DataListingFieldBase {
         this.mainService = mainService;
         this.cdr = cdr;
         this.gridService = gridService;
-        this.offlineDatabaseService = offlineDatabaseService;
+        this.stateSettingService = stateSettingService;
         this.resourceApiService = resourceApiService;
+        this.authService = authService;
         // @ViewChild(ZGridBindingDirective, { static: false }) zgrid: ZGridBindingDirective;
         this.zgrid = null;
         this.oauthUrl = null;
@@ -9379,12 +9394,12 @@ class ZgridComponent extends DataListingFieldBase {
                 console.log(this.data);
             }
         };
-        this.oauthUrl = this.zcoreService.getEnvironment().e1OauthUrl + "/";
+        this.environment = this.zcoreService.getEnvironment();
+        this.oauthUrl = this.environment.e1OauthUrl + "/";
         this.allResults = this.allResults.bind(this);
         this.refreshData = this.refreshData.bind(this);
         this.clearData = this.clearData.bind(this);
     }
-    ;
     ngOnInit() {
         super.setupInnerField();
         this.setupFilterFeature();
@@ -9401,6 +9416,7 @@ class ZgridComponent extends DataListingFieldBase {
     }
     ngAfterViewChecked() {
         const isBackNavigated = (sessionStorage.getItem("navigatedReloadGrid") === 'true');
+        this.showHideRestoreGridSettingButton();
         if (isBackNavigated) {
             if (!this.isUseLocalData()) {
                 this.getData();
@@ -9935,35 +9951,53 @@ class ZgridComponent extends DataListingFieldBase {
     }
     saveGridSettings() {
         const gridStateLogic = this.gridService.getGridStateLogic(this.data);
-        const cacheName = this.gridService.getGridStateCacheStorageKey(GridSettingType.SavedSetting, this.data);
-        this.zgrid.gridSetting.columnConfigurations = ZComponentHelper.getGridColumnsConfig(this.zgrid.grid.columns);
-        const settingConfig = {
-            columnConfigurations: this.zgrid.gridSetting.columnConfigurations
+        const cacheName = this.stateSettingService.getStorageCacheKey(StateType.savedSetting, this.data);
+        const previousCachedData = this.gridService.getStateCacheByName(cacheName);
+        const columnConfigurations = ZComponentHelper.getGridColumnsConfig(this.zgrid.grid.columns);
+        const settingConfig = { columnConfigurations };
+        this.zgrid.gridSetting = {
+            ...this.zgrid.gridSetting,
+            columnConfigurations
         };
-        if (gridStateLogic === GridStateLogicType.SettingOnly) {
+        if (gridStateLogic === StateType.cachedDataSetting) {
             settingConfig.gridState = this.zgrid.gridSetting.gridState;
         }
-        const gridSetting = JSON.stringify(settingConfig);
-        sessionStorage.setItem(cacheName, gridSetting);
-        const jsonCache = {
-            FileName: cacheName,
-            JsonContent: gridSetting
+        this.gridService.setStateToCache(cacheName, settingConfig);
+        const stateSettingInfo = {
+            projectCode: this.environment.projectCodes[0],
+            fieldElementName: this.data.FieldElementName,
+            componentUniqueKey: this.data.CacheInfo.Name ?? this.data.FieldElementName,
+            userId: this.authService.e1Token.userName,
+            stateType: StateType.savedSetting,
+            stateData: JSON.stringify(settingConfig),
+            storageCacheName: cacheName
         };
-        this.offlineDatabaseService.saveJsonCache(jsonCache).subscribe();
+        if (previousCachedData && previousCachedData.id) {
+            stateSettingInfo.id = previousCachedData.id;
+        }
+        // dont need to wait, as it will first save to the browser storage.
+        this.stateSettingService.saveStateSetting(stateSettingInfo).subscribe();
         this.showHideRestoreGridSettingButton();
         this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
     }
     restoreGridSettings() {
+        // Ensure columns are sorted based on their original order
         this.columns.sort((a, b) => a.originalOrderIndex - b.originalOrderIndex);
-        this.generateGridColumns().subscribe(resp => {
+        // Generate grid columns and load data
+        this.generateGridColumns().subscribe(() => {
             this.getData();
         });
-        const cacheName = this.gridService.getGridStateCacheStorageKey(GridSettingType.SavedSetting, this.data);
-        sessionStorage.removeItem(cacheName);
-        this.showHideRestoreGridSettingButton();
-        this.offlineDatabaseService.removeJsonCache({
-            FileName: cacheName
-        }).subscribe();
+        // Call the gridService.getStateCache and handle the result via subscription
+        this.gridService.getStateCache(StateType.savedSetting, this.data).subscribe((cachedData) => {
+            if (cachedData) {
+                // Cache found, proceed with deletion
+                this.gridService.deleteStateCache(StateType.savedSetting, this.data);
+                // Toggle visibility of the restore button
+                this.showHideRestoreGridSettingButton();
+                // Delete the state setting based on the cache data ID
+                this.stateSettingService.deleteStateSetting(cachedData.id).subscribe();
+            }
+        });
     }
     gridCallback(group) {
         if (this.data['AfterloadCallback']) {
@@ -9986,7 +10020,6 @@ class ZgridComponent extends DataListingFieldBase {
                 Type: this.data.GridButtonFieldName_WF ? "zworkflowbuttons" : "zbuttons"
             };
         }
-        this.showHideRestoreGridSettingButton();
     }
     setDateColForFiltering() {
         const gridData = this.getGridData();
@@ -10003,9 +10036,15 @@ class ZgridComponent extends DataListingFieldBase {
     }
     showHideRestoreGridSettingButton() {
         if (this.data.CacheInfo?.EnableSaveState) {
-            const settingCacheName = this.gridService.getGridStateCacheStorageKey(GridSettingType.SavedSetting, this.data);
-            const settingCacheValue = sessionStorage.getItem(settingCacheName);
-            this.showRestoreGridSettingButton = settingCacheValue ? true : false;
+            this.showRestoreGridSettingButton = false;
+            const stateType = this.gridService.getGridStateLogic(this.data);
+            if (stateType === StateType.savedSetting || stateType === StateType.savedAndCachedDataSetting) {
+                const settingCacheName = this.stateSettingService.getStorageCacheKey(stateType, this.data);
+                const settingCacheValue = localStorage.getItem(settingCacheName);
+                if (settingCacheValue) {
+                    this.showRestoreGridSettingButton = true;
+                }
+            }
         }
     }
     //#endregion
@@ -10369,16 +10408,16 @@ class ZgridComponent extends DataListingFieldBase {
         this.zgrid.gridSetting.gridState.skip = 0;
     }
 }
-ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i4$1.FormBuilder }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }, { token: ZGridService }, { token: i2.OfflineDatabaseService }, { token: i2.ResourceApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n  <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n      <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n    </ng-template> -->\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\">\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n            <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n            <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n                <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n                </ion-button>\r\n                <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>\r\n                  {{ getToolBarItemLabelName('Advanced Search') }}\r\n                </span>\r\n              </div>\r\n              <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n                           [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                           [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n                           [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [editor]=\"col.editorType\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                                [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n                                          [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </kendo-grid-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                  <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <div *ngSwitchCase=\"'number'\">\r\n                <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n              <div *ngSwitchDefault>\r\n                <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n                  -l\r\n\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n            <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n            {{ col.ClickableIcons }}\r\n            <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n            </ion-button>\r\n            </span> -->\r\n            <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n                </fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton>\r\n              </ng-template>\r\n            </span>\r\n            <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n            <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n              {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n            </span> -->\r\n          </ng-template>\r\n          <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-grid-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n      </kendo-grid>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$2.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i16.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { 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: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ 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: i7$2.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$2.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5.DatePipe, "number": i5.DecimalPipe }, animations: [
+ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i4$1.FormBuilder }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }, { token: ZGridService }, { token: i2.StateSettingService }, { token: i2.ResourceApiService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
+ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n  <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n      <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n    </ng-template> -->\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\">\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.CacheInfo?.EnableSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n            <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n            <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n                <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n                </ion-button>\r\n                <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>\r\n                  {{ getToolBarItemLabelName('Advanced Search') }}\r\n                </span>\r\n              </div>\r\n              <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n                           [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                           [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n                           [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [editor]=\"col.editorType\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                                [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n                                          [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </kendo-grid-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                  <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <div *ngSwitchCase=\"'number'\">\r\n                <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n              <div *ngSwitchDefault>\r\n                <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n                  -l\r\n\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n            <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n            {{ col.ClickableIcons }}\r\n            <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n            </ion-button>\r\n            </span> -->\r\n            <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n                </fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton>\r\n              </ng-template>\r\n            </span>\r\n            <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n            <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n              {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n            </span> -->\r\n          </ng-template>\r\n          <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-grid-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n      </kendo-grid>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$2.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i16.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { 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: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ 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: i7$2.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$2.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5.DatePipe, "number": i5.DecimalPipe }, animations: [
         hideAndShowVerticalAnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zgrid", animations: [
                         hideAndShowVerticalAnimation
-                    ], template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n  <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n      <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n    </ng-template> -->\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\">\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n            <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n            <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n                <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n                </ion-button>\r\n                <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>\r\n                  {{ getToolBarItemLabelName('Advanced Search') }}\r\n                </span>\r\n              </div>\r\n              <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n                           [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                           [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n                           [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [editor]=\"col.editorType\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                                [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n                                          [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </kendo-grid-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                  <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <div *ngSwitchCase=\"'number'\">\r\n                <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n              <div *ngSwitchDefault>\r\n                <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n                  -l\r\n\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n            <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n            {{ col.ClickableIcons }}\r\n            <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n            </ion-button>\r\n            </span> -->\r\n            <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n                </fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton>\r\n              </ng-template>\r\n            </span>\r\n            <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n            <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n              {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n            </span> -->\r\n          </ng-template>\r\n          <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-grid-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n      </kendo-grid>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i4$1.FormBuilder }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.ZCoreService }, { type: i2.StorageSessionService }, { type: MainService }, { type: i0.ChangeDetectorRef }, { type: ZGridService }, { type: i2.OfflineDatabaseService }, { type: i2.ResourceApiService }]; }, propDecorators: { tooltipDir: [{
+                    ], template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n  <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n      <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n    </ng-template> -->\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\">\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.CacheInfo?.EnableSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n            <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n            <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n                <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n            </button>\r\n            <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n            </button>\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n                </ion-button>\r\n                <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n                <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>\r\n                  {{ getToolBarItemLabelName('Advanced Search') }}\r\n                </span>\r\n              </div>\r\n              <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n                           [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                           [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n                           [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [editor]=\"col.editorType\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                                [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n                                          [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </kendo-grid-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n                                               [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                  <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <div *ngSwitchCase=\"'number'\">\r\n                <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n              <div *ngSwitchDefault>\r\n                <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n                <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                             popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                             style=\"padding-left: 2px; opacity: 0.5;\">\r\n                  <span class=\"k-icon k-i-warning\"></span>\r\n                  <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n                  -l\r\n\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                    {{ col.Name }} required.\r\n                  </ion-label>\r\n                  <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                    {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                  </ion-label>\r\n                </kendo-popup>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n            <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n            <ion-button color=\"light\" size=\"small\">\r\n            {{ col.ClickableIcons }}\r\n            <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n            </ion-button>\r\n            </span> -->\r\n            <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n                </fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton>\r\n              </ng-template>\r\n            </span>\r\n            <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n            <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n              {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n            </span> -->\r\n          </ng-template>\r\n          <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n              <span *ngSwitchDefault>\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-grid-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n      </kendo-grid>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i4$1.FormBuilder }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.ZCoreService }, { type: i2.StorageSessionService }, { type: MainService }, { type: i0.ChangeDetectorRef }, { type: ZGridService }, { type: i2.StateSettingService }, { type: i2.ResourceApiService }, { type: i2.AuthService }]; }, propDecorators: { tooltipDir: [{
                 type: ViewChild,
                 args: [TooltipDirective]
             }], elementContainer: [{
@@ -10461,7 +10500,7 @@ class ZgridContainerComponent extends FieldBase {
     }
 }
 ZgridContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridContainerComponent, deps: [{ token: ZComponentService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i2$5.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i2$5.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: 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$5.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: ZgridComponent, selector: "app-zgrid" }, { type: PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
+ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i2$5.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i2$5.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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$5.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: ZgridComponent, selector: "app-zgrid" }, { type: PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zgrid-container", template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"] }]
@@ -10821,7 +10860,7 @@ class ZmodalComponent extends DialogContentBase {
     }
 }
 ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, deps: [{ token: i6.DialogRef }, { token: i2$1.ModalController }, { token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }, { token: i2$1.Platform }, { token: i2.AlertService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5.JsonPipe } });
+ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmodal', template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
@@ -10929,7 +10968,7 @@ class ZmodalMobileComponent {
     }
 }
 ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5.JsonPipe } });
+ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zmodal", template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
@@ -12075,7 +12114,7 @@ class ZtreeComponent extends DataListingFieldBase {
     }
 }
 ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }, { propertyName: "zinput_textboxList", predicate: ["zinput_textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$b.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: 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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$b.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$b.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$b.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$b.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$b.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$b.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$b.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$b.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }, { propertyName: "zinput_textboxList", predicate: ["zinput_textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$b.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$b.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$b.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$b.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$b.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$b.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$b.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$b.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$b.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"] }]
@@ -12627,7 +12666,7 @@ class ZtreelistComponent extends DataListingFieldBase {
     }
 }
 ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.WebApiService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n    <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i4$2.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { 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: i16.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$2.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i4$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$2.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], 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: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$2.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5.DatePipe, "number": i5.DecimalPipe, "htmlSanitize": HtmlSanitizePipe, "titlecase": i5.TitleCasePipe } });
+ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n    <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i4$2.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { 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: i16.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$2.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i4$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$2.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], 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: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$2.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5.DatePipe, "number": i5.DecimalPipe, "htmlSanitize": HtmlSanitizePipe, "titlecase": i5.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztreelist", template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n    <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
@@ -12753,12 +12792,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 /********** Angular **********/
 class ZudfComponent extends ContainerFieldBase {
-    constructor(componentService, fieldService, toastService, componentErrorHandlerService, cdr) {
+    constructor(componentService, fieldService, toastService, componentErrorHandlerService, resourceApiService, cdr) {
         super(componentService);
         this.componentService = componentService;
         this.fieldService = fieldService;
         this.toastService = toastService;
         this.componentErrorHandlerService = componentErrorHandlerService;
+        this.resourceApiService = resourceApiService;
         this.cdr = cdr;
         // formFields: any[]; // populate using field element.
         this.componentProperties = new ZComponentProperties();
@@ -12791,12 +12831,13 @@ class ZudfComponent extends ContainerFieldBase {
         if (this.data.Value == undefined && this.data.FieldElementCode) {
             const fieldName = ZComponentHelper.getGroupValue(this.data.FieldElementCode, this.group);
             const fieldFormType = ZComponentHelper.getGroupValue(this.data.FieldElementFormType, this.group);
+            const formResource = this.resourceApiService.getCustomResource(this.data.CustomResource);
             if (fieldName) {
                 if (fieldFormType && fieldFormType == FormType.listField) {
-                    obs = this.fieldService.getListFieldByFieldElementName(fieldName);
+                    obs = this.fieldService.getListFieldByFieldElementName(fieldName, formResource);
                 }
                 else {
-                    obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
+                    obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields', null, formResource);
                 }
             }
         }
@@ -13686,12 +13727,12 @@ class ZudfComponent extends ContainerFieldBase {
         }
     }
 }
-ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZudfComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: i2.ComponentErrorHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZudfComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: i2.ComponentErrorHandlerService }, { token: i2.ResourceApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZudfComponent, selector: "app-zudf", usesInheritance: true, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"], components: [{ type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZudfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zudf', template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: i2.ComponentErrorHandlerService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: i2.ComponentErrorHandlerService }, { type: i2.ResourceApiService }, { type: i0.ChangeDetectorRef }]; } });
 var ComponentType;
 (function (ComponentType) {
     ComponentType["text"] = "text";
@@ -13781,7 +13822,7 @@ class KcardComponent extends ContainerFieldBase {
     }
 }
 KcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, deps: [{ token: ZComponentService }, { token: MainService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { 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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { 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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kcard", template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"] }]