mmhglobal-dynamicform 2.30.0 → 2.32.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, of, forkJoin, tap as tap$1, map as map$1, first, isObservable, switchMap as switchMap$1, interval, takeWhile, from, Subject, delay as delay$1, filter, auditTime } from 'rxjs';
 import { tap, switchMap, map, take, delay, concatMap, ignoreElements } from 'rxjs/operators';
 import * as i2 from 'mmhglobal-zcore';
-import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, ActionType, DefaultMessage, DefaultDialogTitle, TriggerFromType, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
+import { ZGroup, FormType, ZComponentHelper, MESSAGETYPE, TriggerFromType, ActionType, DefaultMessage, DefaultDialogTitle, Delimiter, ZSelectPostApiParams, ComponentType as ComponentType$1, ZComponentProperties, SignalType, DropdownSearchOperator, InternalComponentType_DropDown, UploadMetaData, AttachmentConfig, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
 import * as i2$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 import * as i3 from 'mmhglobal-zmodal';
@@ -100,7 +100,7 @@ import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
 
 /********** Angular **********/
 class ZComponentDebugService {
-    constructor(router, alertService, authService, fieldService, resourceApiService, componentErrorHandlerService, toastService, modalService, webApiService, signalrService) {
+    constructor(router, alertService, authService, fieldService, resourceApiService, componentErrorHandlerService, toastService, modalService, webApiService, signalrService, zcoreService) {
         this.router = router;
         this.alertService = alertService;
         this.authService = authService;
@@ -111,8 +111,11 @@ class ZComponentDebugService {
         this.modalService = modalService;
         this.webApiService = webApiService;
         this.signalrService = signalrService;
+        this.zcoreService = zcoreService;
         this.groupsToSend = ['oauth'];
         this.eventName = 'FieldElement';
+        this.environment = null;
+        this.environment = this.zcoreService.getEnvironment();
     }
     get debug() {
         return this.scope.group._debug;
@@ -167,18 +170,18 @@ class ZComponentDebugService {
             onChangeWatchName: this.onChangeWatchName.bind(this),
             getWatchName: this.getWatchName.bind(this),
             fieldElementonEditorCodeChange: this.fieldElementonEditorCodeChange.bind(this),
-            gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', "FormField", this.group, "debugActivityLogField"),
+            gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', FormType.formField, this.group, "debugActivityLogField"),
             gridActivityLogOnItemClick: this.gridActivityLogOnItemClick.bind(this),
-            updateModel: this.updateModel.bind(this),
-            refreshWorkflowButtonData: this.loadWorkflowData.bind(this),
-            gridWorkflowButtonColumnFields: this.fieldService.getFormFieldCode('debugWorkflowButton', 'FormField', this.group, "debugWorkflowButtonField"),
-            gridWorkflowButtonOnItemClick: this.gridWorkflowButtonOnItemClick.bind(this)
+            updateModel: this.updateModel.bind(this)
         });
         if (!d.zData) {
             d.zData = { collectedActivities: [], activityCount: 0 };
         }
         me.subscription = d.subject.subscribe((event) => this.subjectEvent(event, d, this));
         this.patchFieldsProperty(fieldElements);
+        if (this.environment.loadViaAsset) {
+            return of({});
+        }
         return this.loadDebugZModel(me);
     }
     patchFieldsProperty(fieldElements) {
@@ -630,6 +633,7 @@ class ZComponentDebugService {
             .subscribe();
     }
     // ******************** Workflow Button ********************
+    // not in use, plan to enhance for the usage for future.
     loadWorkflowData() {
         const zgrid_WorkflowButtonGrid = ZComponentHelper.getComponent(this.debug, 'zgrid_WorkflowButtonGrid');
         if (zgrid_WorkflowButtonGrid) {
@@ -736,14 +740,14 @@ class ZComponentDebugService {
         return this.modalService.show(modalPageParams);
     }
 }
-ZComponentDebugService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZComponentDebugService, deps: [{ token: i1.Router }, { token: i2.AlertService }, { token: i2.AuthService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.ToastService }, { token: i3.ModalService }, { token: i2.WebApiService }, { token: i2.SignalrService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZComponentDebugService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZComponentDebugService, deps: [{ token: i1.Router }, { token: i2.AlertService }, { token: i2.AuthService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.ToastService }, { token: i3.ModalService }, { token: i2.WebApiService }, { token: i2.SignalrService }, { token: i2.ZCoreService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZComponentDebugService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZComponentDebugService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZComponentDebugService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.AlertService }, { type: i2.AuthService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.ToastService }, { type: i3.ModalService }, { type: i2.WebApiService }, { type: i2.SignalrService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.AlertService }, { type: i2.AuthService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.ToastService }, { type: i3.ModalService }, { type: i2.WebApiService }, { type: i2.SignalrService }, { type: i2.ZCoreService }]; } });
 
 /********** Angular **********/
 class MainService {
@@ -792,29 +796,77 @@ class MainService {
         this.oauthEnvironmentUrl = this.environment.e1OauthUrl + '/';
         this.router.events.subscribe((event) => {
             if (event instanceof NavigationStart) {
-                // Show progress spinner or progress bar
-                console.log(event);
-                this.toastService?.dismissAll();
-                this.alertService?.dismissAll();
-                this.modalService?.dismissAll();
-                // Reset the routeParam,backNavigationPath and related sessionStorage current page is startup page
-                if (this.getStartupPage() === event.url) {
-                    this.resetRouteParam();
-                }
+                this.handleNavigationStart(event);
             }
             if (event instanceof NavigationEnd) {
-                this.currentUrl = event.urlAfterRedirects;
-                // Hide progress spinner or progress bar
-                console.log(event);
+                this.handleNavigationEnd(event);
             }
             if (event instanceof NavigationError) {
-                // Hide progress spinner or progress bar
-                // Present error to user
-                console.log(event.error);
-                this.removeLastNavigateRecord();
+                this.handleNavigationError(event);
             }
         });
     }
+    dismissAllOverlays() {
+        this.toastService?.dismissAll();
+        this.alertService?.dismissAll();
+        this.modalService?.dismissAll();
+    }
+    handleNavigationStart(event) {
+        console.log(event);
+        this.navigationStartTime = performance.now();
+        this.previousUrl = this.currentUrl || window.location.pathname;
+        this.currentUrl = event.url;
+        const triggerType = this.previousUrl === this.currentUrl ? TriggerFromType.refreshStart : TriggerFromType.navigateStart;
+        this.updateAppMonPerfomance(triggerType, this.previousUrl, true).subscribe();
+        this.dismissAllOverlays();
+        if (this.getStartupPage() === event.url) {
+            this.resetRouteParam();
+        }
+    }
+    handleNavigationEnd(event) {
+        const duration = performance.now() - this.navigationStartTime;
+        const triggerType = this.previousUrl === this.currentUrl ? TriggerFromType.refreshEnd : TriggerFromType.navigateEnd;
+        this.updateAppMonPerfomance(triggerType, event.urlAfterRedirects, true, duration).subscribe();
+        this.currentUrl = event.urlAfterRedirects;
+        console.log(event);
+    }
+    handleNavigationError(event) {
+        const duration = performance.now() - this.navigationStartTime;
+        this.updateAppMonPerfomance(TriggerFromType.navigateError, this.previousUrl, false, duration).subscribe();
+        console.log(event.error);
+        this.removeLastNavigateRecord();
+    }
+    updateAppMonPerfomance(triggerType, url, isSuccess, duration) {
+        if (!this.resourceApiService.appmonDomainUrl) {
+            this.resourceApiService.appmonDomainUrl = sessionStorage.getItem('AppmonUrl');
+        }
+        const date = new Date();
+        const pad = (n) => n.toString().padStart(2, '0');
+        const timestamp = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${date.getMilliseconds().toString().padStart(7, '0')}`;
+        const currentDomain = window.location.origin; // Extract the current domain
+        if (!this.authService.e1Token || !this.resourceApiService.appmonDomainUrl) {
+            return of({});
+        }
+        const params = {
+            Url: `${currentDomain}${url}`,
+            IsAuthenticated: true,
+            Timestamp: timestamp,
+            Duration: duration ?? null,
+            RequestMethod: 'POST',
+            UserId: this.authService.userId,
+            UserName: this.authService.e1Token.userName,
+            Success: isSuccess,
+            Environment: null,
+            ProjectCode: this.environment.projectCodes[0],
+            SourceName: this.environment.projectCodes[0],
+            ComponentCode: null,
+            EventId: null,
+            EventType: triggerType,
+            SessionId: sessionStorage.getItem('sessionTabId')
+        };
+        // call the wfs webapi
+        return this.webApiService.httpPost$(`${this.resourceApiService.appmonDomainUrl}api/ApiSummaryInfos/`, params);
+    }
     dialogOpen(options) {
         return this.dialogService.open(options);
     }
@@ -1473,7 +1525,8 @@ class MainService {
         Object.assign(group.zModel, group.form.value);
         // Patch the form with the ZModel, mark it as dirty, and cache the ZModel
         const fg = group.form;
-        fg.patchValue(group.zModel);
+        const resultData = ZComponentHelper.removeTextEditorValueFromFormPatching(group.zModel, group);
+        fg.patchValue(resultData);
         fg.markAsDirty();
         this.cacheService.setCache(this.CLONE_NEW_MODEL_CACHE_KEY, group.zModel);
         // Call the newModel function for the group
@@ -1847,7 +1900,8 @@ class MainService {
     reloadDataAndWorkflowButton(zModel) {
         this.group.zModel = zModel;
         const fg = this.group.form;
-        fg.patchValue(this.group.zModel);
+        const resultData = ZComponentHelper.removeTextEditorValueFromFormPatching(this.group.zModel, this.group);
+        fg.patchValue(resultData);
         fg.markAsPristine();
         // Capture all workflow buttons
         const workflowButtons = Object.keys(this.group.zComponents)
@@ -4132,6 +4186,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: MainService }, { type: i1.ActivatedRoute }]; } });
 
+class UiheaderService {
+    constructor(translationService) {
+        this.translationService = translationService;
+    }
+    getTranslatedUserMenu(group, userPanelItems) {
+        if (this.translatedMenuItems && this.translatedMenuItems.length > 0) {
+            return of(this.translatedMenuItems);
+        }
+        return this.translationService.$translateItemList(userPanelItems, "text", { elementName: 'menu', group: group }).pipe(map$1(() => {
+            this.translatedMenuItems = userPanelItems;
+            return this.translatedMenuItems;
+        }));
+    }
+}
+UiheaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderService, deps: [{ token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
+UiheaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i2.TranslationService }]; } });
+
 /********** Angular **********/
 class UimenubuttonComponent {
     constructor(menuCtrl, router) {
@@ -4186,9 +4263,11 @@ class UibulletinComponent {
             this.webApiService.httpGet$(this.resourceApiService.getURL(this.environment.bulletinUrl), '').subscribe(resp => {
                 if (resp) {
                     const msg = [];
-                    if (resp.length > 0) {
+                    if (Array.isArray(resp) && resp.length > 0) {
                         resp.forEach((item) => {
-                            msg.push(item.Description);
+                            if (item.Description) {
+                                msg.push(item.Description);
+                            }
                         });
                     }
                     this.setBulletinMessages(msg);
@@ -4202,13 +4281,14 @@ class UibulletinComponent {
         }
     }
     setBulletinMessages(data) {
-        if (data.length > 0) {
+        this.bulletinMessages = []; // Initialize or clear the bulletin messages array
+        if (Array.isArray(data) && data.length > 0) {
             data.forEach((item) => {
                 if (item.Description) {
                     this.bulletinMessages.push(item.Description);
                 }
             });
-            this.title = this.bulletinMessages.length + " messages. Click to view messages.";
+            this.title = `${this.bulletinMessages.length} messages. Click to view messages.`;
         }
         else {
             this.title = "No message";
@@ -4699,13 +4779,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
 
 class UiheaderComponent {
     // backNavigate = null;
-    constructor(router, translationService, zcoreService, authService, fontAweSomeService, componentService) {
+    constructor(router, zcoreService, authService, fontAweSomeService, componentService, uiHeaderService) {
         this.router = router;
-        this.translationService = translationService;
         this.zcoreService = zcoreService;
         this.authService = authService;
         this.fontAweSomeService = fontAweSomeService;
         this.componentService = componentService;
+        this.uiHeaderService = uiHeaderService;
         this.isloading = true;
         this.showBulletinIcon = false;
         this.userPanelItems = [
@@ -4740,26 +4820,30 @@ class UiheaderComponent {
             });
             this.loadedEnvironmentProfileMenu = true;
         }
-        this.authService.userIsAuthenticated.subscribe(() => {
-            this.setUserProfile();
-            this.translateUserMenu();
-            this.showBulletinIcon = this.zcoreService.getEnvironment().bulletinUrl ? true : false;
+        this.authService.userIsAuthenticated.subscribe(isAuth => {
+            if (isAuth) {
+                this.setUserProfile();
+                this.uiHeaderService.getTranslatedUserMenu(this.group, this.userPanelItems).subscribe(resp => {
+                    if (resp && resp.length > 0) {
+                        this.userPanelItems = resp;
+                    }
+                });
+                this.showBulletinIcon = this.zcoreService.getEnvironment().bulletinUrl ? true : false;
+            }
             this.isloading = false;
         });
     }
     setUserProfile() {
         if (this.authService.e1Token) {
-            this.profileImgUrl = this.environment.e1OauthUrl + '/api/ProfileImage?id=' + this.authService.e1Token.myProfile.UserName + '&size=80x80';
             const _myProfile = this.authService.e1Token.myProfile;
             if (_myProfile) {
                 this.username = _myProfile.UserName;
                 this.userDisplayName = _myProfile.LastName;
+                this.usernameInitial = this.authService.getUsernameInitial();
+                this.authService.getUserProfileImage().subscribe(img => { this.profileImgUrl = img; });
             }
         }
     }
-    translateUserMenu() {
-        this.translationService.$translateItemList(this.userPanelItems, "text", { elementName: 'menu', group: this.group }).subscribe();
-    }
     onDialItemClick(event) {
         if (event.item.onClick) {
             event.item.onClick();
@@ -4784,12 +4868,12 @@ class UiheaderComponent {
         }
     }
 }
-UiheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderComponent, deps: [{ token: i1.Router }, { token: i2.TranslationService }, { token: i2.ZCoreService }, { token: i2.AuthService }, { token: i2.FontAweSomeService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiheaderComponent, selector: "app-uiheader", inputs: { group: "group", topFormHeader: "topFormHeader" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <div class=\"toolbar-container\" *ngIf=\"!isloading\">\r\n      <div class=\"toolbar-first-row\">\r\n        <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n\r\n        <ion-title class=\"toolbar-title\">\r\n          <div *ngIf=\"topFormHeader || (group && !group.isLoading && group.formHeader)\">\r\n            <ion-label class=\"toolbar-title-label\">{{ topFormHeader ? topFormHeader : group.formHeader }}</ion-label>\r\n          </div>\r\n        </ion-title>\r\n\r\n        <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel hoverable\">\r\n          <app-uibulletin *ngIf=\"showBulletinIcon\"></app-uibulletin>\r\n          <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n          <kendo-floatingactionbutton [dialItems]=\"userPanelItems\" [offset]=\"{x:'-5px', y:'-5px'}\"\r\n                                      [align]=\"{ vertical: 'top', horizontal: 'end' }\" [dialItemAnimation]=true buttonClass=\"user-panel-button\"\r\n                                      dialClass=\"user-panel-dial\" (dialItemClick)=\"onDialItemClick($event)\">\r\n            <ng-template kendoFloatingActionButtonTemplate>\r\n              <kendo-avatar shape=\"circle\" [imageSrc]=\"profileImgUrl\"></kendo-avatar>\r\n              <ion-label class=\"profile-username\">{{ userDisplayName }}</ion-label>\r\n            </ng-template>\r\n            <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n              <span [class.custom-focused-class]=\"isFocused\" class=\"user-panel-item\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"user-panel-item-icon\"></fa-icon>\r\n                <span class=\"user-panel-option-text\">{{ item.text }}</span>\r\n              </span>\r\n            </ng-template>\r\n          </kendo-floatingactionbutton>\r\n        </div>\r\n        <div *ngIf=\"group && isMobileScreen()\">\r\n          <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n            <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n          </ion-buttons>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Design 1 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <div class=\"nav-bar-container\">\r\n          <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n            <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n              <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"zcard-header-icon\"></fa-icon>\r\n                <span>{{ item.text }}</span>\r\n              </div>\r\n            </ng-template>\r\n          </kendo-breadcrumb>\r\n        </div>\r\n      </div> -->\r\n      <!-- Design 2 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n          <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n            <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n              <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\" [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n              <span>{{ item.text }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-breadcrumb>\r\n      </div> -->\r\n    </div>\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: ["ion-toolbar{--background: var(--ion-color-primary-shade);--color: var(--ion-color-primary-contrast);--min-height: var(--ion-header-height);box-shadow:0 2px 9px #ababab}app-uimenubutton{margin:auto}.toolbar-first-row{display:flex}.toolbar-second-row{margin-left:50px}.end-panel{display:flex;align-items:stretch;cursor:pointer}.profile-username{padding-right:10px;margin:auto auto auto 15px;font-size:var(--page-user-profile-font-size)}.toolbar-title-label{text-shadow:.5px .5px rgba(255,255,255,.48);font-size:var(--page-title-font-size)}.toolbar-title{margin-bottom:2px}.hoverable:hover{background:#ffffff24}:host ::ng-deep kendo-floatingactionbutton{max-height:60px;border-radius:10px}:host ::ng-deep kendo-floatingactionbutton .user-panel-button{background:transparent!important;border:none!important;outline:none}:host ::ng-deep kendo-floatingactionbutton:hover{background:rgba(0,0,0,.3)}:host ::ng-deep kendo-floatingactionbutton .k-fab{box-shadow:none;padding:12px}:host ::ng-deep kendo-floatingactionbutton .k-avatar-md{width:var(--ion-header-avatar-size);height:var(--ion-header-avatar-size);flex-basis:var(--ion-header-avatar-size)}\n"], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: UimenubuttonComponent, selector: "app-uimenubutton", inputs: ["group"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: UibulletinComponent, selector: "app-uibulletin", inputs: ["group"] }, { type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i2$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }, { 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+UiheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderComponent, deps: [{ token: i1.Router }, { token: i2.ZCoreService }, { token: i2.AuthService }, { token: i2.FontAweSomeService }, { token: ZComponentService }, { token: UiheaderService }], target: i0.ɵɵFactoryTarget.Component });
+UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiheaderComponent, selector: "app-uiheader", inputs: { group: "group", topFormHeader: "topFormHeader" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <div class=\"toolbar-container\" *ngIf=\"!isloading\">\r\n      <div class=\"toolbar-first-row\">\r\n        <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n\r\n        <ion-title class=\"toolbar-title\">\r\n          <div *ngIf=\"topFormHeader || (group && !group.isLoading && group.formHeader)\">\r\n            <ion-label class=\"toolbar-title-label\">{{ topFormHeader ? topFormHeader : group.formHeader }}</ion-label>\r\n          </div>\r\n        </ion-title>\r\n\r\n        <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel hoverable\">\r\n          <app-uibulletin *ngIf=\"showBulletinIcon\" [group]=\"group\"></app-uibulletin>\r\n          <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n          <kendo-floatingactionbutton [dialItems]=\"userPanelItems\" [offset]=\"{x:'-5px', y:'-5px'}\"\r\n                                      [align]=\"{ vertical: 'top', horizontal: 'end' }\" [dialItemAnimation]=true buttonClass=\"user-panel-button\"\r\n                                      dialClass=\"user-panel-dial\" (dialItemClick)=\"onDialItemClick($event)\">\r\n            <ng-template kendoFloatingActionButtonTemplate>\r\n              <kendo-avatar *ngIf=\"!!profileImgUrl\" shape=\"circle\" [imageSrc]=\"profileImgUrl\"></kendo-avatar>\r\n              <ng-container *ngIf=\"!profileImgUrl\">\r\n                <kendo-avatar *ngIf=\"!!usernameInitial\" class=\"username-initial-avatar\" shape=\"circle\" [initials]=\"usernameInitial\"></kendo-avatar>\r\n                <kendo-avatar *ngIf=\"!usernameInitial\" class=\"username-initial-avatar\" shape=\"circle\" icon=\"user\"></kendo-avatar>\r\n              </ng-container>\r\n              <ion-label class=\"profile-username\">{{ userDisplayName }}</ion-label>\r\n            </ng-template>\r\n            <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n              <span [class.custom-focused-class]=\"isFocused\" class=\"user-panel-item\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"user-panel-item-icon\"></fa-icon>\r\n                <span class=\"user-panel-option-text\">{{ item.text }}</span>\r\n              </span>\r\n            </ng-template>\r\n          </kendo-floatingactionbutton>\r\n        </div>\r\n        <div *ngIf=\"group && isMobileScreen()\">\r\n          <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n            <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n          </ion-buttons>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Design 1 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <div class=\"nav-bar-container\">\r\n          <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n            <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n              <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"zcard-header-icon\"></fa-icon>\r\n                <span>{{ item.text }}</span>\r\n              </div>\r\n            </ng-template>\r\n          </kendo-breadcrumb>\r\n        </div>\r\n      </div> -->\r\n      <!-- Design 2 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n          <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n            <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n              <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\" [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n              <span>{{ item.text }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-breadcrumb>\r\n      </div> -->\r\n    </div>\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: ["ion-toolbar{--background: var(--ion-color-primary-shade);--color: var(--ion-color-primary-contrast);--min-height: var(--ion-header-height);box-shadow:0 2px 9px #ababab}app-uimenubutton{margin:auto}.toolbar-first-row{display:flex}.toolbar-second-row{margin-left:50px}.end-panel{display:flex;align-items:stretch;cursor:pointer}.username-initial-avatar{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary)}.profile-username{padding-right:10px;margin:auto auto auto 15px;font-size:var(--page-user-profile-font-size)}.toolbar-title-label{text-shadow:.5px .5px rgba(255,255,255,.48);font-size:var(--page-title-font-size)}.toolbar-title{margin-bottom:2px}.hoverable:hover{background:#ffffff24}:host ::ng-deep kendo-floatingactionbutton{max-height:60px;border-radius:10px}:host ::ng-deep kendo-floatingactionbutton .user-panel-button{background:transparent!important;border:none!important;outline:none}:host ::ng-deep kendo-floatingactionbutton:hover{background:rgba(0,0,0,.3)}:host ::ng-deep kendo-floatingactionbutton .k-fab{box-shadow:none;padding:12px}:host ::ng-deep kendo-floatingactionbutton .k-avatar-md{width:var(--ion-header-avatar-size);height:var(--ion-header-avatar-size);flex-basis:var(--ion-header-avatar-size)}\n"], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: UimenubuttonComponent, selector: "app-uimenubutton", inputs: ["group"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: UibulletinComponent, selector: "app-uibulletin", inputs: ["group"] }, { type: i3$3.FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { type: i2$5.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }, { 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.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$3.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiheaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-uiheader", template: "<ion-header>\r\n  <ion-toolbar>\r\n    <div class=\"toolbar-container\" *ngIf=\"!isloading\">\r\n      <div class=\"toolbar-first-row\">\r\n        <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n\r\n        <ion-title class=\"toolbar-title\">\r\n          <div *ngIf=\"topFormHeader || (group && !group.isLoading && group.formHeader)\">\r\n            <ion-label class=\"toolbar-title-label\">{{ topFormHeader ? topFormHeader : group.formHeader }}</ion-label>\r\n          </div>\r\n        </ion-title>\r\n\r\n        <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel hoverable\">\r\n          <app-uibulletin *ngIf=\"showBulletinIcon\"></app-uibulletin>\r\n          <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n          <kendo-floatingactionbutton [dialItems]=\"userPanelItems\" [offset]=\"{x:'-5px', y:'-5px'}\"\r\n                                      [align]=\"{ vertical: 'top', horizontal: 'end' }\" [dialItemAnimation]=true buttonClass=\"user-panel-button\"\r\n                                      dialClass=\"user-panel-dial\" (dialItemClick)=\"onDialItemClick($event)\">\r\n            <ng-template kendoFloatingActionButtonTemplate>\r\n              <kendo-avatar shape=\"circle\" [imageSrc]=\"profileImgUrl\"></kendo-avatar>\r\n              <ion-label class=\"profile-username\">{{ userDisplayName }}</ion-label>\r\n            </ng-template>\r\n            <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n              <span [class.custom-focused-class]=\"isFocused\" class=\"user-panel-item\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"user-panel-item-icon\"></fa-icon>\r\n                <span class=\"user-panel-option-text\">{{ item.text }}</span>\r\n              </span>\r\n            </ng-template>\r\n          </kendo-floatingactionbutton>\r\n        </div>\r\n        <div *ngIf=\"group && isMobileScreen()\">\r\n          <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n            <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n          </ion-buttons>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Design 1 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <div class=\"nav-bar-container\">\r\n          <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n            <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n              <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"zcard-header-icon\"></fa-icon>\r\n                <span>{{ item.text }}</span>\r\n              </div>\r\n            </ng-template>\r\n          </kendo-breadcrumb>\r\n        </div>\r\n      </div> -->\r\n      <!-- Design 2 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n          <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n            <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n              <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\" [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n              <span>{{ item.text }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-breadcrumb>\r\n      </div> -->\r\n    </div>\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: ["ion-toolbar{--background: var(--ion-color-primary-shade);--color: var(--ion-color-primary-contrast);--min-height: var(--ion-header-height);box-shadow:0 2px 9px #ababab}app-uimenubutton{margin:auto}.toolbar-first-row{display:flex}.toolbar-second-row{margin-left:50px}.end-panel{display:flex;align-items:stretch;cursor:pointer}.profile-username{padding-right:10px;margin:auto auto auto 15px;font-size:var(--page-user-profile-font-size)}.toolbar-title-label{text-shadow:.5px .5px rgba(255,255,255,.48);font-size:var(--page-title-font-size)}.toolbar-title{margin-bottom:2px}.hoverable:hover{background:#ffffff24}:host ::ng-deep kendo-floatingactionbutton{max-height:60px;border-radius:10px}:host ::ng-deep kendo-floatingactionbutton .user-panel-button{background:transparent!important;border:none!important;outline:none}:host ::ng-deep kendo-floatingactionbutton:hover{background:rgba(0,0,0,.3)}:host ::ng-deep kendo-floatingactionbutton .k-fab{box-shadow:none;padding:12px}:host ::ng-deep kendo-floatingactionbutton .k-avatar-md{width:var(--ion-header-avatar-size);height:var(--ion-header-avatar-size);flex-basis:var(--ion-header-avatar-size)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.TranslationService }, { type: i2.ZCoreService }, { type: i2.AuthService }, { type: i2.FontAweSomeService }, { type: ZComponentService }]; }, propDecorators: { group: [{
+            args: [{ selector: "app-uiheader", template: "<ion-header>\r\n  <ion-toolbar>\r\n    <div class=\"toolbar-container\" *ngIf=\"!isloading\">\r\n      <div class=\"toolbar-first-row\">\r\n        <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n\r\n        <ion-title class=\"toolbar-title\">\r\n          <div *ngIf=\"topFormHeader || (group && !group.isLoading && group.formHeader)\">\r\n            <ion-label class=\"toolbar-title-label\">{{ topFormHeader ? topFormHeader : group.formHeader }}</ion-label>\r\n          </div>\r\n        </ion-title>\r\n\r\n        <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel hoverable\">\r\n          <app-uibulletin *ngIf=\"showBulletinIcon\" [group]=\"group\"></app-uibulletin>\r\n          <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n          <kendo-floatingactionbutton [dialItems]=\"userPanelItems\" [offset]=\"{x:'-5px', y:'-5px'}\"\r\n                                      [align]=\"{ vertical: 'top', horizontal: 'end' }\" [dialItemAnimation]=true buttonClass=\"user-panel-button\"\r\n                                      dialClass=\"user-panel-dial\" (dialItemClick)=\"onDialItemClick($event)\">\r\n            <ng-template kendoFloatingActionButtonTemplate>\r\n              <kendo-avatar *ngIf=\"!!profileImgUrl\" shape=\"circle\" [imageSrc]=\"profileImgUrl\"></kendo-avatar>\r\n              <ng-container *ngIf=\"!profileImgUrl\">\r\n                <kendo-avatar *ngIf=\"!!usernameInitial\" class=\"username-initial-avatar\" shape=\"circle\" [initials]=\"usernameInitial\"></kendo-avatar>\r\n                <kendo-avatar *ngIf=\"!usernameInitial\" class=\"username-initial-avatar\" shape=\"circle\" icon=\"user\"></kendo-avatar>\r\n              </ng-container>\r\n              <ion-label class=\"profile-username\">{{ userDisplayName }}</ion-label>\r\n            </ng-template>\r\n            <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n              <span [class.custom-focused-class]=\"isFocused\" class=\"user-panel-item\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"user-panel-item-icon\"></fa-icon>\r\n                <span class=\"user-panel-option-text\">{{ item.text }}</span>\r\n              </span>\r\n            </ng-template>\r\n          </kendo-floatingactionbutton>\r\n        </div>\r\n        <div *ngIf=\"group && isMobileScreen()\">\r\n          <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n            <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n          </ion-buttons>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Design 1 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <div class=\"nav-bar-container\">\r\n          <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n            <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n              <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n                <fa-icon [icon]=\"item.icon\" class=\"zcard-header-icon\"></fa-icon>\r\n                <span>{{ item.text }}</span>\r\n              </div>\r\n            </ng-template>\r\n          </kendo-breadcrumb>\r\n        </div>\r\n      </div> -->\r\n      <!-- Design 2 -->\r\n      <!-- <div class=\"toolbar-second-row\" *ngIf=\"!isMobileScreen() && group && group.navItems\">\r\n        <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n          <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n            <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n              <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\" [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n              <span>{{ item.text }}</span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-breadcrumb>\r\n      </div> -->\r\n    </div>\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: ["ion-toolbar{--background: var(--ion-color-primary-shade);--color: var(--ion-color-primary-contrast);--min-height: var(--ion-header-height);box-shadow:0 2px 9px #ababab}app-uimenubutton{margin:auto}.toolbar-first-row{display:flex}.toolbar-second-row{margin-left:50px}.end-panel{display:flex;align-items:stretch;cursor:pointer}.username-initial-avatar{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary)}.profile-username{padding-right:10px;margin:auto auto auto 15px;font-size:var(--page-user-profile-font-size)}.toolbar-title-label{text-shadow:.5px .5px rgba(255,255,255,.48);font-size:var(--page-title-font-size)}.toolbar-title{margin-bottom:2px}.hoverable:hover{background:#ffffff24}:host ::ng-deep kendo-floatingactionbutton{max-height:60px;border-radius:10px}:host ::ng-deep kendo-floatingactionbutton .user-panel-button{background:transparent!important;border:none!important;outline:none}:host ::ng-deep kendo-floatingactionbutton:hover{background:rgba(0,0,0,.3)}:host ::ng-deep kendo-floatingactionbutton .k-fab{box-shadow:none;padding:12px}:host ::ng-deep kendo-floatingactionbutton .k-avatar-md{width:var(--ion-header-avatar-size);height:var(--ion-header-avatar-size);flex-basis:var(--ion-header-avatar-size)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.ZCoreService }, { type: i2.AuthService }, { type: i2.FontAweSomeService }, { type: ZComponentService }, { type: UiheaderService }]; }, propDecorators: { group: [{
                 type: Input
             }], topFormHeader: [{
                 type: Input
@@ -4904,7 +4988,7 @@ class ZformComponent {
             //  });
             //}
             //else {
-            this.fieldService.getFormFieldCode(this.fieldName, 'FormField', this, 'fields').pipe(switchMap(fieldElements => {
+            this.fieldService.getFormFieldCode(this.fieldName, FormType.formField, this, 'fields').pipe(switchMap(fieldElements => {
                 return this.onStartDebuggerOrLoadFromCache(fieldElements);
             }), switchMap(() => {
                 this.isLoading = false;
@@ -7839,10 +7923,10 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen($event)\"\r\n                         (close)=\"handleClose($event)\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$1.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$1.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen($event)\"\r\n                         (close)=\"handleClose($event)\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$1.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$1.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zselectmultiple", template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen($event)\"\r\n                         (close)=\"handleClose($event)\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: "app-zselectmultiple", template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  (focus)=\"handleFocus()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen($event)\"\r\n                         (close)=\"handleClose($event)\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen($event)\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.ResourceApiService }, { type: i2.WebApiService }, { type: i2.CacheService }, { type: i2.FieldService }]; }, propDecorators: { comboboxComponent: [{
                 type: ViewChild,
                 args: ["comboboxComponent"]
@@ -9091,7 +9175,8 @@ class ZgridComponent extends DataListingFieldBase {
         // @ViewChild(ZGridBindingDirective, { static: false }) zgrid: ZGridBindingDirective;
         this.zgrid = null;
         this.oauthUrl = null;
-        this.mySelection = [];
+        this.rowSelection = [];
+        this.mySelection = new Map();
         this.inlineEditedFormGroups = {};
         this.pageable = false;
         this.filterGroup = new ZGroup();
@@ -9118,6 +9203,17 @@ class ZgridComponent extends DataListingFieldBase {
         this.gridSubject = new Subject();
         this.gridDefaultStateExist = false;
         this.isNew = true;
+        this.rowSelectionKey = (context) => {
+            // Generate a unique key using either this.data.UniqueKey or context.dataItem.Id.
+            const key = (this.data.UniqueKey ?? context.dataItem.Id); // + " " + context.index;
+            if (this.data.UniqueKey && context.dataItem.Id) {
+                console.error('A unique column field is required. Ensure either the Id column is present or the UniqueKey property is set for zgrid.');
+            }
+            // Store the data item in the mySelection map with the generated key.
+            this.mySelection.set(key, context.dataItem);
+            // Return the generated key.
+            return key;
+        };
         this.setData = (gData) => {
             if (this.zgrid) {
                 if (this.isUseLocalData()) {
@@ -9404,7 +9500,12 @@ class ZgridComponent extends DataListingFieldBase {
         else if (formGroup.dirty) {
             this.editableColumns = this.columns.filter(s => s.isEditableInDataItem === true);
             this.editableColumns.map(s => Object.assign(dataItem, { [s.field]: formGroup.value[s.field] }));
-            this.mySelection.map(s => (s.Id === dataItem.Id) ? Object.assign(s, dataItem) : null);
+            // this.mySelection.map(s => (s.Id === dataItem.Id) ? Object.assign(s, dataItem) : null);
+            this.mySelection.forEach((value, key) => {
+                if (value.Id === dataItem.Id) {
+                    this.mySelection.set(key, { ...value, ...dataItem });
+                }
+            });
         }
     }
     onNavigateTo(event, clickAction, rowData, cellData) {
@@ -9566,15 +9667,22 @@ class ZgridComponent extends DataListingFieldBase {
             this.tooltipDir.hide();
         }
     }
-    rowSelectionKey(context) {
-        return context.dataItem;
-    }
     getSelectedValues() {
-        return this.mySelection;
+        // Map each key in rowSelection to its corresponding data item in the mySelection map.
+        const selectedRecord = this.rowSelection.map(key => this.mySelection.get(key));
+        // Return the array of selected records.
+        return selectedRecord;
+    }
+    clearSelection() {
+        // Clear the map that stores selected data items.
+        this.mySelection.clear();
+        // Clear the array that tracks selected keys.
+        this.rowSelection = [];
     }
     getData() {
         if (this.zgrid) {
             this.inlineEditedFormGroups = {};
+            this.clearSelection();
             this.zgrid.getDataBinding();
         }
         else {
@@ -10107,14 +10215,14 @@ class ZgridComponent extends DataListingFieldBase {
     }
 }
 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)]=\"mySelection\"\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", "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.ɵ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", "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)]=\"mySelection\"\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"] }]
+                    ], 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: [{
                 type: ViewChild,
                 args: [TooltipDirective]