mmhglobal-dynamicform 2.7.3 → 2.9.0

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -4,19 +4,19 @@ import { Injectable, Component, Input, Directive, ViewChild, Inject, HostListene
 import { HttpParams, HttpEventType } from '@angular/common/http';
 import * as i2$2 from '@angular/router';
 import { NavigationStart, NavigationEnd, NavigationError, RouterModule } from '@angular/router';
-import { of, switchMap, forkJoin, tap, BehaviorSubject, Subject, map as map$1, isObservable, interval, takeWhile, from, delay as delay$1, filter as filter$1, first } from 'rxjs';
-import { map, tap as tap$1, switchMap as switchMap$1, delay, take, filter, concatMap, ignoreElements } from 'rxjs/operators';
+import { of, forkJoin, tap, BehaviorSubject, Subject, map as map$1, isObservable, switchMap as switchMap$1, interval, takeWhile, from, delay as delay$1, filter as filter$1, first } from 'rxjs';
+import { map, tap as tap$1, switchMap, delay, take, filter, concatMap, ignoreElements } from 'rxjs/operators';
 import * as i1$1 from '@progress/kendo-angular-dialog';
 import { DialogContentBase } from '@progress/kendo-angular-dialog';
 import * as i2 from 'mmhglobal-zcore';
 import { ZComponentHelper, ZComponentProperties, FieldType, ComponentType as ComponentType$1, ZGroup, MESSAGETYPE, DefaultMessage, DefaultDialogTitle, ZSelectPostApiParams, UploadMetaData, DefaultPageSettingParams, ZCoreModule } from 'mmhglobal-zcore';
-import * as i4 from 'mmhglobal-zmodal';
+import * as i3 from 'mmhglobal-zmodal';
 import { ZmodalHelper, MmhglobalZmodalModule, ModalService } from 'mmhglobal-zmodal';
 import * as i2$1 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
 import * as i5 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { Validators, FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from 'mmhglobal-middleware';
 import * as i5$1 from '@angular/common';
@@ -24,18 +24,18 @@ import { formatDate, CommonModule } from '@angular/common';
 import * as i7 from '@angular/flex-layout/extended';
 import * as i7$1 from '@progress/kendo-angular-grid';
 import { DataBindingDirective, GridComponent, BaseFilterCellComponent, ExcelModule, GridModule } from '@progress/kendo-angular-grid';
-import * as i3$5 from 'ionic-selectable';
+import * as i3$6 from 'ionic-selectable';
 import { IonicSelectableModule } from 'ionic-selectable';
 import * as i2$6 from 'ng2-ace-editor';
 import { AceEditorModule } from 'ng2-ace-editor';
-import * as i3$8 from 'angular2-query-builder';
+import * as i3$9 from 'angular2-query-builder';
 import { QueryBuilderComponent, QueryBuilderModule } from 'angular2-query-builder';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i3$a from '@syncfusion/ej2-angular-querybuilder';
+import * as i3$b from '@syncfusion/ej2-angular-querybuilder';
 import { QueryBuilderModule as QueryBuilderModule$1 } from '@syncfusion/ej2-angular-querybuilder';
 import * as i2$7 from '@progress/kendo-angular-gauges';
 import { ArcGaugeModule } from '@progress/kendo-angular-gauges';
-import * as i3$2 from '@progress/kendo-angular-buttons';
+import * as i3$3 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i2$5 from '@progress/kendo-angular-charts';
 import { ChartsModule } from '@progress/kendo-angular-charts';
@@ -49,34 +49,34 @@ import { FilterModule } from '@progress/kendo-angular-filter';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import * as i5$2 from '@progress/kendo-angular-intl';
 import { IntlModule } from '@progress/kendo-angular-intl';
-import * as i3$4 from '@progress/kendo-angular-inputs';
+import * as i3$5 from '@progress/kendo-angular-inputs';
 import { InputsModule, SwitchModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i14 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
-import * as i3$3 from '@progress/kendo-angular-layout';
+import * as i3$4 from '@progress/kendo-angular-layout';
 import { DrawerComponent, LayoutModule, PanelBarModule, TabStripModule } from '@progress/kendo-angular-layout';
-import * as i3$1 from '@progress/kendo-angular-notification';
+import * as i3$2 from '@progress/kendo-angular-notification';
 import { NotificationModule } from '@progress/kendo-angular-notification';
 import * as i2$4 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import * as i4$3 from '@progress/kendo-angular-progressbar';
+import * as i4$2 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import * as i3$9 from '@progress/telerik-angular-report-viewer';
+import * as i3$a from '@progress/telerik-angular-report-viewer';
 import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
-import * as i3 from '@progress/kendo-angular-scheduler';
+import * as i3$1 from '@progress/kendo-angular-scheduler';
 import { SchedulerModule } from '@progress/kendo-angular-scheduler';
-import * as i4$4 from '@progress/kendo-angular-treelist';
+import * as i4$3 from '@progress/kendo-angular-treelist';
 import { TreeListModule } from '@progress/kendo-angular-treelist';
 import * as i2$9 from '@progress/kendo-angular-treeview';
 import { TreeViewModule } from '@progress/kendo-angular-treeview';
 import * as i6$1 from '@progress/kendo-angular-tooltip';
 import { TooltipDirective, TooltipModule, PopoverModule } from '@progress/kendo-angular-tooltip';
-import * as i3$6 from '@progress/kendo-angular-upload';
+import * as i3$7 from '@progress/kendo-angular-upload';
 import { UploadModule, UploadsModule } from '@progress/kendo-angular-upload';
 import * as i6 from '@progress/kendo-angular-navigation';
 import { NavigationModule } from '@progress/kendo-angular-navigation';
 import * as i1$2 from '@angular/platform-browser';
-import * as i4$2 from '@angular/flex-layout/flex';
+import * as i4$1 from '@angular/flex-layout/flex';
 import 'brace';
 import 'brace/theme/eclipse';
 import 'brace/mode/json';
@@ -84,127 +84,11 @@ import 'brace/mode/javascript';
 import 'brace/mode/html';
 import { process } from '@progress/kendo-data-query';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i3$7 from '@progress/kendo-angular-toolbar';
+import * as i3$8 from '@progress/kendo-angular-toolbar';
 import { MultiSelect, DropDownList } from '@syncfusion/ej2-dropdowns';
 import { createElement, getComponent } from '@syncfusion/ej2-base';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 
-/********** Angular **********/
-class ComponentErrorHandlerService {
-    constructor(alertService, translationService) {
-        this.alertService = alertService;
-        this.translationService = translationService;
-    }
-    showFormGroupErrorMessage(group, formGroup) {
-        formGroup = formGroup || group.form;
-        of(this.getErrorMessageForInvalidInput(group, formGroup)).pipe(switchMap((errMessageTranslationInput) => {
-            const obs = new Array();
-            errMessageTranslationInput.forEach(data => {
-                obs.push(this.translationService.$translateText(data.errorMessage, { translationVariables: data.translationVariables }));
-            });
-            return forkJoin(obs);
-        }), tap(fieldErrorMessages => {
-            const errorMessage = fieldErrorMessages.join("<br/>");
-            this.alertService.showOkay('Form validation failed', errorMessage, ['col-4']);
-            console.warn("Form Validation got error(s):", errorMessage);
-        })).subscribe();
-    }
-    getErrorMessageForInvalidInput(group, formGroup, controlName) {
-        formGroup = formGroup || group.form;
-        if (controlName) {
-            return this.extractErrorMessageFromControl(formGroup, controlName, group);
-        }
-        let allFormControlErrorMessages = new Array();
-        for (const key of Object.keys(formGroup.controls)) {
-            const formControlErrorMessages = this.extractErrorMessageFromControl(formGroup, key, group);
-            allFormControlErrorMessages = allFormControlErrorMessages.concat(formControlErrorMessages);
-        }
-        return allFormControlErrorMessages;
-    }
-    extractErrorMessageFromControl(formGroup, key, group) {
-        const errorMsgArr = new Array();
-        const control = formGroup.get(key);
-        const controlErrors = control === null || control === void 0 ? void 0 : control.errors;
-        if (control && controlErrors) {
-            const errorTypes = Object.keys(controlErrors);
-            for (const errorType of errorTypes) {
-                let errMessage = null;
-                if (key.includes('zudf_')) {
-                    const zudf = ZComponentHelper.getZudfByComponent(group, key);
-                    errMessage = this.getErrorMessageByErrorType(errorType, key, zudf['data']['Value'], controlErrors);
-                }
-                else {
-                    errMessage = this.getErrorMessageByErrorType(errorType, key, group.fields, controlErrors);
-                }
-                if (errMessage.errorMessage) {
-                    errorMsgArr.push(errMessage);
-                }
-            }
-            ;
-        }
-        return errorMsgArr;
-    }
-    getErrorMessageByErrorType(errorType, controlName, fields, errorDetail) {
-        const field = ZComponentHelper.getFieldFromFieldsByValue(fields, controlName);
-        let errorMessage = "";
-        const translationVariables = { T_FieldName: ZComponentHelper.getFieldLabel(fields, controlName) };
-        switch (errorType) {
-            case 'required':
-                errorMessage = `${this.getErrorMsgAction_Required(field.Type)} the {{T_FieldName}}`;
-                break;
-            case 'minlength':
-                errorMessage = `{{T_FieldName}} must be more than {{T_MinLength}} characters`;
-                Object.assign(translationVariables, { T_MinLength: errorDetail[errorType].requiredLength });
-                break;
-            case 'maxlength':
-                errorMessage = `{{T_FieldName}} must be less than {{T_MaxLength}} characters`;
-                Object.assign(translationVariables, { T_MaxLength: errorDetail[errorType].requiredLength });
-                break;
-            case 'email':
-                errorMessage = `Enter a valid email address for {{T_FieldName}}`;
-                break;
-            case 'min':
-            case 'max':
-                errorMessage = '';
-                break;
-            case 'minError':
-                errorMessage = `{{T_FieldName}} must be equal or more than {{T_MinValue}}`;
-                Object.assign(translationVariables, { T_MinValue: errorDetail[errorType].minValue });
-                break;
-            case 'maxError':
-                errorMessage = `{{T_FieldName}} must be equal or less than {{T_MaxValue}}`;
-                Object.assign(translationVariables, { T_MaxValue: errorDetail[errorType].maxValue });
-                break;
-            default:
-                console.warn(`Field Error is not properly handled : ${ZComponentHelper.getFieldLabel(fields, controlName)}`);
-                errorMessage = `Invalid Field: {{T_FieldName}}`;
-                break;
-        }
-        return {
-            errorMessage,
-            translationVariables
-        };
-    }
-    getErrorMsgAction_Required(type) {
-        switch (type) {
-            case 'zuiselectmultiple':
-            case 'zuiselectmultiple_button':
-            case 'select':
-                return "Choose";
-            default:
-                return "Enter";
-        }
-    }
-}
-ComponentErrorHandlerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ComponentErrorHandlerService, deps: [{ token: i2.AlertService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ComponentErrorHandlerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ComponentErrorHandlerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ComponentErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i2.AlertService }, { type: i2.TranslationService }]; } });
-
 /********** Angular **********/
 class ZComponentService {
     constructor(componentObjectService, translateService, zcoreService, fieldService) {
@@ -499,11 +383,13 @@ class FieldBase {
             }
         };
     }
-    initComponent() {
+    initComponent(options) {
         this.isLoading = true;
         this.componentProperties = this.componentProperties || new ZComponentProperties();
         ZComponentHelper.setComponentProperties(this);
-        ZComponentHelper.registerComponent(this);
+        if (!(options && options.isRegisterComponent == false)) {
+            ZComponentHelper.registerComponent(this);
+        }
         this.componentService.setComponentAdditionalProperties(this);
         this.componentService.setCompStylesByIndex(this);
         this.data.ComponentStyleType = this.data.ComponentStyleType || "style1";
@@ -847,13 +733,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: i2.WorkflowService }, { type: i2$1.ActionSheetController }]; } });
 
 class ZComponentDebugService {
-    constructor(router, alertService, authService, fieldService, resourceApiService, componentErrorHandler, toastService, modalService, webApiService) {
+    constructor(router, alertService, authService, fieldService, resourceApiService, componentErrorHandlerService, toastService, modalService, webApiService) {
         this.router = router;
         this.alertService = alertService;
         this.authService = authService;
         this.fieldService = fieldService;
         this.resourceApiService = resourceApiService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.toastService = toastService;
         this.modalService = modalService;
         this.webApiService = webApiService;
@@ -974,7 +860,7 @@ class ZComponentDebugService {
         const d = this.debug;
         const url = this.resourceApiService.getURL('fieldsMapping');
         const url2 = this.resourceApiService.getURL('field');
-        return this.webApiService.httpGet$(url, { name: activityName }).pipe(switchMap$1((fieldMapping) => {
+        return this.webApiService.httpGet$(url, { name: activityName }).pipe(switchMap((fieldMapping) => {
             // console.log('fieldMapping: ', fieldMapping);
             return this.webApiService.httpGet$(url2, { id: fieldMapping.FieldElementMasterId });
         }), tap$1((respData) => {
@@ -1343,7 +1229,7 @@ class ZComponentDebugService {
             return;
         }
         if (!fg.valid) {
-            this.componentErrorHandler.showFormGroupErrorMessage(this.group, fg);
+            this.componentErrorHandlerService.showFormGroupErrorMessage(this.group, fg);
             return;
         }
         of(debug.zModel)
@@ -1354,10 +1240,10 @@ class ZComponentDebugService {
         // }),
         tap$1(() => {
             Object.assign(debug.zModel, fg.value);
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return this.webApiService.httpPut$(debug.resourceURL + "/" + debug.zModel.Id, debug.zModel)
                 .pipe(map(res => this.handleSuccess(res, "Record is updated successfully.")));
-        }), switchMap$1((zmodel) => {
+        }), switchMap((zmodel) => {
             console.log("After Debug Form updated, zModel:", zmodel);
             if (zmodel && zmodel.Data) {
                 Object.assign(debug.zModel, zmodel.Data);
@@ -1465,14 +1351,14 @@ class ZComponentDebugService {
         return this.webApiService.handleError(res);
     }
 }
-ZComponentDebugService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZComponentDebugService, deps: [{ token: i2$2.Router }, { token: i2.AlertService }, { token: i2.AuthService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: ComponentErrorHandlerService }, { token: i2.ToastService }, { token: i4.ModalService }, { token: i2.WebApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+ZComponentDebugService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZComponentDebugService, deps: [{ token: i2$2.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 }], target: i0.ɵɵFactoryTarget.Injectable });
 ZComponentDebugService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZComponentDebugService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZComponentDebugService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2.AlertService }, { type: i2.AuthService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: ComponentErrorHandlerService }, { type: i2.ToastService }, { type: i4.ModalService }, { type: i2.WebApiService }]; } });
+        }], ctorParameters: function () { return [{ type: i2$2.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 }]; } });
 
 class FieldElementDirective {
     constructor(viewContainerRef) {
@@ -1550,7 +1436,7 @@ class ZformComponent {
             this.isLoading = false;
         }
         else {
-            this.fieldService.getFormFieldCode(this.fieldName, 'FormField', this, 'fields').pipe(switchMap$1(fieldElements => {
+            this.fieldService.getFormFieldCode(this.fieldName, 'FormField', this, 'fields').pipe(switchMap(fieldElements => {
                 if (this.fieldName === 'debugV2') {
                     return this.debugService.onStartDebugger(fieldElements, this);
                 }
@@ -1559,7 +1445,7 @@ class ZformComponent {
                     this.onInitNormal();
                     return of([]);
                 }
-            }), switchMap$1(() => {
+            }), switchMap(() => {
                 this.isLoading = false;
                 if (this.group._isDebugging && this.group._debug.isLoading) {
                     this.group._debug.isLoading = false;
@@ -1590,7 +1476,7 @@ class ZformComponent {
             this.form = this.toFormGroup(this.group.fields);
             this.group.form = this.form;
             this.fields = this.group.fields;
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             if (!this.group['afterFormInit']) {
                 return of({});
             }
@@ -1666,7 +1552,7 @@ class ZformComponent {
     }
 }
 ZformComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZformComponent, deps: [{ token: i2.AuthService }, { token: i2.FieldService }, { token: ZComponentDebugService }, { token: i2.ZCoreService }], target: i0.ɵɵFactoryTarget.Component });
-ZformComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZformComponent, selector: "app-zform", inputs: { group: "group", fieldName: "fieldName" }, ngImport: i0, template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ZformComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZformComponent, selector: "app-zform", inputs: { group: "group", fieldName: "fieldName" }, ngImport: i0, template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZformComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zform", template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"] }]
@@ -1721,7 +1607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /********** Angular **********/
 class ZmodalComponent extends DialogContentBase {
-    constructor(dialog, modalCtrl, zcoreService, webApiService, resourceApiService, componentErrorHandler, // Use in mmhglobal-zmodal.helper
+    constructor(dialog, modalCtrl, zcoreService, webApiService, resourceApiService, componentErrorHandlerService, // Use in mmhglobal-zmodal.helper
     fieldService, platform, alertService) {
         super(dialog);
         this.dialog = dialog;
@@ -1729,7 +1615,7 @@ class ZmodalComponent extends DialogContentBase {
         this.zcoreService = zcoreService;
         this.webApiService = webApiService;
         this.resourceApiService = resourceApiService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.fieldService = fieldService;
         this.platform = platform;
         this.alertService = alertService;
@@ -1823,23 +1709,23 @@ class ZmodalComponent extends DialogContentBase {
         return v;
     }
 }
-ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1$1.DialogRef }, { token: i2$1.ModalController }, { token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: ComponentErrorHandlerService }, { token: i2.FieldService }, { token: i2$1.Platform }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalComponent, deps: [{ token: i1$1.DialogRef }, { token: i2$1.ModalController }, { token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }, { token: i2$1.Platform }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
 ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5$1.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmodal', template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: i2$1.ModalController }, { type: i2.ZCoreService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: ComponentErrorHandlerService }, { type: i2.FieldService }, { type: i2$1.Platform }, { type: i2.AlertService }]; }, propDecorators: { modalParams: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }, { type: i2$1.ModalController }, { type: i2.ZCoreService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.FieldService }, { type: i2$1.Platform }, { type: i2.AlertService }]; }, propDecorators: { modalParams: [{
                 type: Input
             }] } });
 
 /********** Angular **********/
 class ZmodalMobileComponent {
-    constructor(webApiService, zcoreService, componentErrorHandler, // Use in mmhglobal-zmodal.helper
+    constructor(webApiService, zcoreService, componentErrorHandlerService, // Use in mmhglobal-zmodal.helper
     fieldService // Use in mmhglobal-zmodal.helper
     ) {
         this.webApiService = webApiService;
         this.zcoreService = zcoreService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.fieldService = fieldService;
         this.group = new ZGroup(true);
     }
@@ -1931,12 +1817,12 @@ class ZmodalMobileComponent {
         return this.zcoreService.isDebugSession();
     }
 }
-ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i2.WebApiService }, { token: i2.ZCoreService }, { token: ComponentErrorHandlerService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
+ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
 ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i5$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i5$1.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zmodal", template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i2.WebApiService }, { type: i2.ZCoreService }, { type: ComponentErrorHandlerService }, { type: i2.FieldService }]; }, propDecorators: { modalParams: [{
+        }], ctorParameters: function () { return [{ type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i2.ComponentErrorHandlerService }, { type: i2.FieldService }]; }, propDecorators: { modalParams: [{
                 type: Input
             }] } });
 
@@ -1945,7 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 // import { ZComponentHelper, ZComponentOutputEvent, ModalPageParams, ZGrid } from '../dynamicform/zcomponent.model';
 // import { ZGroup, ZField } from '../model/zgroup.model';
 class MainService {
-    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandler, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalr, dialogService, oauth2Service) {
+    constructor(router, activatedRoute, modalCtrl, navController, alertService, cacheService, fieldService, resourceApiService, componentErrorHandlerService, webApiService, zcoreService, modalService, storageService, debugService, translationService, signalr, dialogService, oauth2Service) {
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.modalCtrl = modalCtrl;
@@ -1954,7 +1840,7 @@ class MainService {
         this.cacheService = cacheService;
         this.fieldService = fieldService;
         this.resourceApiService = resourceApiService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.webApiService = webApiService;
         this.zcoreService = zcoreService;
         this.modalService = modalService;
@@ -1975,7 +1861,7 @@ class MainService {
         //#region for signalR alert
         this.getListFieldName = (fieldName) => {
             const params = new HttpParams().set("name", fieldName);
-            return this.oauth2Service.httpGet$(this.fieldService.downloadListFieldUrl, params).pipe(map(res => res.FieldElementMasterId), switchMap$1(id => this.oauth2Service.httpGet$(this.fieldService.downloadFormFieldUrl, { id })), map(res => res.Name));
+            return this.oauth2Service.httpGet$(this.fieldService.downloadListFieldUrl, params).pipe(map(res => res.FieldElementMasterId), switchMap(id => this.oauth2Service.httpGet$(this.fieldService.downloadFormFieldUrl, { id })), map(res => res.Name));
         };
         this.clearFormListFields = () => {
             this.fieldService.dataFormFields = {};
@@ -2094,7 +1980,7 @@ class MainService {
             //    zmodel[group.parentReferenceField].toString() +
             //    "/edit";
             //}
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             if (group.afterGetModelSuccess) {
                 return this.afterGetModelSuccess(group);
             }
@@ -2113,7 +1999,7 @@ class MainService {
             "Cancel",
             "Discard Changes",
         ])
-            .pipe(switchMap$1((reply) => {
+            .pipe(switchMap((reply) => {
             if (reply === "Discard Changes") {
                 return of(true);
             }
@@ -2523,7 +2409,7 @@ class MainService {
         group.isTriggered = false;
     }
     newModel(event, group) {
-        of([]).pipe(switchMap$1((zmodel) => {
+        of([]).pipe(switchMap((zmodel) => {
             console.log("Before new, zModel:", zmodel);
             return this.beforeNewModel(group);
         }), tap$1(() => {
@@ -2599,17 +2485,17 @@ class MainService {
             return;
         }
         if (!fg.valid) {
-            this.componentErrorHandler.showFormGroupErrorMessage(group, fg);
+            this.componentErrorHandlerService.showFormGroupErrorMessage(group, fg);
             return;
         }
-        of(group.zModel).pipe(switchMap$1((zmodel) => {
+        of(group.zModel).pipe(switchMap((zmodel) => {
             console.log("Before create, zModel:", zmodel);
             return this.beforeCreateModel(group);
         }), tap$1(() => {
             if (!this.group.skipCreateUsingFormValue) {
                 Object.assign(group.zModel, fg.value);
             }
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             const newModel = Object.assign({}, group.zModel);
             ZComponentHelper.removeNullFields(newModel);
             return this.webApiService.httpPost$(group.resourceURL, newModel).pipe(tap$1((resp) => {
@@ -2618,7 +2504,7 @@ class MainService {
             }), tap$1((res) => {
                 return this.handleSuccess(res, resMessage);
             }));
-        }), switchMap$1((zmodel) => {
+        }), switchMap((zmodel) => {
             console.log("After created, zModel:", zmodel);
             this.patchUpdatedzModel(fg, zmodel, group);
             return this.afterCreateModel(group, zmodel);
@@ -2663,16 +2549,16 @@ class MainService {
         }
         //this.handleSuccess(res, "Record is updated successfully.")
         ));
-        return of(group.zModel).pipe(switchMap$1((zmodel) => {
+        return of(group.zModel).pipe(switchMap((zmodel) => {
             console.log("Before update, zModel:", zmodel);
             return this.beforeUpdateModel(group);
         }), tap$1(() => {
             if (!group.skipUpdateUsingFormValue) {
                 Object.assign(group.zModel, fg.value);
             }
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return updateAPIObservable;
-        }), switchMap$1((resp) => {
+        }), switchMap((resp) => {
             console.log("After updated, response:", resp);
             updateModelres = resp;
             group.isCloneNew = false;
@@ -2734,16 +2620,16 @@ class MainService {
         const fg = group.form;
         const resMessage = group.SuccessDeletedMessage || "Record is deleted successfully.";
         of(group.zModel)
-            .pipe(switchMap$1((zmodel) => {
+            .pipe(switchMap((zmodel) => {
             console.log("Before delete, zModel:", zmodel);
             return this.beforeDeleteModel(group);
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             group.isTriggered = false;
             return this.alertService.show("Delete Record", "Are you sure?", [
                 { text: "No", cssClass: "secondary" },
                 { text: "Yes", cssClass: "primary" }
             ]);
-        }), switchMap$1((reply) => {
+        }), switchMap((reply) => {
             if (reply === "Yes") {
                 Object.assign(group.zModel, fg.value);
                 group.zModel.Disabled = true;
@@ -2753,7 +2639,7 @@ class MainService {
                     .pipe(tap$1((res) => {
                     tempResponse = Object.assign({}, res);
                     this.handleSuccess(res, resMessage);
-                }), switchMap$1((zmodel) => {
+                }), switchMap((zmodel) => {
                     console.log("After deleted, zModel:", zmodel);
                     return this.afterDeleteModel(group, zmodel);
                 }), tap$1((resp) => {
@@ -2819,7 +2705,7 @@ class MainService {
             return false;
         }
         if (!fg.valid) {
-            this.componentErrorHandler.showFormGroupErrorMessage(group, fg);
+            this.componentErrorHandlerService.showFormGroupErrorMessage(group, fg);
             fg.markAsTouched();
             fg.markAllAsTouched();
             return false;
@@ -3057,14 +2943,14 @@ class MainService {
         }
     }
 }
-MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, deps: [{ token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i4.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i1$1.DialogService }, { token: i2.OAuth2Service }], target: i0.ɵɵFactoryTarget.Injectable });
+MainService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, deps: [{ token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i2$1.ModalController }, { token: i2$1.NavController }, { token: i2.AlertService }, { token: i2.CacheService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i3.ModalService }, { token: i2.StorageSessionService }, { token: ZComponentDebugService }, { token: i2.TranslationService }, { token: i2.SignalrService }, { token: i1$1.DialogService }, { token: i2.OAuth2Service }], target: i0.ɵɵFactoryTarget.Injectable });
 MainService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i4.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i1$1.DialogService }, { type: i2.OAuth2Service }]; } });
+        }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i2$1.ModalController }, { type: i2$1.NavController }, { type: i2.AlertService }, { type: i2.CacheService }, { type: i2.FieldService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WebApiService }, { type: i2.ZCoreService }, { type: i3.ModalService }, { type: i2.StorageSessionService }, { type: ZComponentDebugService }, { type: i2.TranslationService }, { type: i2.SignalrService }, { type: i1$1.DialogService }, { type: i2.OAuth2Service }]; } });
 function refreshGrid(group) {
     const zgridControl = group["gridOptions"];
     if (zgridControl) {
@@ -3565,7 +3451,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         if (this.storageService) {
             const subject = new Subject();
             of(true)
-                .pipe(switchMap$1(() => {
+                .pipe(switchMap(() => {
                 return this.storageService.get(StorageKey);
             }), tap$1(data => {
                 if (!data || !data.value || data.value === "null") {
@@ -4169,7 +4055,7 @@ class ZSchedulerToolBarComponent {
         }
     }
 }
-ZSchedulerToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZSchedulerToolBarComponent, deps: [{ token: i3.ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
+ZSchedulerToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZSchedulerToolBarComponent, deps: [{ token: i3$1.ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
 ZSchedulerToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: { local: "local", selectedDate: "selectedDate" }, host: { listeners: { "keydown": "keydown($event)", "document:click": "documentClick($event)" } }, ngImport: i0, template: `
     <div class="k-scheduler-navigation">
       <button class="k-nav-today" (click)="today()">
@@ -4236,7 +4122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         ></kendo-calendar>
     </kendo-popup>
   `, styles: [":host{margin:5px 0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i3.ToolbarService }]; }, propDecorators: { local: [{
+        }], ctorParameters: function () { return [{ type: i3$1.ToolbarService }]; }, propDecorators: { local: [{
                 type: Input
             }], selectedDate: [{
                 type: Input
@@ -4394,14 +4280,14 @@ class UipageComponent {
             else {
                 console.warn("Error in uipage init.");
             }
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             const formType = isListForm ? "ListField" : "FormField";
             const formFieldName = this.group.fieldName ? this.group.fieldName : ctrlName;
             this.group.fieldName = formFieldName;
             return this.mainService.getGroupFields(formFieldName, formType, this.group, "fields");
-        }), switchMap$1((fields) => {
+        }), switchMap((fields) => {
             return this.mainService.beforePageInitialise(this.group);
-        }), switchMap$1((fields) => {
+        }), switchMap((fields) => {
             if (this.group.actName === "new") {
                 this.mainService.getCloneNewCacheZModel(this.group);
                 return this.mainService.afterNewModel(this.group);
@@ -4409,7 +4295,7 @@ class UipageComponent {
             else {
                 return of(fields);
             }
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             // console.log('CtrName: ' + ctrlName + ' field Element: ', fields);
             if (this.group.referenceId && this.group.referenceId !== "0") {
                 if (typeof this.group.getModel === "function") {
@@ -4422,12 +4308,12 @@ class UipageComponent {
             else {
                 return of({});
             }
-        }), switchMap$1((zmodel) => {
+        }), switchMap((zmodel) => {
             if (this.group.parentReferenceField) {
                 this.group.parentReferenceId = this.group.zModel[this.group.parentReferenceField];
             }
             return this.mainService.afterPageInitialise(this.group);
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return this.mainService.translationPageElement(this.group);
         }));
         // .subscribe(() => {
@@ -4576,12 +4462,12 @@ class UibulletinComponent {
         });
     }
 }
-UibulletinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UibulletinComponent, deps: [{ token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: MainService }, { token: i2.SignalrService }, { token: i3$1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+UibulletinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UibulletinComponent, deps: [{ token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: MainService }, { token: i2.SignalrService }, { token: i3$2.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
 UibulletinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UibulletinComponent, selector: "app-uibulletin", inputs: { group: "group" }, viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true, read: ViewContainerRef }, { propertyName: "bulletinTemplate", first: true, predicate: ["bulletinTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ion-button (click)=\"showBulletinMessage()\" fill=\"none\" size=\"small\" *ngIf=\"showBulletinIcon\">\r\n\r\n  <ion-label [title]=\"title\">\r\n    <ion-badge color=\"danger\" class=\"pending-counter\"\r\n               *ngIf=\"bulletinMessages.length > 0\">\r\n    </ion-badge>\r\n    <ion-label><fa-icon [icon]=\"['fas', 'bell']\" size=\"lg\" style=\"margin-right: 5px;\"></fa-icon> Notification</ion-label>\r\n    <ion-ripple-effect></ion-ripple-effect>\r\n  </ion-label>\r\n\r\n  <!--<fa-icon [icon]=\"['fas', 'bell']\" style=\"margin-right: 5px;\"></fa-icon> Bulletin-->\r\n</ion-button>\r\n<ng-template #bulletinTemplate>\r\n  <div *ngIf=\"bulletinMessages.length > 0\">\r\n    <!--<h6>Bulletin</h6>-->\r\n    <ul>\r\n      <li *ngFor=\"let msg of bulletinMessages\">{{ msg }}</li>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"bulletinMessages.length <= 0\">\r\n    {{ defaultMessage }}\r\n  </div>\r\n</ng-template>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.pending-counterX{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:2px;text-overflow:ellipsis;top:2px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:2.2em}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;left:8px;top:7px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:1.5em}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UibulletinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uibulletin', template: "<ion-button (click)=\"showBulletinMessage()\" fill=\"none\" size=\"small\" *ngIf=\"showBulletinIcon\">\r\n\r\n  <ion-label [title]=\"title\">\r\n    <ion-badge color=\"danger\" class=\"pending-counter\"\r\n               *ngIf=\"bulletinMessages.length > 0\">\r\n    </ion-badge>\r\n    <ion-label><fa-icon [icon]=\"['fas', 'bell']\" size=\"lg\" style=\"margin-right: 5px;\"></fa-icon> Notification</ion-label>\r\n    <ion-ripple-effect></ion-ripple-effect>\r\n  </ion-label>\r\n\r\n  <!--<fa-icon [icon]=\"['fas', 'bell']\" style=\"margin-right: 5px;\"></fa-icon> Bulletin-->\r\n</ion-button>\r\n<ng-template #bulletinTemplate>\r\n  <div *ngIf=\"bulletinMessages.length > 0\">\r\n    <!--<h6>Bulletin</h6>-->\r\n    <ul>\r\n      <li *ngFor=\"let msg of bulletinMessages\">{{ msg }}</li>\r\n    </ul>\r\n  </div>\r\n  <div *ngIf=\"bulletinMessages.length <= 0\">\r\n    {{ defaultMessage }}\r\n  </div>\r\n</ng-template>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.pending-counterX{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:2px;text-overflow:ellipsis;top:2px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:2.2em}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;left:8px;top:7px;transform:scale(.25);transform-origin:top left;display:inline-block;position:absolute;text-align:center;font-size:1.5em}\n"] }]
-        }], ctorParameters: function () { return [{ type: i2.ZCoreService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: MainService }, { type: i2.SignalrService }, { type: i3$1.NotificationService }]; }, propDecorators: { appendTo: [{
+        }], ctorParameters: function () { return [{ type: i2.ZCoreService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: MainService }, { type: i2.SignalrService }, { type: i3$2.NotificationService }]; }, propDecorators: { appendTo: [{
                 type: ViewChild,
                 args: ['appendTo', { read: ViewContainerRef }]
             }], bulletinTemplate: [{
@@ -4663,7 +4549,7 @@ class UiheaderComponent {
     }
 }
 UiheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiheaderComponent, deps: [{ token: i2$2.Router }, { token: i2.TranslationService }, { token: i2.ZCoreService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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$2.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: i3$3.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }, { type: i5.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$2.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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: i3$4.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }, { type: i5.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$1.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.4.0", 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"] }]
@@ -4786,7 +4672,7 @@ class UimenucontentComponent {
     }
 }
 UimenucontentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UimenucontentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UimenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UimenucontentComponent, selector: "app-uimenucontent", inputs: { items: "items" }, ngImport: i0, template: "<div *ngIf=\"this.isCategory()\">\r\n  <ion-row *ngFor=\"let cat of items\">\r\n    <kendo-panelbar keepItemContent=\"true\" style=\"width: 100%;padding:10px;\">\r\n      <kendo-panelbar-item [title]=\"[cat.category]\" [expanded]=\"true\" icon=\"folder\">\r\n        <ng-template kendoPanelBarContent>\r\n          <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n            <ion-grid>\r\n              <ion-row>\r\n                <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of cat.content\">\r\n                  <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n                    <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n                      <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n                      <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n                    </ion-label>\r\n                    <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n                    <ion-ripple-effect></ion-ripple-effect>\r\n                  </div>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-panelbar-item>\r\n    </kendo-panelbar>\r\n  </ion-row>\r\n</div>\r\n<ion-grid *ngIf=\"!this.isCategory()\">\r\n  <ion-row>\r\n    <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of items\">\r\n      <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n          <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n\r\n\r\n\r\n\r\n", styles: [".menu-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:10px 5px;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.menu-btn:hover{color:#fff;background-color:#0006}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{flex:1;text-align:center}.menu-btn-icon{zoom:2}\n"], components: [{ type: i2$1.IonRow, selector: "ion-row" }, { type: i3$3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i3$3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$3.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }, { type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+UimenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UimenucontentComponent, selector: "app-uimenucontent", inputs: { items: "items" }, ngImport: i0, template: "<div *ngIf=\"this.isCategory()\">\r\n  <ion-row *ngFor=\"let cat of items\">\r\n    <kendo-panelbar keepItemContent=\"true\" style=\"width: 100%;padding:10px;\">\r\n      <kendo-panelbar-item [title]=\"[cat.category]\" [expanded]=\"true\" icon=\"folder\">\r\n        <ng-template kendoPanelBarContent>\r\n          <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n            <ion-grid>\r\n              <ion-row>\r\n                <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of cat.content\">\r\n                  <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n                    <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n                      <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n                      <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n                    </ion-label>\r\n                    <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n                    <ion-ripple-effect></ion-ripple-effect>\r\n                  </div>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-panelbar-item>\r\n    </kendo-panelbar>\r\n  </ion-row>\r\n</div>\r\n<ion-grid *ngIf=\"!this.isCategory()\">\r\n  <ion-row>\r\n    <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of items\">\r\n      <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n          <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n\r\n\r\n\r\n\r\n", styles: [".menu-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:10px 5px;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.menu-btn:hover{color:#fff;background-color:#0006}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{flex:1;text-align:center}.menu-btn-icon{zoom:2}\n"], components: [{ type: i2$1.IonRow, selector: "ion-row" }, { type: i3$4.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i3$4.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$4.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }, { type: i2$1.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UimenucontentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uimenucontent', template: "<div *ngIf=\"this.isCategory()\">\r\n  <ion-row *ngFor=\"let cat of items\">\r\n    <kendo-panelbar keepItemContent=\"true\" style=\"width: 100%;padding:10px;\">\r\n      <kendo-panelbar-item [title]=\"[cat.category]\" [expanded]=\"true\" icon=\"folder\">\r\n        <ng-template kendoPanelBarContent>\r\n          <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n            <ion-grid>\r\n              <ion-row>\r\n                <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of cat.content\">\r\n                  <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n                    <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n                      <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n                      <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n                    </ion-label>\r\n                    <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n                    <ion-ripple-effect></ion-ripple-effect>\r\n                  </div>\r\n                </ion-col>\r\n              </ion-row>\r\n            </ion-grid>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-panelbar-item>\r\n    </kendo-panelbar>\r\n  </ion-row>\r\n</div>\r\n<ion-grid *ngIf=\"!this.isCategory()\">\r\n  <ion-row>\r\n    <ion-col class=\"menu-col\" sizeXs=\"4\" sizeMd=\"3\" sizeXl=\"2\" *ngFor=\"let item of items\">\r\n      <div class=\"menu-btn ion-activatable ripple-parent\" [routerLink]=\"[item.url]\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <!-- <ion-icon [name]=\"item.icon\"></ion-icon> -->\r\n          <fa-icon [icon]=\"item.icon\"></fa-icon>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label\">{{item.title}}</ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n\r\n\r\n\r\n\r\n", styles: [".menu-btn{display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;padding:10px 5px;border:1px solid #ccc;border-radius:5px;min-height:100px;cursor:pointer}.menu-btn:hover{color:#fff;background-color:#0006}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{flex:1;text-align:center}.menu-btn-icon{zoom:2}\n"] }]
@@ -4838,7 +4724,7 @@ class UiappmenucontentComponent {
     }
 }
 UiappmenucontentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiappmenucontentComponent, deps: [{ token: i2$2.Router }, { token: i2.MenuService }, { token: i2.AuthService }, { token: i2.ZCoreService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col [ngClass]=\"getDivClass(item)\" *ngFor=\"let item of items; index as i\">\r\n      <div *ngIf=\"item.Type !== 'dropdown-submenu'\" class=\"menu-btn ion-activatable ripple-parent\"\r\n           (click)=\"menuOnClick(item.URL, item.AppClientPath)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon class=\"menu-icon\" [icon]=\"['fas', item.Icon ]\" [inverse]=\"true\"></fa-icon>\r\n          <ion-badge color=\"danger\" class=\"pending-counter\"\r\n                     *ngIf=\"item['PendingCounter'] && item['PendingCounter'] > 0\">\r\n            {{item['PendingCounter']}}\r\n          </ion-badge>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label-text\">{{item.Label}}</ion-label>\r\n        <ion-label *ngIf=\"item.Description\" class=\"menu-btn-label-text menu-btn-label-text-desc\">\r\n          {{item.Description}}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <kendo-card *ngIf=\"item.Type === 'dropdown-submenu'\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>{{item.Label}}</ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n\r\n      <!-- <kendo-panelbar class=\"menu-panel\" *ngIf=\"item.Type === 'dropdown-submenu'\" keepItemContent=\"true\">\r\n        <kendo-panelbar-item [expanded]=\"true\">\r\n          <ng-template kendoPanelBarItemTitle>\r\n            <span *ngIf=\"item.Icon\">\r\n              <fa-icon [icon]=\"item.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n            </span>\r\n            <span *ngIf=\"!item.Icon\">\r\n              <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n            </span>\r\n            <ion-label class=\"zcard-header-title\">{{item.Label}}</ion-label>\r\n          </ng-template>\r\n          <ng-template kendoPanelBarContent class=\"menu-content-temp\">\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </ng-template>\r\n        </kendo-panelbar-item>\r\n      </kendo-panelbar> -->\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:120px;max-height:120px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{background-size:100%}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;top:12px;display:inline-block;position:absolute;text-align:center;font-size:1.4em;right:32%}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i3$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3$3.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col [ngClass]=\"getDivClass(item)\" *ngFor=\"let item of items; index as i\">\r\n      <div *ngIf=\"item.Type !== 'dropdown-submenu'\" class=\"menu-btn ion-activatable ripple-parent\"\r\n           (click)=\"menuOnClick(item.URL, item.AppClientPath)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon class=\"menu-icon\" [icon]=\"['fas', item.Icon ]\" [inverse]=\"true\"></fa-icon>\r\n          <ion-badge color=\"danger\" class=\"pending-counter\"\r\n                     *ngIf=\"item['PendingCounter'] && item['PendingCounter'] > 0\">\r\n            {{item['PendingCounter']}}\r\n          </ion-badge>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label-text\">{{item.Label}}</ion-label>\r\n        <ion-label *ngIf=\"item.Description\" class=\"menu-btn-label-text menu-btn-label-text-desc\">\r\n          {{item.Description}}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <kendo-card *ngIf=\"item.Type === 'dropdown-submenu'\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>{{item.Label}}</ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n\r\n      <!-- <kendo-panelbar class=\"menu-panel\" *ngIf=\"item.Type === 'dropdown-submenu'\" keepItemContent=\"true\">\r\n        <kendo-panelbar-item [expanded]=\"true\">\r\n          <ng-template kendoPanelBarItemTitle>\r\n            <span *ngIf=\"item.Icon\">\r\n              <fa-icon [icon]=\"item.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n            </span>\r\n            <span *ngIf=\"!item.Icon\">\r\n              <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n            </span>\r\n            <ion-label class=\"zcard-header-title\">{{item.Label}}</ion-label>\r\n          </ng-template>\r\n          <ng-template kendoPanelBarContent class=\"menu-content-temp\">\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </ng-template>\r\n        </kendo-panelbar-item>\r\n      </kendo-panelbar> -->\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:120px;max-height:120px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{background-size:100%}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;top:12px;display:inline-block;position:absolute;text-align:center;font-size:1.4em;right:32%}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i5.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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i3$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3$4.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiappmenucontentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uiappmenucontent', template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col [ngClass]=\"getDivClass(item)\" *ngFor=\"let item of items; index as i\">\r\n      <div *ngIf=\"item.Type !== 'dropdown-submenu'\" class=\"menu-btn ion-activatable ripple-parent\"\r\n           (click)=\"menuOnClick(item.URL, item.AppClientPath)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon class=\"menu-icon\" [icon]=\"['fas', item.Icon ]\" [inverse]=\"true\"></fa-icon>\r\n          <ion-badge color=\"danger\" class=\"pending-counter\"\r\n                     *ngIf=\"item['PendingCounter'] && item['PendingCounter'] > 0\">\r\n            {{item['PendingCounter']}}\r\n          </ion-badge>\r\n        </ion-label>\r\n        <ion-label class=\"menu-btn-label-text\">{{item.Label}}</ion-label>\r\n        <ion-label *ngIf=\"item.Description\" class=\"menu-btn-label-text menu-btn-label-text-desc\">\r\n          {{item.Description}}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <kendo-card *ngIf=\"item.Type === 'dropdown-submenu'\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>{{item.Label}}</ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n\r\n      <!-- <kendo-panelbar class=\"menu-panel\" *ngIf=\"item.Type === 'dropdown-submenu'\" keepItemContent=\"true\">\r\n        <kendo-panelbar-item [expanded]=\"true\">\r\n          <ng-template kendoPanelBarItemTitle>\r\n            <span *ngIf=\"item.Icon\">\r\n              <fa-icon [icon]=\"item.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n            </span>\r\n            <span *ngIf=\"!item.Icon\">\r\n              <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n            </span>\r\n            <ion-label class=\"zcard-header-title\">{{item.Label}}</ion-label>\r\n          </ng-template>\r\n          <ng-template kendoPanelBarContent class=\"menu-content-temp\">\r\n            <app-uiappmenucontent [items]=\"getMenuList(item)\"></app-uiappmenucontent>\r\n          </ng-template>\r\n        </kendo-panelbar-item>\r\n      </kendo-panelbar> -->\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;justify-content:center;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:120px;max-height:120px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{background-size:100%}.pending-counter{background-color:#ff243a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;text-overflow:ellipsis;top:12px;display:inline-block;position:absolute;text-align:center;font-size:1.4em;right:32%}\n"] }]
@@ -4935,7 +4821,7 @@ class ZBulletComponent {
     }
 }
 ZBulletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZBulletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZBulletComponent, selector: "app-zbullet", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZBulletComponent, selector: "app-zbullet", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZBulletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zbullet', template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"] }]
@@ -5012,7 +4898,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
                     }
                 });
                 this.items.push(...this.leftBtns, ...this.rightBtns);
-            }), switchMap$1(() => {
+            }), switchMap(() => {
                 return super.translateButtonsLabel(this.items);
             })).subscribe();
         }
@@ -5043,7 +4929,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
     }
 }
 ZbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n       [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\"\r\n                          [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n       [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of leftBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of rightBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n       [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\"\r\n                          [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n       [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of leftBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of rightBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zbuttons", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n       [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\"\r\n                          [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n       [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of leftBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n                  *ngFor=\"let item of rightBtns; let i = index\" [ngClass]=\"item.class\" (click)=\"buttonClick(item)\"\r\n                  [hidden]=\"!isBtnVisible(item.visible)\" [disabled]=\"group.isTriggered\"\r\n                  [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
@@ -5148,7 +5034,7 @@ class ZdivComponent extends ContainerFieldBase {
     }
 }
 ZdivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zdiv', template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"] }]
@@ -5170,7 +5056,7 @@ class ZcardComponent extends ContainerFieldBase {
     }
 }
 ZcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcardComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i3$3.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i3$3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i3$3.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
+ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i3$4.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i3$4.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i3$4.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcard", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"] }]
@@ -5659,7 +5545,7 @@ class InputFieldBase extends FieldBase {
                     });
                 }
             }
-        }), switchMap(res => {
+        }), switchMap$1(res => {
             const eventName = 'triggerValidation';
             if (this.group) {
                 if (this.group[eventName]) {
@@ -5767,7 +5653,7 @@ class ZcheckboxComponent extends InputFieldBase {
     }
 }
 ZcheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcheckboxComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZcheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcheckboxComponent, selector: "app-zcheckbox", viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"], components: [{ type: i2$1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i3$4.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$4.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }] });
+ZcheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZcheckboxComponent, selector: "app-zcheckbox", viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"], components: [{ type: i2$1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i3$5.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZcheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcheckbox", template: "<div [formGroup]=\"form\" class=\"zcheckbox-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-checkbox *ngIf=\"!data.UseKendoSwitch && isMobileScreen()\" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                color=\"primary\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (ionChange)=\"onChange($event, $event.detail.checked)\" [style]=\"componentProperties.style.style1\"\r\n                class=\"e1tag-style1\"></ion-checkbox>\r\n  <!--Need to upgrade to latest kendo lib for the checkbox disabled to work-->\r\n  <div class=\"temp-for-k-checkbox\" *ngIf=\"!data.UseKendoSwitch && !isMobileScreen()\">\r\n    <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\" disabled\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n    <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n           type=\"checkbox\" kendoCheckBox [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n           (change)=\"onChange(null, $event.target.checked)\" [style]=\"componentProperties.style.style1\"\r\n           class=\"e1tag-style1\" />\r\n  </div>\r\n  <kendo-switch *ngIf=\"data.UseKendoSwitch \" [id]=\"data.Name\" [formControlName]=\"data.Value\"\r\n                [size]=\"data.Size ? data.Size : 'small'\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\" #checkbox>\r\n  </kendo-switch>\r\n</div>\r\n", styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}.temp-for-k-checkbox{margin-top:4px}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox:checked,:host ::ng-deep ion-item .k-checkbox.k-checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:var(--ion-color-primary);border:0px;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container{background-color:var(--ion-color-primary)}:host ::ng-deep kendo-switch.k-switch-on .k-switch-container:hover,:host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-hover :host ::ng-deep kendo-switch.k-switch-on .k-switch-container.k-state-hover{background-color:var(--ion-color-primary-shade)}\n"] }]
@@ -5849,7 +5735,7 @@ class ZChipComponent extends InputFieldBase {
     }
 }
 ZChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZChipComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZChipComponent, selector: "app-zchip", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\" [ngClass]=\"getClass(form, data)\"\r\n                     (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [label]=\"chip.Label\" [selected]=\"chip.Selected\"\r\n                  (mouseover)=\"mouseover($event, chip)\" [ngClass]=\"getChipClass(chip)\" [icon]=\"chip.Icon\"\r\n                  [selectedIcon]=\"chip.SelectedIcon\" (click)=\"chipChangeSelection(chip)\"\r\n                  [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".medium kendo-chip{padding:20px;margin:5px;font-size:15px;min-height:50px;height:55px;max-height:60px;min-width:280px;max-width:320px}.mediumHeight kendo-chip-list{max-height:400px;border:1px solid black;padding:5px 15px;overflow-x:auto;border-radius:10px;margin-right:15px;flex-wrap:nowrap}.vertical kendo-chip-list{display:flex;flex-direction:column}:host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background-color:#ebebeb;color:#424242}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected{background-color:#bafff6;color:#000;font-weight:600}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected:hover,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected:hover{background-color:#9afcf0}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-has-icon:hover{background-color:#b5b5b5;color:#000}:host ::ng-deep kendo-chip-list.customColor .chip-pointing{border:3px solid #1a63d9!important}\n"], components: [{ type: i3$2.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$2.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZChipComponent, selector: "app-zchip", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\" [ngClass]=\"getClass(form, data)\"\r\n                     (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [label]=\"chip.Label\" [selected]=\"chip.Selected\"\r\n                  (mouseover)=\"mouseover($event, chip)\" [ngClass]=\"getChipClass(chip)\" [icon]=\"chip.Icon\"\r\n                  [selectedIcon]=\"chip.SelectedIcon\" (click)=\"chipChangeSelection(chip)\"\r\n                  [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".medium kendo-chip{padding:20px;margin:5px;font-size:15px;min-height:50px;height:55px;max-height:60px;min-width:280px;max-width:320px}.mediumHeight kendo-chip-list{max-height:400px;border:1px solid black;padding:5px 15px;overflow-x:auto;border-radius:10px;margin-right:15px;flex-wrap:nowrap}.vertical kendo-chip-list{display:flex;flex-direction:column}:host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background-color:#ebebeb;color:#424242}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected{background-color:#bafff6;color:#000;font-weight:600}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected:hover,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected:hover{background-color:#9afcf0}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-has-icon:hover{background-color:#b5b5b5;color:#000}:host ::ng-deep kendo-chip-list.customColor .chip-pointing{border:3px solid #1a63d9!important}\n"], components: [{ type: i3$3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zchip', template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\" [ngClass]=\"getClass(form, data)\"\r\n                     (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [label]=\"chip.Label\" [selected]=\"chip.Selected\"\r\n                  (mouseover)=\"mouseover($event, chip)\" [ngClass]=\"getChipClass(chip)\" [icon]=\"chip.Icon\"\r\n                  [selectedIcon]=\"chip.SelectedIcon\" (click)=\"chipChangeSelection(chip)\"\r\n                  [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".medium kendo-chip{padding:20px;margin:5px;font-size:15px;min-height:50px;height:55px;max-height:60px;min-width:280px;max-width:320px}.mediumHeight kendo-chip-list{max-height:400px;border:1px solid black;padding:5px 15px;overflow-x:auto;border-radius:10px;margin-right:15px;flex-wrap:nowrap}.vertical kendo-chip-list{display:flex;flex-direction:column}:host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background-color:#ebebeb;color:#424242}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected{background-color:#bafff6;color:#000;font-weight:600}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-selected:hover,:host ::ng-deep kendo-chip-list.customColor .k-chip.k-selected:hover{background-color:#9afcf0}:host ::ng-deep kendo-chip-list.customColor .k-chip-filled.k-chip-has-icon:hover{background-color:#b5b5b5;color:#000}:host ::ng-deep kendo-chip-list.customColor .chip-pointing{border:3px solid #1a63d9!important}\n"] }]
@@ -6059,7 +5945,7 @@ class ZdaterangeComponent {
     }
 }
 ZdaterangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdaterangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdaterangeComponent, selector: "app-zdaterange", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "zdaterange", first: true, predicate: ["zdaterange"], descendants: true }], ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\r\n    </span>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n", styles: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$3.DateRangeComponent, selector: "kendo-daterange" }, { type: i2$3.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i2$3.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2$3.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }] });
+ZdaterangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdaterangeComponent, selector: "app-zdaterange", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "zdaterange", first: true, predicate: ["zdaterange"], descendants: true }], ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\r\n    </span>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n", styles: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$3.DateRangeComponent, selector: "kendo-daterange" }, { type: i2$3.DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i2$3.DateRangePopupComponent, selector: "kendo-daterange-popup", inputs: ["animate", "anchor", "anchorAlign", "appendTo", "collision", "popupAlign", "margin"], outputs: ["open", "close", "blur", "focus", "cancel"], exportAs: ["kendo-daterange-popup"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$3.DateRangeStartInputDirective, selector: "[kendoDateRangeStartInput]", inputs: ["autoCorrectOn", "navigateCalendarOnFocus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdaterangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zdaterange', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-daterange #zdaterange class=\"ion-row\">\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">Start</span> -->\r\n        <kendo-dateinput style=\"flex: 1;\" kendoDateRangeStartInput [(value)]=\"range.start\"\r\n        class=\"notmobile-input-field\"\r\n        [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"></kendo-dateinput>\r\n        <!-- </label> -->\r\n        <!-- <label style=\"flex: 1;\"> -->\r\n        <!-- <span class=\"label\">End</span> -->\r\n        <!-- <kendo-dateinput style=\"flex: 1;\" kendoDateRangeEndInput [(value)]=\"range.end\"></kendo-dateinput> -->\r\n        <!-- </label> -->\r\n\r\n        <kendo-daterange-popup [animate]=\"false\"></kendo-daterange-popup>\r\n      </kendo-daterange>\r\n    </span>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n", styles: [":host ::ng-deep kendo-daterange{font-size:var(--content-font-size)}:host ::ng-deep kendo-daterange .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-daterange:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-dateinput{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{padding-top:5px;font-size:14px}\n"] }]
@@ -6191,7 +6077,7 @@ class ZdatetimeComponent extends InputFieldBase {
     }
 }
 ZdatetimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdatetimeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { type: i2$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i2$3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i2$3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": DateIonicMinMaxParser, "dateFormatIonic": DateIonicFormatParser, "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser } });
+ZdatetimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdatetimeComponent, selector: "app-zdatetime", viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "timepicker", first: true, predicate: ["timepicker"], descendants: true }, { propertyName: "datetimepicker", first: true, predicate: ["datetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"], components: [{ type: i2$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { type: i2$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i2$3.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }, { type: i2$3.TimePickerComponent, selector: "kendo-timepicker", inputs: ["disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "rangeValidation", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dateMinMaxIonic": DateIonicMinMaxParser, "dateFormatIonic": DateIonicFormatParser, "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zdatetime", template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n\r\n  <ion-datetime *ngIf=\"isMobileScreen()\"\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\" (ionChange)=\"onChange($event.detail.value)\"\r\n                [min]=\"minDate | dateMinMaxIonic\" [max]=\"maxDate | dateMinMaxIonic\"\r\n                [placeholder]=\"data.PlaceHolder\" [displayFormat]=\"data | dateFormatIonic\" [pickerFormat]=\"data | dateFormatIonic\"\r\n                style=\"padding: 8px 0px;\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n  </ion-datetime>\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngSwitch]=\"data.Type\">\r\n    <kendo-datepicker *ngSwitchCase=\"'zshortdate'\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" [activeView]=\"'year'\"\r\n                      [bottomView]=\"'year'\" #datepicker>\r\n    </kendo-datepicker>\r\n    <kendo-datetimepicker *ngSwitchCase=\"'zuidatetime'\"\r\n                          [id]=\"data.Value\"\r\n                          [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                          [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                          [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                          [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                          calendarType=\"classic\" #datetimepicker>\r\n    </kendo-datetimepicker>\r\n    <kendo-timepicker *ngSwitchCase=\"['ztime','zuitime'].includes(data.Type) ? data.Type : ''\"\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #timepicker>\r\n    </kendo-timepicker>\r\n    <kendo-datepicker *ngSwitchDefault\r\n                      [id]=\"data.Value\"\r\n                      [value]=\"form.get(data.Value).value | dateParser : data\" (valueChange)=\"onChange($event)\"\r\n                      [min]=\"minDate\" [max]=\"maxDate\" [steps]=\"stepValue\"\r\n                      [placeholder]=\"data.PlaceHolder\" [format]=\"data | dateFormatKendo\"\r\n                      [style]=\"componentProperties.style.style1\" class=\"input-field e1tag-style1\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      #datepicker>\r\n    </kendo-datepicker>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-datepicker{color:var(--z-text-color)}:host ::ng-deep kendo-dateinput{font-size:var(--content-font-size)}:host ::ng-deep kendo-dateinput .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker .k-picker-wrap .k-dateinput .k-dateinput-wrap{margin:auto}:host ::ng-deep kendo-datetimepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datetimepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-datepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-datepicker.disabled .k-dateinput .k-dateinput-wrap,:host ::ng-deep kendo-timepicker.disabled .k-picker-wrap,:host ::ng-deep kendo-timepicker.disabled .k-dateinput .k-dateinput-wrap{background:transparent!important}:host ::ng-deep kendo-datetimepicker:focus-within,:host ::ng-deep kendo-datepicker:focus-within,:host ::ng-deep kendo-timepicker:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}\n"] }]
@@ -6330,13 +6216,13 @@ const hideAndShowVerticalAnimation = trigger('hideAndShowAnimation', [
 
 /********** Angular **********/
 class ZworkflowbuttonsComponent extends ButtonFieldBase {
-    constructor(componentService, fontAweSomeService, webApiService, resourceApiService, componentErrorHandler, workflowService) {
+    constructor(componentService, fontAweSomeService, webApiService, resourceApiService, componentErrorHandlerService, workflowService) {
         super(componentService);
         this.componentService = componentService;
         this.fontAweSomeService = fontAweSomeService;
         this.webApiService = webApiService;
         this.resourceApiService = resourceApiService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.workflowService = workflowService;
         // URL required
         // eslint-disable-next-line @typescript-eslint/naming-convention,no-underscore-dangle,id-blacklist,id-match
@@ -6429,7 +6315,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
                 else {
                     console.warn('unable to get workflow button. data returned null.');
                 }
-            }), switchMap$1(() => {
+            }), switchMap(() => {
                 return super.translateButtonsLabel(this.items);
             }), map(() => {
                 if (!this.data.DisableSyncWorkflowStatus) {
@@ -6473,19 +6359,6 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
         const formGroup = this.group.form;
         const attributes = JSON.parse(button.Attributes);
         const buttonTypeCode = button.TypeCode.toUpperCase();
-        // Skip if the button's click event includes backnavigation
-        if (buttonTypeCode === 'GOTO') {
-            // Check if the form has unsaved changes
-            if (!this.data.SkipCheckFormDirty && !formGroup.dirty) {
-                console.warn(`Record not saved because the form is not dirty.`);
-                return;
-            }
-            // Check if the form is valid
-            if (this.data.UseDefaultValidate && !formGroup.valid) {
-                this.componentErrorHandler.showFormGroupErrorMessage(this.group, formGroup);
-                return;
-            }
-        }
         // Type 1 == functional;
         // Type 2 == GOTO; 
         this.group.isTriggered = button.disableTrigger != undefined ? !button.disableTrigger : true;
@@ -6535,12 +6408,12 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
         return button.DisableTrigger != undefined ? button.DisableTrigger : (data.DisableTrigger != undefined ? data.DisableTrigger : false);
     }
 }
-ZworkflowbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZworkflowbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: ComponentErrorHandlerService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$2.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZworkflowbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZworkflowbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
+ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZworkflowbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zworkflowbuttons', template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: ComponentErrorHandlerService }, { type: i2.WorkflowService }]; } });
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WorkflowService }]; } });
 
 /********** Angular **********/
 class ZtextComponent extends InputFieldBase {
@@ -6674,7 +6547,7 @@ class ZtextComponent extends InputFieldBase {
     }
 }
 ZtextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextComponent, selector: "app-ztext", viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztext-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" clearOnEdit [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n    [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" [inputmode]=\"mapInputMode(data.Type)\"\r\n    [style]=\"componentProperties.style.style1\" (click)='onClick($event)'\r\n    (ionChange)=\"onChange($event, $event.target.value)\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-textbox *ngIf=\"!isMobileScreen()\" class=\"input-field e1tag-style1\" [id]=\"data.Value\"\r\n    [formControlName]=\"data.Value\" [style]=\"componentProperties.style.style1\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" [clearButton]=\"showClearButton\" [minlength]=\"data.MinLength\"\r\n    [maxlength]=\"data.MaxLength\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" (input)=\"onChange($event, $event.target.value)\"\r\n    (click)=\"onClick($event, $event.target.value)\" #textbox>\r\n    <ng-template kendoTextBoxSuffixTemplate *ngIf=\"adornmentList\">\r\n      <button kendoButton *ngIf=\"data.OnClick\" look=\"clear\" icon=\"close-circle\" class=\"textbox-clearbutton e1tag-style2\"\r\n        [style]=\"componentProperties.style.style2\" (click)=\"readOnlyOnClear()\"></button>\r\n      <!-- For Adornments feature -->\r\n      <div *ngFor=\"let adornment of adornmentList\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\" class=\"textbox-separator e1tag-style4\"\r\n          [style]=\"componentProperties.style.style4\">\r\n        </kendo-textbox-separator>\r\n        <button kendoButton [look]=\"adornmentLook(adornment)\" [icon]=\"adornment.Icon\"\r\n          (click)=\"onAdornmentClick(adornment)\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-textbox>\r\n</div>\r\n", styles: [".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)}.divtextbox{justify-content:space-between;width:99%}.k-textbox{color:var(--z-text-color)}.textbox-separator{margin-top:0}.textbox-clearbutton{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;outline:0;cursor:pointer;opacity:.5}.textbox-clearbutton:hover{opacity:100!important}.icon-button{text-align:center;padding-top:10px}.adornments-icon-mobile{margin-bottom:0;margin-left:5px;width:28px;height:28px}\n"], components: [{ type: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3$4.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: i3$4.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator" }], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { type: i3$2.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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZtextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextComponent, selector: "app-ztext", viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztext-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" clearOnEdit [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n    [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" [inputmode]=\"mapInputMode(data.Type)\"\r\n    [style]=\"componentProperties.style.style1\" (click)='onClick($event)'\r\n    (ionChange)=\"onChange($event, $event.target.value)\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-textbox *ngIf=\"!isMobileScreen()\" class=\"input-field e1tag-style1\" [id]=\"data.Value\"\r\n    [formControlName]=\"data.Value\" [style]=\"componentProperties.style.style1\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" [clearButton]=\"showClearButton\" [minlength]=\"data.MinLength\"\r\n    [maxlength]=\"data.MaxLength\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" (input)=\"onChange($event, $event.target.value)\"\r\n    (click)=\"onClick($event, $event.target.value)\" #textbox>\r\n    <ng-template kendoTextBoxSuffixTemplate *ngIf=\"adornmentList\">\r\n      <button kendoButton *ngIf=\"data.OnClick\" look=\"clear\" icon=\"close-circle\" class=\"textbox-clearbutton e1tag-style2\"\r\n        [style]=\"componentProperties.style.style2\" (click)=\"readOnlyOnClear()\"></button>\r\n      <!-- For Adornments feature -->\r\n      <div *ngFor=\"let adornment of adornmentList\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\" class=\"textbox-separator e1tag-style4\"\r\n          [style]=\"componentProperties.style.style4\">\r\n        </kendo-textbox-separator>\r\n        <button kendoButton [look]=\"adornmentLook(adornment)\" [icon]=\"adornment.Icon\"\r\n          (click)=\"onAdornmentClick(adornment)\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-textbox>\r\n</div>\r\n", styles: [".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)}.divtextbox{justify-content:space-between;width:99%}.k-textbox{color:var(--z-text-color)}.textbox-separator{margin-top:0}.textbox-clearbutton{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;outline:0;cursor:pointer;opacity:.5}.textbox-clearbutton:hover{opacity:100!important}.icon-button{text-align:center;padding-top:10px}.adornments-icon-mobile{margin-bottom:0;margin-left:5px;width:28px;height:28px}\n"], components: [{ type: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { 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: i3$5.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator" }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i3$5.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { 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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztext", template: "<div [formGroup]=\"form\" class=\"ztext-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" clearOnEdit [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n    [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" [inputmode]=\"mapInputMode(data.Type)\"\r\n    [style]=\"componentProperties.style.style1\" (click)='onClick($event)'\r\n    (ionChange)=\"onChange($event, $event.target.value)\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-textbox *ngIf=\"!isMobileScreen()\" class=\"input-field e1tag-style1\" [id]=\"data.Value\"\r\n    [formControlName]=\"data.Value\" [style]=\"componentProperties.style.style1\" [type]=\"mapInputType(data.Type)\"\r\n    [placeholder]=\"data.PlaceHolder\" [clearButton]=\"showClearButton\" [minlength]=\"data.MinLength\"\r\n    [maxlength]=\"data.MaxLength\"\r\n    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n    [style.text-align]=\"data.RightAlign ? 'right' : 'left'\" (input)=\"onChange($event, $event.target.value)\"\r\n    (click)=\"onClick($event, $event.target.value)\" #textbox>\r\n    <ng-template kendoTextBoxSuffixTemplate *ngIf=\"adornmentList\">\r\n      <button kendoButton *ngIf=\"data.OnClick\" look=\"clear\" icon=\"close-circle\" class=\"textbox-clearbutton e1tag-style2\"\r\n        [style]=\"componentProperties.style.style2\" (click)=\"readOnlyOnClear()\"></button>\r\n      <!-- For Adornments feature -->\r\n      <div *ngFor=\"let adornment of adornmentList\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\" class=\"textbox-separator e1tag-style4\"\r\n          [style]=\"componentProperties.style.style4\">\r\n        </kendo-textbox-separator>\r\n        <button kendoButton [look]=\"adornmentLook(adornment)\" [icon]=\"adornment.Icon\"\r\n          (click)=\"onAdornmentClick(adornment)\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-textbox>\r\n</div>\r\n", styles: [".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)}.divtextbox{justify-content:space-between;width:99%}.k-textbox{color:var(--z-text-color)}.textbox-separator{margin-top:0}.textbox-clearbutton{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;outline:0;cursor:pointer;opacity:.5}.textbox-clearbutton:hover{opacity:100!important}.icon-button{text-align:center;padding-top:10px}.adornments-icon-mobile{margin-bottom:0;margin-left:5px;width:28px;height:28px}\n"] }]
@@ -7151,7 +7024,7 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "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() && !data.Multiple\"\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]=\"true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && !data.EnableCheckbox\"\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]=\"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                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && data.EnableCheckbox\"\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                         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]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\">\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</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .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-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.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-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$5.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$2.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }], 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$1.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$5.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$5.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$5.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$5.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$2.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5$1.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "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() && !data.Multiple\"\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]=\"true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && !data.EnableCheckbox\"\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]=\"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                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && data.EnableCheckbox\"\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                         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]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\">\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</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .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-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.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-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}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: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$2.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$2.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5$1.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", 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() && !data.Multiple\"\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]=\"true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && !data.EnableCheckbox\"\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]=\"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                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\">\r\n    <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() && data.Multiple && data.EnableCheckbox\"\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                         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]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\">\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</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .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-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.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-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}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"] }]
@@ -7454,7 +7327,7 @@ class ZpostselectinputComponent extends InputFieldBase {
     }
 }
 ZpostselectinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZpostselectinputComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZpostselectinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZpostselectinputComponent, selector: "app-zpostselectinput", viewQueries: [{ propertyName: "comboBox", first: true, predicate: ["comboBox"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zpostselectinput-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div *ngIf=\"isMobileScreen() && !isLoading\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span class=\"ccinput-ccvalue-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <ionic-selectable #selectComponent item-content [id]=\"data.CCValue\" headerColor=\"primary\" clearButtonText=\"Clear\"\r\n        [canClear]=\"true\" searchFailText=\"Nothing found :(\" [canSearch]=\"!data['disable-search']\"\r\n        [placeholder]=\"data.CCPlaceHolder\" [(ngModel)]=\"group.zModel[data.CCValue]\"\r\n        [shouldFocusSearchbar]=\"!data['disable-search']\" [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n        (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\" [isMultiple]=\"data.Multiple\"\r\n        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n        [shouldStoreItemValue]=\"true\" [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style4\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n            size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style4\"></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\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text\r\n            *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n            color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n      </ionic-selectable>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n    </app-uivalidationmessage>\r\n  </div>\r\n  <div *ngIf=\"!isMobileScreen()\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span [style]=\"componentProperties.style.style2\" class=\"ccinput-ccvalue-container e1tag-style2\">\r\n      <kendo-combobox [id]=\"data.CCValue\" [data]=\"getItemsData()\" [valueField]=\"itemValueField\"\r\n        [textField]=\"itemTextField\" [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n        [placeholder]=\"data.CCPlaceHolder\" (valueChange)=\"onChangeCC_desktop($event)\" [filterable]=\"!!data.HasInfiniteScroll\"\r\n        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (filterChange)=\"handleFilter($event)\" (open)=\"handleOpen()\" (close)=\"handleClose()\" (blur)=\"handleBlur()\"\r\n        class=\"input-field e1tag-style3\" [loading]=\"isLoading\" [style]=\"componentProperties.style.style3\"\r\n        #comboBox>\r\n      </kendo-combobox>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n        <app-ztext [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n        [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style6\"\r\n        [style]=\"componentProperties.containerStyle.style6\">\r\n      </app-ztext>\r\n    </span>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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)}.ccinput-value-container{flex-basis:60%;margin-left:5px}.ccinput-ccvalue-container{flex-basis:35%}\n"], components: [{ type: i3$5.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.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: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: ZtextComponent, selector: "app-ztext" }], 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$1.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$5.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$5.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$5.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$5.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+ZpostselectinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZpostselectinputComponent, selector: "app-zpostselectinput", viewQueries: [{ propertyName: "comboBox", first: true, predicate: ["comboBox"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zpostselectinput-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div *ngIf=\"isMobileScreen() && !isLoading\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span class=\"ccinput-ccvalue-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <ionic-selectable #selectComponent item-content [id]=\"data.CCValue\" headerColor=\"primary\" clearButtonText=\"Clear\"\r\n        [canClear]=\"true\" searchFailText=\"Nothing found :(\" [canSearch]=\"!data['disable-search']\"\r\n        [placeholder]=\"data.CCPlaceHolder\" [(ngModel)]=\"group.zModel[data.CCValue]\"\r\n        [shouldFocusSearchbar]=\"!data['disable-search']\" [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n        (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\" [isMultiple]=\"data.Multiple\"\r\n        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n        [shouldStoreItemValue]=\"true\" [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style4\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n            size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style4\"></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\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text\r\n            *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n            color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n      </ionic-selectable>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n    </app-uivalidationmessage>\r\n  </div>\r\n  <div *ngIf=\"!isMobileScreen()\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span [style]=\"componentProperties.style.style2\" class=\"ccinput-ccvalue-container e1tag-style2\">\r\n      <kendo-combobox [id]=\"data.CCValue\" [data]=\"getItemsData()\" [valueField]=\"itemValueField\"\r\n        [textField]=\"itemTextField\" [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n        [placeholder]=\"data.CCPlaceHolder\" (valueChange)=\"onChangeCC_desktop($event)\" [filterable]=\"!!data.HasInfiniteScroll\"\r\n        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (filterChange)=\"handleFilter($event)\" (open)=\"handleOpen()\" (close)=\"handleClose()\" (blur)=\"handleBlur()\"\r\n        class=\"input-field e1tag-style3\" [loading]=\"isLoading\" [style]=\"componentProperties.style.style3\"\r\n        #comboBox>\r\n      </kendo-combobox>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n        <app-ztext [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n        [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style6\"\r\n        [style]=\"componentProperties.containerStyle.style6\">\r\n      </app-ztext>\r\n    </span>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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)}.ccinput-value-container{flex-basis:60%;margin-left:5px}.ccinput-ccvalue-container{flex-basis:35%}\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: i5.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: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: ZtextComponent, selector: "app-ztext" }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZpostselectinputComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zpostselectinput", template: "<div [formGroup]=\"form\" class=\"zpostselectinput-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div *ngIf=\"isMobileScreen() && !isLoading\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span class=\"ccinput-ccvalue-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <ionic-selectable #selectComponent item-content [id]=\"data.CCValue\" headerColor=\"primary\" clearButtonText=\"Clear\"\r\n        [canClear]=\"true\" searchFailText=\"Nothing found :(\" [canSearch]=\"!data['disable-search']\"\r\n        [placeholder]=\"data.CCPlaceHolder\" [(ngModel)]=\"group.zModel[data.CCValue]\"\r\n        [shouldFocusSearchbar]=\"!data['disable-search']\" [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n        (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\" [isMultiple]=\"data.Multiple\"\r\n        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n        [shouldStoreItemValue]=\"true\" [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style4\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n            size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style4\"></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\" class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text\r\n            *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n            color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n      </ionic-selectable>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n    </app-uivalidationmessage>\r\n  </div>\r\n  <div *ngIf=\"!isMobileScreen()\" style=\"display:flex; justify-content: space-between; width: 100%\" class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <span [style]=\"componentProperties.style.style2\" class=\"ccinput-ccvalue-container e1tag-style2\">\r\n      <kendo-combobox [id]=\"data.CCValue\" [data]=\"getItemsData()\" [valueField]=\"itemValueField\"\r\n        [textField]=\"itemTextField\" [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n        [placeholder]=\"data.CCPlaceHolder\" (valueChange)=\"onChangeCC_desktop($event)\" [filterable]=\"!!data.HasInfiniteScroll\"\r\n        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        (filterChange)=\"handleFilter($event)\" (open)=\"handleOpen()\" (close)=\"handleClose()\" (blur)=\"handleBlur()\"\r\n        class=\"input-field e1tag-style3\" [loading]=\"isLoading\" [style]=\"componentProperties.style.style3\"\r\n        #comboBox>\r\n      </kendo-combobox>\r\n    </span>\r\n    <span [formGroup]=\"form\" class=\"ccinput-value-container e1tag-style7\" [style]=\"componentProperties.containerStyle.style7\">\r\n        <app-ztext [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n        [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style6\"\r\n        [style]=\"componentProperties.containerStyle.style6\">\r\n      </app-ztext>\r\n    </span>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}.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)}.ccinput-value-container{flex-basis:60%;margin-left:5px}.ccinput-ccvalue-container{flex-basis:35%}\n"] }]
@@ -7477,10 +7350,12 @@ class ZnumericComponent extends InputFieldBase {
     }
     ngOnInit() {
         super.setupInnerField();
-        this.minValue = this.data.MinValue;
-        this.maxValue = this.data.MaxValue;
+        this.setInitMinAndMaxValue();
         super.focusOnDefault(this.focus.bind(this));
     }
+    ngOnDestroy() {
+        this.removeMinAndMaxValidator();
+    }
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
@@ -7503,9 +7378,53 @@ class ZnumericComponent extends InputFieldBase {
         }
         return false;
     }
+    setInitMinAndMaxValue() {
+        if (typeof this.data.MinValue == 'string' && this.data.MinValue.toString().startsWith('group.')) {
+            this.minValue = ZComponentHelper.getGroupValue(this.data.MinValue.toString(), this.group);
+        }
+        else {
+            this.minValue = this.data.MinValue;
+        }
+        if (typeof this.data.MaxValue == 'string' && this.data.MaxValue.toString().startsWith('group.')) {
+            this.maxValue = ZComponentHelper.getGroupValue(this.data.MaxValue.toString(), this.group);
+        }
+        else {
+            this.maxValue = this.data.MaxValue;
+        }
+        this.addMinAndMaxValidator();
+    }
+    addMinAndMaxValidator() {
+        // Setup form validator for ionic components only (Kendo component will be auto setup)
+        if (this.isMobileScreen()) {
+            const control = this.form.controls[this.data.Value];
+            if (this.minValue != undefined) {
+                this.minValidator = Validators.min(Number(this.minValue));
+                control.addValidators(this.minValidator);
+            }
+            if (this.maxValue != undefined) {
+                this.maxValidator = Validators.max(Number(this.maxValue));
+                control.addValidators(this.maxValidator);
+            }
+            control.updateValueAndValidity();
+        }
+    }
+    removeMinAndMaxValidator() {
+        this.minValue = null;
+        this.maxValue = null;
+        const control = this.form.controls[this.data.Value];
+        if (this.isMobileScreen()) {
+            if (control.hasValidator(this.minValidator)) {
+                control.removeValidators(this.minValidator);
+            }
+            if (control.hasValidator(this.maxValidator)) {
+                control.removeValidators(this.maxValidator);
+            }
+        }
+        control.updateValueAndValidity();
+    }
 }
 ZnumericComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZnumericComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZnumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZnumericComponent, selector: "app-znumeric", viewQueries: [{ propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" #znumericField [id]=\"data.Value\" type=\"number\"\r\n             [autocorrect]=\"data.AutoCorrect ? 'on' : 'off'\"\r\n             [min]=\"minValue\"\r\n             [max]=\"maxValue\"\r\n             [step]=\"data.StepValue\"\r\n             [inputmode]=\"inputMode\"\r\n             [formControlName]=\"data.Value\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [value]=\"0 | znumeric : form : data\"\r\n             [class.left-aligned]=\"this.data.RightAlign === false\"\r\n             [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [autoCorrect]=\"data.AutoCorrect\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [min]=\"minValue\"\r\n                        [max]=\"maxValue\"\r\n                        [step]=\"data.StepValue\"\r\n                        [format]=\"data.FormatOptions\" [id]=\"data.Value\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        class=\"input-field e1tag-style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [class.left-aligned]=\"this.data.RightAlign === false\"\r\n                        #numeric>\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"], components: [{ type: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i3$4.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"] }], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "znumeric": ZNumericParser } });
+ZnumericComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZnumericComponent, selector: "app-znumeric", viewQueries: [{ propertyName: "numeric", first: true, predicate: ["numeric"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" #znumericField [id]=\"data.Value\" type=\"number\"\r\n             [autocorrect]=\"data.AutoCorrect ? 'on' : 'off'\"\r\n             [min]=\"minValue\"\r\n             [max]=\"maxValue\"\r\n             [step]=\"data.StepValue\"\r\n             [inputmode]=\"inputMode\"\r\n             [formControlName]=\"data.Value\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [value]=\"0 | znumeric : form : data\"\r\n             [class.left-aligned]=\"this.data.RightAlign === false\"\r\n             [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [autoCorrect]=\"data.AutoCorrect\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [min]=\"minValue\"\r\n                        [max]=\"maxValue\"\r\n                        [step]=\"data.StepValue\"\r\n                        [format]=\"data.FormatOptions\" [id]=\"data.Value\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        class=\"input-field e1tag-style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [class.left-aligned]=\"this.data.RightAlign === false\"\r\n                        #numeric>\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"], components: [{ type: i2$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { 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"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "znumeric": ZNumericParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZnumericComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-znumeric', template: "<div [formGroup]=\"form\" class=\"znumeric-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-input *ngIf=\"isMobileScreen()\" #znumericField [id]=\"data.Value\" type=\"number\"\r\n             [autocorrect]=\"data.AutoCorrect ? 'on' : 'off'\"\r\n             [min]=\"minValue\"\r\n             [max]=\"maxValue\"\r\n             [step]=\"data.StepValue\"\r\n             [inputmode]=\"inputMode\"\r\n             [formControlName]=\"data.Value\"\r\n             [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             [placeholder]=\"data.PlaceHolder\"\r\n             [value]=\"0 | znumeric : form : data\"\r\n             [class.left-aligned]=\"this.data.RightAlign === false\"\r\n             [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </ion-input>\r\n  <kendo-numerictextbox *ngIf=\"!isMobileScreen()\"\r\n                        [spinners]=\"data.ShowSpinners\"\r\n                        [autoCorrect]=\"data.AutoCorrect\"\r\n                        [formControlName]=\"data.Value\"\r\n                        [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [min]=\"minValue\"\r\n                        [max]=\"maxValue\"\r\n                        [step]=\"data.StepValue\"\r\n                        [format]=\"data.FormatOptions\" [id]=\"data.Value\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        class=\"input-field e1tag-style1\"\r\n                        [value]=\"0 | znumeric : form : data\"\r\n                        (valueChange)=\"onChange(null, $event)\"\r\n                        [style]=\"componentProperties.style.style1\"\r\n                        [decimals]=\"data.DecimalPlace\"\r\n                        [class.left-aligned]=\"this.data.RightAlign === false\"\r\n                        #numeric>\r\n  </kendo-numerictextbox>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-numerictextbox:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-numerictextbox>input{text-align:right}:host ::ng-deep kendo-numerictextbox.left-aligned>input{text-align:left}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.k-numerictextbox{color:var(--z-text-color)}\n"] }]
@@ -7544,7 +7463,7 @@ class ZtextareaComponent extends InputFieldBase {
     }
 }
 ZtextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextareaComponent, selector: "app-ztextarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-textarea *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\"\r\n                [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [rows]=\"data.textAreaRows\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"></ion-textarea>\r\n  <kendo-textarea *ngIf=\"!isMobileScreen()\" [id]=\"data.Value\" class=\"input-field e1tag-style1\" [formControlName]=\"data.Value\"\r\n                  [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n                  [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [rows]=\"data.textAreaRows\" [autoSize]=\"!data.textAreaRows\" [resizable]=\"data.Resizable || 'none'\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  (valueChange)=\"onChange($event, $event)\" (click)=\"onItemClick($event)\" [style]=\"componentProperties.style.style1\" #textarea>\r\n\r\n    <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\" class=\"character-counter-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <span class=\"character-counter e1tag-style3\" [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n    </kendo-textarea-suffix>\r\n  </kendo-textarea>\r\n</div>\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}\n"], components: [{ type: i2$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i3$4.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3$4.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", exportAs: ["kendoTextAreaSuffix"] }], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ZtextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtextareaComponent, selector: "app-ztextarea", viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-textarea *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\"\r\n                [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [rows]=\"data.textAreaRows\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"></ion-textarea>\r\n  <kendo-textarea *ngIf=\"!isMobileScreen()\" [id]=\"data.Value\" class=\"input-field e1tag-style1\" [formControlName]=\"data.Value\"\r\n                  [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n                  [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [rows]=\"data.textAreaRows\" [autoSize]=\"!data.textAreaRows\" [resizable]=\"data.Resizable || 'none'\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  (valueChange)=\"onChange($event, $event)\" (click)=\"onItemClick($event)\" [style]=\"componentProperties.style.style1\" #textarea>\r\n\r\n    <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\" class=\"character-counter-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <span class=\"character-counter e1tag-style3\" [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n    </kendo-textarea-suffix>\r\n  </kendo-textarea>\r\n</div>\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}\n"], components: [{ type: i2$1.IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "value", "wrap"] }, { type: i3$5.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3$5.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", exportAs: ["kendoTextAreaSuffix"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztextarea', template: "<div [formGroup]=\"form\" class=\"ztextarea-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ion-textarea *ngIf=\"isMobileScreen()\" [id]=\"data.Value\" [formControlName]=\"data.Value\"\r\n                [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [rows]=\"data.textAreaRows\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"></ion-textarea>\r\n  <kendo-textarea *ngIf=\"!isMobileScreen()\" [id]=\"data.Value\" class=\"input-field e1tag-style1\" [formControlName]=\"data.Value\"\r\n                  [style.height]=\"data.Height ? data.Height : 'auto'\"\r\n                  [placeholder]=\"data.PlaceHolder\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [rows]=\"data.textAreaRows\" [autoSize]=\"!data.textAreaRows\" [resizable]=\"data.Resizable || 'none'\"\r\n                  [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                  (valueChange)=\"onChange($event, $event)\" (click)=\"onItemClick($event)\" [style]=\"componentProperties.style.style1\" #textarea>\r\n\r\n    <kendo-textarea-suffix *ngIf=\"data.IsShowCharacterCount\" class=\"character-counter-container e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <span class=\"character-counter e1tag-style3\" [style]=\"componentProperties.style.style3\">{{charCounterDisplayStr}}</span>\r\n    </kendo-textarea-suffix>\r\n  </kendo-textarea>\r\n</div>\r\n", styles: [".gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.character-counter-container{display:flex;justify-content:flex-end;padding:2px 5px;border-top-width:1px;border-top-style:solid;border-color:inherit;font-size:calc(var(--content-font-size) - 1px);color:var(--z-placeholder-color);background:#f0f0f0}\n"] }]
@@ -7867,7 +7786,7 @@ class ZuploadComponent extends InputFieldBase {
     }
 }
 ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$6.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$6.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
@@ -7903,7 +7822,7 @@ class ZimgComponent extends InputFieldBase {
         const guid = ZComponentHelper.getGroupValue(this.data['Guid'], this.group);
         const fileName = ZComponentHelper.getGroupValue(this.data['FileName'], this.group);
         if (guid && fileName) {
-            return from(this.attachmentService.getImageBlob(fileName, guid)).pipe(switchMap(blobfile => {
+            return from(this.attachmentService.getImageBlob(fileName, guid)).pipe(switchMap$1(blobfile => {
                 return from(this.attachmentService.convertBlobToBase64(blobfile));
             }));
         }
@@ -7919,7 +7838,7 @@ class ZimgComponent extends InputFieldBase {
     }
 }
 ZimgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZimgComponent, deps: [{ token: ZComponentService }, { token: i2.AttachmentService }], target: i0.ɵɵFactoryTarget.Component });
-ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZimgComponent, selector: "app-zimg", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""], 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ZimgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZimgComponent, selector: "app-zimg", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZimgComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zimg", template: "<div [formGroup]=\"form\" class=\"zimg-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <img *ngIf=\"imgSource\" class=\"e1tag-style1\" [src]=\"imgSource\" [style]=\"componentProperties.style.style1\"\r\n       (click)=\"onItemClick($event)\" />\r\n</div>\r\n", styles: [""] }]
@@ -7989,7 +7908,7 @@ class ZtexteditorComponent extends InputFieldBase {
     }
 }
 ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtexteditorComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-editor #editor [id]=\"data.Value\" [formControlName]=\"data.Value\" class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\" [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] :\r\n    componentProperties.isReadOnly)\" (valueChange)=\"onChange($event)\"\r\n    [pasteCleanupSettings]=\"pasteCleanupSettings\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i2$8.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "iframeCss", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i3$7.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3$7.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3$7.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2$8.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i2$8.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], 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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$8.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2$8.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2$8.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2$8.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2$8.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2$8.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2$8.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2$8.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2$8.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2$8.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2$8.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2$8.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2$8.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2$8.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2$8.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2$8.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2$8.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2$8.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2$8.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2$8.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2$8.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2$8.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2$8.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2$8.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2$8.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2$8.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2$8.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2$8.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$8.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2$8.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i2$8.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i2$8.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
+ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-editor #editor [id]=\"data.Value\" [formControlName]=\"data.Value\" class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\" [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] :\r\n    componentProperties.isReadOnly)\" (valueChange)=\"onChange($event)\"\r\n    [pasteCleanupSettings]=\"pasteCleanupSettings\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i2$8.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "iframeCss", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i3$8.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3$8.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3$8.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2$8.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$8.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i2$8.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$8.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2$8.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2$8.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2$8.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2$8.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2$8.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2$8.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2$8.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2$8.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2$8.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2$8.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2$8.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2$8.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2$8.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2$8.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2$8.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2$8.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2$8.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2$8.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2$8.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2$8.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2$8.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2$8.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2$8.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2$8.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2$8.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2$8.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2$8.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$8.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2$8.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i2$8.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i2$8.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtexteditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztexteditor', template: "<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-editor #editor [id]=\"data.Value\" [formControlName]=\"data.Value\" class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\" [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] :\r\n    componentProperties.isReadOnly)\" (valueChange)=\"onChange($event)\"\r\n    [pasteCleanupSettings]=\"pasteCleanupSettings\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"] }]
@@ -8000,11 +7919,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /********** Angular **********/
 class InputErrorMessageComponent extends FieldBase {
-    constructor(componentService, fontAweSomeService, componentErrorHandler, translationService) {
+    constructor(componentService, fontAweSomeService, componentErrorHandlerService, translationService) {
         super(componentService);
         this.componentService = componentService;
         this.fontAweSomeService = fontAweSomeService;
-        this.componentErrorHandler = componentErrorHandler;
+        this.componentErrorHandlerService = componentErrorHandlerService;
         this.translationService = translationService;
         this.errMsgList = [];
     }
@@ -8020,7 +7939,7 @@ class InputErrorMessageComponent extends FieldBase {
         }
         const isShow = !control.valid && !control.untouched;
         if (isShow) {
-            of(this.componentErrorHandler.getErrorMessageForInvalidInput(this.group, null, this.data.Value)).pipe(switchMap((errMessageTranslationInput) => {
+            of(this.componentErrorHandlerService.getErrorMessageForInvalidInput(this.group, null, this.data.Value)).pipe(switchMap$1((errMessageTranslationInput) => {
                 const obs = new Array();
                 errMessageTranslationInput.forEach(data => {
                     obs.push(this.translationService.$translateText(data.errorMessage, { translationVariables: data.translationVariables }));
@@ -8033,12 +7952,12 @@ class InputErrorMessageComponent extends FieldBase {
         return isShow;
     }
 }
-InputErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputErrorMessageComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: ComponentErrorHandlerService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+InputErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputErrorMessageComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.ComponentErrorHandlerService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
 InputErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputErrorMessageComponent, selector: "app-error", usesInheritance: true, ngImport: i0, template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"], components: [{ type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputErrorMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-error", template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: ComponentErrorHandlerService }, { type: i2.TranslationService }]; } });
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.ComponentErrorHandlerService }, { type: i2.TranslationService }]; } });
 
 /********** Angular **********/
 class InputFieldAddOnsComponent extends InputFieldBase {
@@ -8137,7 +8056,7 @@ class ZInputContainerComponent extends FieldBase {
         this.ztexteditor_type = ['ztexteditor'];
     }
     ngOnInit() {
-        super.initComponent().pipe(tap(() => {
+        super.initComponent({ isRegisterComponent: false }).pipe(tap(() => {
             this.setAddOnValue();
             this.componentService.setEditMode(this);
             this.data.zlayout = this.data.zlayout || (this.containerField ? this.containerField.zlayout : "row");
@@ -8169,7 +8088,7 @@ class ZInputContainerComponent extends FieldBase {
     }
 }
 ZInputContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\">\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: ZtextComponent, selector: "app-ztext" }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: ZdatetimeComponent, selector: "app-zdatetime" }, { type: ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: ZcheckboxComponent, selector: "app-zcheckbox" }, { type: ZnumericComponent, selector: "app-znumeric" }, { type: ZtextareaComponent, selector: "app-ztextarea" }, { type: ZuploadComponent, selector: "app-zupload" }, { type: ZimgComponent, selector: "app-zimg" }, { type: ZtexteditorComponent, selector: "app-ztexteditor" }, { type: InputErrorMessageComponent, selector: "app-error" }, { type: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i5$1.AsyncPipe, "inputText": ZInputParser } });
+ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\">\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: ZtextComponent, selector: "app-ztext" }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: ZdatetimeComponent, selector: "app-zdatetime" }, { type: ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: ZcheckboxComponent, selector: "app-zcheckbox" }, { type: ZnumericComponent, selector: "app-znumeric" }, { type: ZtextareaComponent, selector: "app-ztextarea" }, { type: ZuploadComponent, selector: "app-zupload" }, { type: ZimgComponent, selector: "app-zimg" }, { type: ZtexteditorComponent, selector: "app-ztexteditor" }, { type: InputErrorMessageComponent, selector: "app-error" }, { type: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i5$1.AsyncPipe, "inputText": ZInputParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zinput-container", template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\">\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n    <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n         [style]=\"componentProperties.containerStyle.style3\">\r\n      <!-- TODO: Add 1 more layer for this switch case-->\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n    <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n  </div>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:var(--content-font-size);display:flex;padding-left:20px}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"] }]
@@ -8403,7 +8322,7 @@ class ZgridComponent extends DataListingFieldBase {
                     }
                 }
             }
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return super.translateColumnHeader(this.columns);
         }));
     }
@@ -8726,7 +8645,7 @@ class ZgridComponent extends DataListingFieldBase {
             }
             this.setupGridWithInlineEdit();
             this.setupPopoverFeature(this.columns, this.getGridData());
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             if (this.isColumnHeaderTranslated) {
                 return of({});
             }
@@ -8781,7 +8700,7 @@ class ZgridComponent extends DataListingFieldBase {
         const _zgridComponent = this.zgrid.grid;
         const _columns = _zgridComponent.columns;
         of(this.columns)
-            .pipe(switchMap$1(() => {
+            .pipe(switchMap(() => {
             const configValue = _columns.toArray().map(item => {
                 const _zGridColumnSettings = Object.keys(item)
                     .filter(propName => {
@@ -8834,11 +8753,11 @@ class ZgridComponent extends DataListingFieldBase {
     }
     restoreGridSettings() {
         of(true)
-            .pipe(switchMap$1(() => {
+            .pipe(switchMap(() => {
             // Clear localstorage grid setting
             this.zGridStatePersistingService.remove(this.gridStorageKey);
             return of(true);
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             // delete cookiestore gridSetting by storagekey as name
             return this.mainService.cookieStoreDeleteMultiple(this.gridStorageKey);
         }), concatMap(() => {
@@ -9272,8 +9191,8 @@ class ZgridComponent extends DataListingFieldBase {
         this.gridTitle = newTitle;
     }
 }
-ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i4$1.FormBuilder }, { token: i2.AuthService }, { token: i2.WebApiService }, { token: i2.ZGridStatePersistingService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageSize]=\"state.take\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [skip]=\"state.skip\"\r\n                  [sort]=\"state.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"state.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                  (columnReorder)=\"columnsOrderChanged($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        <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\">{{ gridTitle }}</kendo-label>\r\n            <button type=\"button\" class=\"left-buttons\" 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            <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n              <span class=\"k-icon k-i-file-excel\"></span>\r\n              {{ getToolBarItemLabelName('Export Data to Excel') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.AllowSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\"\r\n                                  [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\">\r\n            </app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\">\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=\"gridDefaultStateExist\">\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\">\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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: '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    </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.style1{padding:8px 10px 20px;background:#ffffff;border-radius:5px}.grid-container.style2{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 0 10px;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}: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-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;box-shadow:1px 2px 4px #00000040;border:1px solid var(--ion-color-primary);color:var(--ion-color-primary);font-weight:600;height:28px;padding:5px}: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-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-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) + 6px)}: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-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),.05)}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}: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-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-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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}: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-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-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}: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-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}: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-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}: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-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-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-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}: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-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;font-weight:600}: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:#ffddc1}: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-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-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-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link: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-refresh: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-nav.k-link: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-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-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-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-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-grid .rightAligned{text-align:right}: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}.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: i6$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i7$1.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: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i7$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i7$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i7$1.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i7$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i7$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i7$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i7$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i7$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i7$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i7$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i7$1.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i7$1.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i7$1.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i7$1.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i7$1.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$4.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$4.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: i7$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i7$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i6$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i7$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i7$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$2.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: i7$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i7$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$1.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7$1.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: i7$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i7$1.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i7$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i7$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i7$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i7$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i7$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5$1.DatePipe, "number": i5$1.DecimalPipe }, animations: [
+ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i4.FormBuilder }, { token: i2.AuthService }, { token: i2.WebApiService }, { token: i2.ZGridStatePersistingService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageSize]=\"state.take\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [skip]=\"state.skip\"\r\n                  [sort]=\"state.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"state.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                  (columnReorder)=\"columnsOrderChanged($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        <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\">{{ gridTitle }}</kendo-label>\r\n            <button type=\"button\" class=\"left-buttons\" 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            <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n              <span class=\"k-icon k-i-file-excel\"></span>\r\n              {{ getToolBarItemLabelName('Export Data to Excel') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.AllowSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\"\r\n                                  [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\">\r\n            </app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\">\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=\"gridDefaultStateExist\">\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\">\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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: '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    </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.style1{padding:8px 10px 20px;background:#ffffff;border-radius:5px}.grid-container.style2{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 0 10px;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}: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-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;box-shadow:1px 2px 4px #00000040;border:1px solid var(--ion-color-primary);color:var(--ion-color-primary);font-weight:600;height:28px;padding:5px}: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-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-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) + 6px)}: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-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),.05)}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}: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-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-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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}: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-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-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}: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-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}: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-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}: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-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-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-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}: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-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;font-weight:600}: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:#ffddc1}: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-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-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-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link: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-refresh: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-nav.k-link: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-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-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-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-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-grid .rightAligned{text-align:right}: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}.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: i6$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i7$1.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: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i7$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i7$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i7$1.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i7$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i7$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i7$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i7$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i7$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i7$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i7$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i7$1.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i7$1.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i7$1.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i7$1.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i7$1.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: i7$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i7$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i6$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i7$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i7$1.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: i7$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i7$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7$1.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7$1.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i7$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i7$1.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i7$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i7$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i7$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i7$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i7$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5$1.DatePipe, "number": i5$1.DecimalPipe }, animations: [
         hideAndShowVerticalAnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridComponent, decorators: [{
@@ -9281,7 +9200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             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}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageSize]=\"state.take\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [skip]=\"state.skip\"\r\n                  [sort]=\"state.sort\"\r\n                  [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                  [filter]=\"state.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                  (columnReorder)=\"columnsOrderChanged($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        <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\">{{ gridTitle }}</kendo-label>\r\n            <button type=\"button\" class=\"left-buttons\" 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            <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n              <span class=\"k-icon k-i-file-excel\"></span>\r\n              {{ getToolBarItemLabelName('Export Data to Excel') }}\r\n            </button>\r\n          </div>\r\n          <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.AllowSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\"\r\n                                  [form]=\"form\"></app-zworkflowbuttons>\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\">\r\n            </app-zbuttons>\r\n            <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\">\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=\"gridDefaultStateExist\">\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\">\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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'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: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: 'HH:mm' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: '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    </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.style1{padding:8px 10px 20px;background:#ffffff;border-radius:5px}.grid-container.style2{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 0 10px;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}: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-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;box-shadow:1px 2px 4px #00000040;border:1px solid var(--ion-color-primary);color:var(--ion-color-primary);font-weight:600;height:28px;padding:5px}: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-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-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) + 6px)}: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-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),.05)}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}: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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}: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-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-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-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}: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-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-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}: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-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}: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-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}: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-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-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-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}: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-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;font-weight:600}: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:#ffddc1}: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-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-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-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link: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-refresh: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-nav.k-link: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-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-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-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-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-grid .rightAligned{text-align:right}: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}.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: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i4$1.FormBuilder }, { type: i2.AuthService }, { type: i2.WebApiService }, { type: i2.ZGridStatePersistingService }, { type: i2.ToastService }, { type: i2.ZCoreService }, { type: i2.StorageSessionService }, { type: MainService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tooltipDir: [{
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i4.FormBuilder }, { type: i2.AuthService }, { type: i2.WebApiService }, { type: i2.ZGridStatePersistingService }, { type: i2.ToastService }, { type: i2.ZCoreService }, { type: i2.StorageSessionService }, { type: MainService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tooltipDir: [{
                 type: ViewChild,
                 args: [TooltipDirective]
             }], elementContainer: [{
@@ -9364,7 +9283,7 @@ class ZgridContainerComponent extends FieldBase {
     }
 }
 ZgridContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridContainerComponent, deps: [{ token: ZComponentService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i3$3.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i3$3.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$3.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: ZgridComponent, selector: "app-zgrid" }, { type: PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
+ZgridContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZgridContainerComponent, selector: "app-zgrid-container", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "formPage", first: true, predicate: ["formPage"], descendants: true, read: ViewContainerRef }, { propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"], components: [{ type: i3$4.DrawerContainerComponent, selector: "kendo-drawer-container" }, { type: i3$4.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$4.DrawerContentComponent, selector: "kendo-drawer-content" }, { type: ZgridComponent, selector: "app-zgrid" }, { type: PageLoaderComponent, selector: "app-page-loader" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zgrid-container", template: "<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType === 'style2'\">\r\n  <kendo-drawer-container [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\">\r\n    <kendo-drawer #drawer mode=\"overlay\" [position]=\"'end'\" [mini]=\"false\" [animation]=\"{duration: 800}\" [expanded]=\"isShowFormPage\"\r\n      [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1\" [width]=\"innerWidth\"\r\n      (expandedChange)=\"onExpandChange($event)\">\r\n      <ng-template kendoDrawerTemplate>\r\n        <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n          <div class=\"formHeader\">\r\n            <label class=\"formHeader-title\">Employee Profile</label>\r\n            <ion-button size=\"small\" fill=\"clear\" color=\"medium\" (click)=\"drawer.toggle()\">\r\n              <fa-icon class=\"close-btn-icon\" icon=\"times\"></fa-icon>\r\n            </ion-button>\r\n          </div>\r\n          <ng-container #formPage></ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-drawer>\r\n\r\n    <kendo-drawer-content [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n      <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n        [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n        (showFormPage)=\"drawer.toggle($event)\">\r\n      </app-zgrid>\r\n    </kendo-drawer-content>\r\n  </kendo-drawer-container>\r\n</div>\r\n\r\n\r\n<div class=\"grid-container\" *ngIf=\"data.ComponentStyleType !== 'style2'\">\r\n  <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" [data]=\"data\"\r\n    [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n    (showFormPage)=\"toggleFormPage($event)\">\r\n  </app-zgrid>\r\n  <div>\r\n    <div *ngIf=\"!group.isLoading\" [class.embeddedFormPage]=\"isShowFormPage\">\r\n      <ng-container #formPage></ng-container>\r\n    </div>\r\n    <div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n      <app-page-loader></app-page-loader>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-drawer{box-shadow:-1px 0 11px 1px var(--ion-color-primary);background:#f1f9ff}:host ::ng-deep kendo-drawer .k-drawer-wrapper{padding:10px;padding-top:calc(var(--ion-header-height) + 10px)}:host ::ng-deep kendo-drawer .formHeader{display:flex}:host ::ng-deep kendo-drawer .formHeader>.formHeader-title{margin:10px 0 0 20px;font-size:calc(var(--page-title-font-size) + 2px);font-weight:600;flex-grow:1}:host ::ng-deep kendo-drawer .formHeader .close-btn-icon{font-size:calc(var(--page-title-font-size) + 4px)}.embeddedFormPage{min-height:1200px;padding:8px 10px 20px;background:#ffffff;border-radius:5px;box-shadow:0 -3px 9px 4px #0167ae;margin:30px 15px 15px}\n"] }]
@@ -9732,7 +9651,7 @@ class ZkcardComponent {
     }
 }
 ZkcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZkcardComponent, deps: [{ token: i2.FontAweSomeService }, { token: i2$2.ActivatedRoute }, { token: i2.ResourceApiService }, { token: i2.AuthService }, { token: i2.ZGridStatePersistingService }, { token: i2.WebApiService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZkcardComponent, selector: "app-zkcard", ngImport: i0, template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <scrollview-card [card]=\"card\"></scrollview-card>\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Continue &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">View &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('file-alt', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Start &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}.button-container{font-size:13px;height:30px}\n"], components: [{ type: i3$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3$3.CardBodyComponent, selector: "kendo-card-body" }, { type: i3$3.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4$3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i3$3.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i3$3.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
+ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZkcardComponent, selector: "app-zkcard", ngImport: i0, template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <scrollview-card [card]=\"card\"></scrollview-card>\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Continue &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">View &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('file-alt', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Start &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}.button-container{font-size:13px;height:30px}\n"], components: [{ type: i3$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i3$4.CardBodyComponent, selector: "kendo-card-body" }, { type: i3$4.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4$2.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i3$4.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$4.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i3$4.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZkcardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zkcard', template: "<!--<kendo-multiselect [data]=\"filterItems\" [value]=\"value\" [placeholder]=\"'Survey Status'\" [filterable]=\"true\"\r\n                   (valueChange)=\"valueChange($event)\"></kendo-multiselect>\r\n&nbsp;-->\r\n<div class=\"survey-card-list\">\r\n  <div *ngFor=\"let card of scrollViewCards.data\">\r\n    <scrollview-card [card]=\"card\"></scrollview-card>\r\n    <kendo-card class=\"custom-card-draft\" *ngIf=\"card.WFS_StatusName == 'Draft'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Continue &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-submit\" *ngIf=\"card.WFS_StatusName == 'Submitted'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>Survey Doc No: {{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">View &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('file-alt', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n\r\n    <kendo-card class=\"custom-card-new\" *ngIf=\"card.WFS_StatusName == 'New'\" [width]=\"'250px'\">\r\n      <kendo-card-header class=\"k-hbox\">\r\n        <div>\r\n          <h1 kendoCardTitle>{{ card.SurveyTemplateName }}</h1>\r\n          <p kendoCardSubtitle>{{card.DocumentNo}}</p>\r\n        </div>\r\n      </kendo-card-header>\r\n      <kendo-card-body class=\"card-body\">\r\n        Mill Name:  {{card.PartnerMillName}}\r\n        <br />\r\n        Survey Status: {{card.WFS_StatusName}}\r\n      </kendo-card-body>\r\n      <kendo-card-footer>\r\n        Survey Progression:\r\n        <kendo-progressbar style=\"width: 210px; border-radius:10px\" [value]=\"card.value\" [label]=\"label\" [progressCssStyle]=\"progressStyles\">\r\n        </kendo-progressbar>\r\n        <kendo-card-actions class=\"k-hbox-actionBtn\" orientation=\"horizontal\" [layout]=\"'end'\">\r\n          <ion-button fill=\"outline\"\r\n                      color=\"dark\"\r\n                      size=\"small\"\r\n                      strong=\"false\"\r\n                      class=\"button-container\"\r\n                      (click)=\"start(card)\">\r\n            <span class=\"ion-text-capitalize\">Start &nbsp;</span>\r\n            <fa-icon [icon]=\"getFontAwesome('play', fontAweSomeService)\" style=\"padding-left: 5px;\"></fa-icon>\r\n          </ion-button>\r\n        </kendo-card-actions>\r\n      </kendo-card-footer>\r\n    </kendo-card>\r\n  </div>\r\n</div>\r\n", styles: [".survey-card-list{display:flex;flex-wrap:wrap;background-color:#f0dcd9;align-items:center;border-radius:10px}.custom-card-submit{margin:20px;border:3px solid;border-color:green;border-radius:15px}.custom-card-draft,.custom-card-new{margin:20px;border:3px solid;border-color:orange;border-radius:15px}.button-container{font-size:13px;height:30px}\n"] }]
@@ -9754,7 +9673,7 @@ class ZlabelComponent extends InputFieldBase {
     }
 }
 ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZlabelComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZlabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zlabel', template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n          [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n          (click)=\"onItemClick($event, data)\">\r\n  <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\" *ngIf=\"componentProperties.icon\"\r\n             [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n               [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n      {{componentProperties.label}}\r\n    </ion-label>\r\n    <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n         class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.content-container{width:100%}\n"] }]
@@ -9937,7 +9856,7 @@ class ZmfbComponent extends ButtonFieldBase {
     }
 }
 ZmfbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZmfbComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ type: i3$2.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: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$3.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]" }, { type: i3$2.DialItemTemplateDirective, selector: "[kendoDialItemTemplate]" }] });
+ZmfbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZmfbComponent, selector: "app-zmfb", usesInheritance: true, ngImport: i0, template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"], components: [{ 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: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$4.AvatarComponent, selector: "kendo-avatar", inputs: ["shape", "size", "rounded", "themeColor", "fillMode", "fill", "border", "iconClass", "width", "height", "cssStyle", "initials", "icon", "imageSrc"] }], directives: [{ type: i5$1.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.4.0", ngImport: i0, type: ZmfbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmfb', template: "<div class=\"zmfb-wrap e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"k-overlay e1tag-style1\" *ngIf=\"dialOpen\" [style]=\"componentProperties.style.style1\"></div>\r\n  <kendo-floatingactionbutton buttonClass=\"custom-floating-button\" class=\"e1tag-style2\" dialClass=\"custom-floating-dial\"\r\n                              [positionMode]=\"positionMode\" [align]=\"align\" [dialItems]=\"items\" (blur)=\"onBlur()\" (focus)=\"onFocus()\"\r\n                              (open)=\"onOpen($event)\" (close)=\"onClose($event)\" (click)=\"buttonClick(data)\"\r\n                              (dialItemClick)=\"onDialItemClick($event)\" [style]=\"componentProperties.style.style2\">\r\n    <ng-template kendoFloatingActionButtonTemplate>\r\n      <fa-icon [icon]=\"data.Icon ? data.Icon : 'plus'\" class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      </fa-icon>\r\n    </ng-template>\r\n    <ng-template kendoDialItemTemplate let-item let-isFocused=\"isFocused\">\r\n      <span class=\"k-fab-item-text e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n        <span>{{ item.label }}</span>\r\n      </span>\r\n      <kendo-avatar shape=\"circle\" [themeColor]=\"buttonColor\" class=\"e1tag-style5\"\r\n                    [style]=\"componentProperties.style.style5\">\r\n        <span class=\"k-icon k-i-{{ item.icon }}\"></span>\r\n      </kendo-avatar>\r\n    </ng-template>\r\n  </kendo-floatingactionbutton>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-floatingactionbutton .custom-floating-button{background:var(--ion-color-primary);border:none!important;outline:none;height:55px;width:55px;z-index:999}:host ::ng-deep kendo-floatingactionbutton .custom-floating-button:hover{background:var(--ion-color-primary-tint)}.button-item{padding:8px 10px;width:100%;display:flex;align-items:center;background-color:#fff}.button-details{margin-left:8px;display:flex;flex-direction:column;align-items:flex-start}.custom-focused-class{box-shadow:inset 0 0 8px #0003}.zmfb-wrap{display:flex;justify-content:center;margin-top:60px}@media only screen and (max-device-width: 768px){.k-bottom-end,.k-pos-bottom-end{padding-bottom:16vh}}.k-top-end,.k-pos-top-end{padding-top:6.5vh;padding-right:1vw}\n"] }]
@@ -10103,7 +10022,7 @@ class ZquerybuilderComponent {
     }
 }
 ZquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZquerybuilderComponent, deps: [{ token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZquerybuilderComponent, selector: "app-zquerybuilder", inputs: { classNames: "classNames", data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: QueryBuilderComponent, descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [filters]='filters'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3$8.QueryBuilderComponent, selector: "query-builder", inputs: ["data", "allowRuleset", "allowCollapse", "emptyMessage", "config", "persistValueOnFieldChange", "value", "disabled", "classNames", "operatorMap", "parentValue", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback"] }, { type: i6$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$4.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: i3$4.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { type: i3$4.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$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i5$1.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$8.QuerySwitchGroupDirective, selector: "[querySwitchGroup]" }, { type: i3$8.QueryButtonGroupDirective, selector: "[queryButtonGroup]" }, { type: i3$8.QueryRemoveButtonDirective, selector: "[queryRemoveButton]" }, { type: i3$8.QueryFieldDirective, selector: "[queryField]" }, { type: i3$8.QueryOperatorDirective, selector: "[queryOperator]" }, { type: i3$8.QueryInputDirective, selector: "[queryInput]", inputs: ["queryInputType"] }, { type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$4.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }], pipes: { "json": i5$1.JsonPipe } });
+ZquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZquerybuilderComponent, selector: "app-zquerybuilder", inputs: { classNames: "classNames", data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: QueryBuilderComponent, descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [filters]='filters'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3$9.QueryBuilderComponent, selector: "query-builder", inputs: ["data", "allowRuleset", "allowCollapse", "emptyMessage", "config", "persistValueOnFieldChange", "value", "disabled", "classNames", "operatorMap", "parentValue", "parentArrowIconTemplate", "parentInputTemplates", "parentOperatorTemplate", "parentFieldTemplate", "parentEntityTemplate", "parentSwitchGroupTemplate", "parentButtonGroupTemplate", "parentRemoveButtonTemplate", "parentEmptyWarningTemplate", "parentChangeCallback", "parentTouchedCallback"] }, { type: i6$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { 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: i3$5.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { 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$3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$9.QuerySwitchGroupDirective, selector: "[querySwitchGroup]" }, { type: i3$9.QueryButtonGroupDirective, selector: "[queryButtonGroup]" }, { type: i3$9.QueryRemoveButtonDirective, selector: "[queryRemoveButton]" }, { type: i3$9.QueryFieldDirective, selector: "[queryField]" }, { type: i3$9.QueryOperatorDirective, selector: "[queryOperator]" }, { type: i3$9.QueryInputDirective, selector: "[queryInput]", inputs: ["queryInputType"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3$5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }], pipes: { "json": i5$1.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZquerybuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zquerybuilder', template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"qbcontainer\">\r\n    <query-builder [(ngModel)]='queryCtrl'\r\n                   [(config)]='currentConfig'\r\n                   [allowRuleset]='allowRuleset'\r\n                   [allowCollapse]='allowCollapse'\r\n                   [filters]='filters'\r\n                   [persistValueOnFieldChange]='persistValueOnFieldChange'>\r\n      <!--AND OR Swtich-->\r\n      <ng-container *querySwitchGroup=\"let ruleset; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"ruleset.condition\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"conditionList\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"text-transform: uppercase;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Rule RuleSet Remove Rule Set Button-->\r\n      <ng-container *queryButtonGroup=\"let ruleset; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet\">\r\n        <!--Add Rule Button-->\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRule()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add</span>\r\n        </ion-button>\r\n        <!--Add RuleSet Button-->\r\n        <ion-button *ngIf=\"addRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"addRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonadd\">\r\n          <fa-icon [icon]=\"'plus'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Add Rule Set</span>\r\n        </ion-button>\r\n        <!--Remove RuleSet Button-->\r\n        <ion-button *ngIf=\"removeRuleSet\"\r\n                    fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRuleSet()\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'times'\" style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule Set</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Remove Rule Button-->\r\n      <ng-container *queryRemoveButton=\"let rule; let removeRule=removeRule\">\r\n        <ion-button fill=\"outline\"\r\n                    size=\"small\"\r\n                    strong=\"false\"\r\n                    (click)=\"removeRule(rule)\"\r\n                    [disabled]=\"isDisabled\"\r\n                    class=\"buttonremove\">\r\n          <fa-icon [icon]=\"'minus'\"\r\n                   style=\"padding-right: 5px;\"></fa-icon>\r\n          <span class=\"ion-text-capitalize\">Remove Rule</span>\r\n        </ion-button>\r\n      </ng-container>\r\n      <!--Name dropdown-->\r\n      <ng-container *queryField=\"let rule; let fields=fields; let onChange=onChange; let getFields=getFields\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.field\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getFields(rule.entity)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Operator dropdown-->\r\n      <ng-container *queryOperator=\"let rule; let operators=operators; let onChange=onChange\" style=\"padding:10px\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.operator\"\r\n                            (ngModelChange)=\"onChange($event, rule)\"\r\n                            [data]=\"getOperators(operators, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\"\r\n                            style=\"padding-right:10px;\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--Text Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'string'; let onChange=onChange\">\r\n        <kendo-textbox [(ngModel)]=\"rule.value\"\r\n                       (ngModelChange)=\"onChange()\"\r\n                       [clearButton]=\"true\"\r\n                       [disabled]=\"isDisabled\"\r\n                       class=\"customTextbox\">\r\n        </kendo-textbox>\r\n      </ng-container>\r\n      <!--TextArea Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'textarea'; let onChange=onChange\">\r\n        <kendo-textarea [(ngModel)]=\"rule.value\"\r\n                        (ngModelChange)=\"onChange()\"\r\n                        [rows]=\"5\"\r\n                        [cols]=\"40\"\r\n                        resizable=\"none\"\r\n                        [disabled]=\"isDisabled\">\r\n        </kendo-textarea>\r\n      </ng-container>\r\n      <!--Number Field-->\r\n      <ng-container *queryInput=\"let rule; let field=field; type: 'number'; let onChange=onChange\">\r\n        <kendo-numerictextbox [(ngModel)]=\"rule.value\"\r\n                              (ngModelChange)=\"onChange()\"\r\n                              [value]=\"value\"\r\n                              [decimals]=\"0\"\r\n                              [disabled]=\"isDisabled\">\r\n        </kendo-numerictextbox>\r\n      </ng-container>\r\n      <!--Date Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'date'; let onChange=onChange\">\r\n        <kendo-datepicker [(ngModel)]=\"rule.value\"\r\n                          (ngModelChange)=\"onChange()\"\r\n                          calendarType=\"classic\"\r\n                          [value]=\"value\"\r\n                          [disabled]=\"isDisabled\">\r\n        </kendo-datepicker>\r\n      </ng-container>\r\n      <!--Category Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'category'; let onChange=onChange\">\r\n        <kendo-dropdownlist [(ngModel)]=\"rule.value\"\r\n                            (ngModelChange)=\"onChange()\"\r\n                            [data]=\"getOptionList(options, rule)\"\r\n                            textField=\"name\"\r\n                            valueField=\"value\"\r\n                            [value]=\"value\"\r\n                            [valuePrimitive]=\"true\"\r\n                            [disabled]=\"isDisabled\">\r\n        </kendo-dropdownlist>\r\n      </ng-container>\r\n      <!--DropDown MultiSelect Field-->\r\n      <ng-container *queryInput=\"let rule; let options=options; type: 'multiselect'; let onChange=onChange\">\r\n        <kendo-multiselect [(ngModel)]=\"rule.value\"\r\n                           (ngModelChange)=\"onChange()\"\r\n                           [data]=\"getOptionList(options, rule)\"\r\n                           textField=\"name\"\r\n                           valueField=\"value\"\r\n                           [value]=\"value\"\r\n                           [valuePrimitive]=\"true\"\r\n                           [autoClose]=\"false\"\r\n                           style=\"width:30%\"\r\n                           [disabled]=\"isDisabled\">\r\n        </kendo-multiselect>\r\n      </ng-container>\r\n      <!--Boolean Field-->\r\n      <ng-container *queryInput=\"let rule; type: 'boolean'; let onChange=onChange\">\r\n        <input type=\"checkbox\"\r\n               [(ngModel)]=\"rule.value\"\r\n               (ngModelChange)=\"onChange()\"\r\n               class=\"customCheckBox\"\r\n               [disabled]=\"isDisabled\"\r\n               kendoCheckBox />\r\n      </ng-container>\r\n    </query-builder>\r\n    <br>\r\n    <div *ngIf=\"data.ShowQueryResult\">\r\n      <div>\r\n        <label>Query Result</label>\r\n      </div>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                [cols]=\"40\">{{queryCtrl | json}}</textarea>\r\n      <br>\r\n    </div>\r\n    <div style=\"width:100%\" slot=\"end\">\r\n      <ion-button *ngIf=\"!isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(true, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Apply</span>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"isDisabled\"\r\n                  strong=\"false\"\r\n                  (click)=\"completeRule(false, null)\"\r\n                  class=\"buttonapply\">\r\n        <fa-icon [icon]=\"'save'\" style=\"padding-right: 5px;\"></fa-icon>\r\n        <span class=\"ion-text-capitalize\">Undo Apply</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}.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)}:host ::ng-deep query-builder .k-dropdown .k-dropdown-wrap,:host ::ng-deep query-builder .k-dropdowntree .k-dropdown-wrap{background-color:#fff}:host ::ng-deep query-builder .customTextbox{width:calc(100% - 440px);min-width:230px}:host ::ng-deep query-builder .customCheckBox{width:27px;height:27px}:host ::ng-deep query-builder .buttonadd{background-color:#479400;color:#fff;border-color:#479400}:host ::ng-deep query-builder .buttonremove{background-color:#f04141;color:#fff;border-color:#f04141;margin-top:0}.buttonapply{background-color:#5596e6;color:#fff;border-color:#5596e6}\n"] }]
@@ -10252,7 +10171,7 @@ class ZreportComponent extends FieldBase {
     }
 }
 ZreportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZreportComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.ResourceApiService }], target: i0.ɵɵFactoryTarget.Component });
-ZreportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZreportComponent, selector: "app-zreport", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ["reportViewer1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div width=\"100%\" height=\"800px\">\r\n  <!--<ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.refreshReport()\">\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Refresh</span>\r\n  </ion-button>\r\n\r\n  <ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.commands.print.exec()\">\r\n    <fa-icon [icon]=\"getFontAwesome('print')\"></fa-icon>\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Print</span>\r\n  </ion-button>-->\r\n\r\n  <tr-viewer #reportViewer1\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [scale]=\"1.0\"\r\n             [enableAccessibility]=\"false\"\r\n             [ready]=\"ready\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [exportBegin]=\"exportBeginHandler\"\r\n             [exportEnd]=\"exportEndHandler\"\r\n             [pageReady]=\"onPageReady\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: ["#reportViewer1{height:200px}#reportViewer1 .k-splitter .k-scrollable{overflow:hidden}.k-pdf-export,.k-pdf-export *{font-family:Arial Unicode MS}\n"], components: [{ type: i3$9.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["keepClientAlive", "id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }] });
+ZreportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZreportComponent, selector: "app-zreport", host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "viewer", first: true, predicate: ["reportViewer1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div width=\"100%\" height=\"800px\">\r\n  <!--<ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.refreshReport()\">\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Refresh</span>\r\n  </ion-button>\r\n\r\n  <ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.commands.print.exec()\">\r\n    <fa-icon [icon]=\"getFontAwesome('print')\"></fa-icon>\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Print</span>\r\n  </ion-button>-->\r\n\r\n  <tr-viewer #reportViewer1\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [scale]=\"1.0\"\r\n             [enableAccessibility]=\"false\"\r\n             [ready]=\"ready\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [exportBegin]=\"exportBeginHandler\"\r\n             [exportEnd]=\"exportEndHandler\"\r\n             [pageReady]=\"onPageReady\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: ["#reportViewer1{height:200px}#reportViewer1 .k-splitter .k-scrollable{overflow:hidden}.k-pdf-export,.k-pdf-export *{font-family:Arial Unicode MS}\n"], components: [{ type: i3$a.TelerikReportViewerComponent, selector: "tr-viewer", inputs: ["keepClientAlive", "id", "serviceUrl", "reportServer", "templateUrl", "initialPageAreaImageUrl", "reportSource", "sendEmail", "parameters", "scale", "scaleMode", "viewMode", "pageMode", "persistSession", "parameterEditors", "authenticationToken", "printMode", "selector", "disabledButtonClass", "checkedButtonClass", "enableAccessibility", "searchMetadataOnDemand", "parametersAreaVisible", "documentMapVisible", "ready", "error", "parametersAreaPosition", "documentMapAreaPosition", "exportBegin", "exportEnd", "sendEmailBegin", "sendEmailEnd", "pageReady", "printBegin", "printEnd", "renderingBegin", "renderingEnd", "updateUi", "interactiveActionExecuting", "interactiveActionEnter", "interactiveActionLeave", "viewerToolTipOpening", "containerStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZreportComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zreport", template: "<div width=\"100%\" height=\"800px\">\r\n  <!--<ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.refreshReport()\">\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Refresh</span>\r\n  </ion-button>\r\n\r\n  <ion-button class=\"button-container\"\r\n              fill=\"outline\"\r\n              color=\"dark\"\r\n              size=\"small\"\r\n              strong=\"false\"\r\n              [hidden]=\"false\"\r\n              [disabled]=\"false\"\r\n              (click)=\"ReportViewer.commands.print.exec()\">\r\n    <fa-icon [icon]=\"getFontAwesome('print')\"></fa-icon>\r\n    <div style=\"padding-right: 5px;\"></div>\r\n    <span class=\"ion-text-capitalize\">Print</span>\r\n  </ion-button>-->\r\n\r\n  <tr-viewer #reportViewer1\r\n             [containerStyle]=\"viewerContainerStyle\"\r\n             [serviceUrl]=\"resourceURL\"\r\n             [reportSource]=\"ReportSource\"\r\n             [viewMode]=\"'INTERACTIVE'\"\r\n             [scaleMode]=\"'SPECIFIC'\"\r\n             [scale]=\"1.0\"\r\n             [enableAccessibility]=\"false\"\r\n             [ready]=\"ready\"\r\n             [viewerToolTipOpening]=\"viewerToolTipOpening\"\r\n             [exportBegin]=\"exportBeginHandler\"\r\n             [exportEnd]=\"exportEndHandler\"\r\n             [pageReady]=\"onPageReady\"\r\n             [renderingEnd]=\"onRenderingEnd\">\r\n  </tr-viewer>\r\n</div>\r\n", styles: ["#reportViewer1{height:200px}#reportViewer1 .k-splitter .k-scrollable{overflow:hidden}.k-pdf-export,.k-pdf-export *{font-family:Arial Unicode MS}\n"] }]
@@ -10508,7 +10427,7 @@ class ZschedulerComponent {
     }
 }
 ZschedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZschedulerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.StorageSessionService }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZschedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZschedulerComponent, selector: "app-zscheduler", inputs: { data: "data", group: "group", form: "form", ngStyle: "ngStyle" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n                   [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\"\r\n                   (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n                   [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n    <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n    <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n\r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\">\r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>\r\n", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "slotClass", "eventClass", "eventStyles", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport"] }, { type: ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: ["local", "selectedDate"] }, { type: i3.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }, { type: i3.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { type: i3.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3.ShortcutsDirective, selector: "kendo-scheduler" }, { type: i3.DataBindingDirective, selector: "[kendoSchedulerBinding]", inputs: ["kendoSchedulerBinding"] }, { type: i3.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { type: i3.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { type: i3.AllDaySlotTemplateDirective, selector: "[kendoSchedulerAllDaySlotTemplate]" }, { type: i3.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }], pipes: { "kendoDate": i5$2.DatePipe } });
+ZschedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZschedulerComponent, selector: "app-zscheduler", inputs: { data: "data", group: "group", form: "form", ngStyle: "ngStyle" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n                   [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\"\r\n                   (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n                   [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n    <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n    <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n\r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\">\r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>\r\n", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3$1.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "slotClass", "eventClass", "eventStyles", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport"] }, { type: ZSchedulerToolBarComponent, selector: "zschedulertoolbar", inputs: ["local", "selectedDate"] }, { type: i3$1.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }, { type: i3$1.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3$1.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { type: i3$1.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { type: i3$1.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3$1.ShortcutsDirective, selector: "kendo-scheduler" }, { type: i3$1.DataBindingDirective, selector: "[kendoSchedulerBinding]", inputs: ["kendoSchedulerBinding"] }, { type: i3$1.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { type: i3$1.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { type: i3$1.AllDaySlotTemplateDirective, selector: "[kendoSchedulerAllDaySlotTemplate]" }, { type: i3$1.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }], pipes: { "kendoDate": i5$2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZschedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zscheduler", template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <kendo-scheduler *ngIf=\"!isLoading\" [kendoSchedulerBinding]=\"events\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\r\n                   [selectedViewIndex]=\"selectedViewIndex\" [eventStyles]=\"getEventStyles\" [slotClass]=\"getSlotClass\"\r\n                   (slotDblClick)=\"onSlotDblClick($event)\" (eventDblClick)=\"onEventDblClick($event)\" scrollTime=\"08:00\"\r\n                   [style.height]=\"(!!data.Height ? [data.Height] : '600px')\">\r\n    <!-- [style.font-size]=\"(!!data.FontSize ? [data.FontSize] : '12px')\"> -->\r\n    <!--Note: line-height same with [eventHeight]-->\r\n    <ng-template kendoSchedulerEventTemplate let-event>\r\n      <span style=\"margin-left: -5px;line-height: 25px;\">{{ event.title }}</span>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerToolbarTemplate let-selectedDate=\"selectedDate\">\r\n      <zschedulertoolbar [local]=\"local\" [selectedDate]=\"selectedDate\">\r\n      </zschedulertoolbar>\r\n      <ul kendoSchedulerToolbarViewSelector></ul>\r\n    </ng-template>\r\n\r\n    <ng-template kendoSchedulerAllDaySlotTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: 'dd-MMM-yyyy' }}</strong>\r\n    </ng-template>\r\n    <ng-template kendoSchedulerDateHeaderTemplate let-date=\"date\">\r\n      <strong>{{ date | kendoDate: \"ccc\" }}</strong>\r\n    </ng-template>\r\n\r\n\r\n    <!-- <kendo-scheduler-day-view startTime=\"08:00\">\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view startTime=\"08:00\">\r\n    </kendo-scheduler-week-view> -->\r\n\r\n    <kendo-scheduler-day-view>\r\n    </kendo-scheduler-day-view>\r\n\r\n    <kendo-scheduler-week-view>\r\n    </kendo-scheduler-week-view>\r\n\r\n    <kendo-scheduler-month-view [eventHeight]=\"25\">\r\n    </kendo-scheduler-month-view>\r\n\r\n    <!-- <kendo-scheduler-timeline-view>\r\n    </kendo-scheduler-timeline-view> -->\r\n\r\n    <kendo-scheduler-agenda-view>\r\n    </kendo-scheduler-agenda-view>\r\n  </kendo-scheduler>\r\n\r\n</ion-item>\r\n", styles: ["ion-item{--padding-start: 0px;--inner-padding-end: 0px}\n"] }]
@@ -10559,7 +10478,7 @@ class ZtabComponent extends ContainerFieldBase {
         };
     }
     ngOnInit() {
-        super.initComponent().pipe(switchMap$1(() => {
+        super.initComponent().pipe(switchMap(() => {
             if (this.data.TabItems && this.data.TabItems.length > 0) {
                 return this.translationService.$translateItemList(this.data.TabItems, "Label", { elementName: this.group.fieldName, group: this.group });
             }
@@ -10705,7 +10624,7 @@ class ZtabComponent extends ContainerFieldBase {
     }
 }
 ZtabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtabComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }, { token: i2.StorageSessionService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtabComponent, selector: "app-ztab", viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item{font-weight:600;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:4px;border-bottom:5px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"], components: [{ type: i3$3.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i3$3.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: i5.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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$3.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i3$3.TabContentDirective, selector: "[kendoTabContent]" }], pipes: { "tabfilter": TabFilter } });
+ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtabComponent, selector: "app-ztab", viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item{font-weight:600;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:4px;border-bottom:5px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"], components: [{ type: i3$4.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i3$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: i5.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.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$4.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i3$4.TabContentDirective, selector: "[kendoTabContent]" }], pipes: { "tabfilter": TabFilter } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztab', template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style1 .k-tabstrip-items-wrapper .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item{font-weight:600;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:4px;border-bottom:5px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab.style2 .k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"] }]
@@ -11288,12 +11207,12 @@ class ZtreelistComponent extends DataListingFieldBase {
         this.options.aggregate = [];
         this.options.pageAble = this.data.pageAble != undefined ? this.data.pageAble : false;
         let zfields = [];
-        this.fieldService.getFormFieldCode(this.data["ColumnFieldCode"], "FormField", null, null).pipe(switchMap$1(fields => {
+        this.fieldService.getFormFieldCode(this.data["ColumnFieldCode"], "FormField", null, null).pipe(switchMap(fields => {
             zfields = fields;
             return this.getButtonsFromZButtons(fields);
         }), tap$1((buttons) => {
             this.setTreeListColumns(zfields, buttons);
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return forkJoin([this.getDataBinding(), super.translateColumnHeader(this.options.columns)]);
         }), tap$1(data => {
             this.createFormControlsForInlineEdit(data[0]);
@@ -11332,7 +11251,7 @@ class ZtreelistComponent extends DataListingFieldBase {
         const zbuttonResult = [];
         fields.forEach(field => {
             if (field.Type === "zbuttons" && ZComponentHelper.getGroupValue(field.gridColVisible, this.group)) {
-                zbuttonResult.push(this.fieldService.getFormFieldCode(field.Value, "FormField", null, null).pipe(switchMap$1(buttons => {
+                zbuttonResult.push(this.fieldService.getFormFieldCode(field.Value, "FormField", null, null).pipe(switchMap(buttons => {
                     return of({ field, buttons });
                 })));
             }
@@ -11357,7 +11276,7 @@ class ZtreelistComponent extends DataListingFieldBase {
                     color: button.Color
                 });
             }));
-        }), switchMap$1(() => {
+        }), switchMap(() => {
             return of(buttonCmd);
         }));
     }
@@ -11657,7 +11576,7 @@ class ZtreelistComponent extends DataListingFieldBase {
     }
 }
 ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.WebApiService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [style]=\"componentProperties.style.style2\" class=\"desktop-grid e1tag-style2\" [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\" (cellClick)=\"cellClickHandler($event)\" [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\" [filterable]=\"options.filterable\" [reorderable]=\"false\" [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\" [aggregate]=\"options.aggregate\" [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"data.PageSize\" [isExpanded]=\"isExpanded\"\r\n                    (filterChange)=\"onFilterChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\r\n                    kendoTreeListExpandable treelist>\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <!-- <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span> -->\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-treelist.desktop-grid{border-width:0px!important;width:100%!important;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 10px 10px;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-button{border-radius:5px;border:1px solid var(--ion-color-dark);box-shadow:2px 2px 2px #08012c;background:var(--ion-color-dark-contrast);color:var(--ion-color-dark);margin-left:10px;font-weight:600;height:36px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button .k-icon{font-size:20px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button:hover{background:var(--ion-color-dark-contrast-shade)}:host ::ng-deep kendo-treelist.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 .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-treelist.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,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .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{color:var(--ion-color-primary-contrast);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{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{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.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{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.12)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.05)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;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{background-color:rgba(var(--ion-color-primary-rgb),.35);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.8);color:var(--ion-color-primary-contrast);border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link{color:var(--ion-color-primary-contrast);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{color:var(--ion-color-primary-contrast);background-color:var(--ion-color-primary-shade);background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5))}: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{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.treelistTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px}.treelistTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:4px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toobar-left-item{flex-grow:1;display:flex}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}.ztree-inline-block{display:inline-block}\n"], components: [{ type: i4$4.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$4.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$4.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i7$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i7$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i7$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i7$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i7$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i7$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i7$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i4$4.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$4.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$4.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$4.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$4.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$4.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$4.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$4.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$4.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$4.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$4.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$4.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$4.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$4.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$4.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$4.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$4.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$4.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$4.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$4.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$4.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$4.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5$1.DatePipe, "number": i5$1.DecimalPipe, "titlecase": i5$1.TitleCasePipe } });
+ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [style]=\"componentProperties.style.style2\" class=\"desktop-grid e1tag-style2\" [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\" (cellClick)=\"cellClickHandler($event)\" [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\" [filterable]=\"options.filterable\" [reorderable]=\"false\" [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\" [aggregate]=\"options.aggregate\" [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"data.PageSize\" [isExpanded]=\"isExpanded\"\r\n                    (filterChange)=\"onFilterChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\r\n                    kendoTreeListExpandable treelist>\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <!-- <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span> -->\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-treelist.desktop-grid{border-width:0px!important;width:100%!important;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 10px 10px;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-button{border-radius:5px;border:1px solid var(--ion-color-dark);box-shadow:2px 2px 2px #08012c;background:var(--ion-color-dark-contrast);color:var(--ion-color-dark);margin-left:10px;font-weight:600;height:36px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button .k-icon{font-size:20px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button:hover{background:var(--ion-color-dark-contrast-shade)}:host ::ng-deep kendo-treelist.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 .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-treelist.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,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .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{color:var(--ion-color-primary-contrast);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{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{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.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{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.12)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.05)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;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{background-color:rgba(var(--ion-color-primary-rgb),.35);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.8);color:var(--ion-color-primary-contrast);border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link{color:var(--ion-color-primary-contrast);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{color:var(--ion-color-primary-contrast);background-color:var(--ion-color-primary-shade);background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5))}: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{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.treelistTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px}.treelistTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:4px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toobar-left-item{flex-grow:1;display:flex}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}.ztree-inline-block{display:inline-block}\n"], components: [{ type: i4$3.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i14.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$3.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$3.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i7$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i7$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i7$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i7$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i7$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i7$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i7$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i7$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i4$3.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$3.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$3.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$3.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$3.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$3.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$3.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$3.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$3.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$3.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$3.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$3.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$3.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$3.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$3.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$3.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$3.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$3.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$3.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$3.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$3.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$3.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5$1.DatePipe, "number": i5$1.DecimalPipe, "titlecase": i5$1.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztreelist", template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [style]=\"componentProperties.style.style2\" class=\"desktop-grid e1tag-style2\" [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\" (cellClick)=\"cellClickHandler($event)\" [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\" [filterable]=\"options.filterable\" [reorderable]=\"false\" [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\" [aggregate]=\"options.aggregate\" [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"data.PageSize\" [isExpanded]=\"isExpanded\"\r\n                    (filterChange)=\"onFilterChange($event)\" (expand)=\"onExpand($event)\" (collapse)=\"onCollapse($event)\"\r\n                    kendoTreeListExpandable treelist>\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <!-- <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span> -->\r\n              <span *ngSwitchDefault class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n    </kendo-treelist>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}:host ::ng-deep kendo-treelist.desktop-grid{border-width:0px!important;width:100%!important;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar{margin-bottom:20px;padding:5px 10px 10px;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-button{border-radius:5px;border:1px solid var(--ion-color-dark);box-shadow:2px 2px 2px #08012c;background:var(--ion-color-dark-contrast);color:var(--ion-color-dark);margin-left:10px;font-weight:600;height:36px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button .k-icon{font-size:20px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-button:hover{background:var(--ion-color-dark-contrast-shade)}:host ::ng-deep kendo-treelist.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 .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-treelist.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,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .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{color:var(--ion-color-primary-contrast);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{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{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.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{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.12)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.05)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td{background:#6113ab9e;color:#fff;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{background-color:rgba(var(--ion-color-primary-rgb),.35);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.8);color:var(--ion-color-primary-contrast);border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link{color:var(--ion-color-primary-contrast);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{color:var(--ion-color-primary-contrast);background-color:var(--ion-color-primary-shade);background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.5))}: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{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.treelistTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px}.treelistTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:4px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toobar-left-item{flex-grow:1;display:flex}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}.ztree-inline-block{display:inline-block}\n"] }]
@@ -11808,7 +11727,7 @@ class ZudfComponent extends ContainerFieldBase {
             const fieldName = ZComponentHelper.getGroupValue(this.data.FieldElementCode, this.group);
             obs = this.fieldService.getFormFieldCode(fieldName, 'FormField', this, 'fields');
         }
-        super.initComponent().pipe(switchMap$1(() => obs), switchMap$1((field) => {
+        super.initComponent().pipe(switchMap(() => obs), switchMap((field) => {
             if (this.data.FieldElementCode) {
                 // use obs value only if FieldElementCode is set. if nto default as null.
                 this.data.Value = field;
@@ -12679,12 +12598,12 @@ class ZudfComponent extends ContainerFieldBase {
         }
     }
 }
-ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZudfComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: ComponentErrorHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZudfComponent, selector: "app-zudf", usesInheritance: true, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"], components: [{ type: i3$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$3.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+ZudfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZudfComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.ToastService }, { token: i2.ComponentErrorHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ZudfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZudfComponent, selector: "app-zudf", usesInheritance: true, ngImport: i0, template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"], components: [{ type: i3$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$4.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZudfComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zudf', template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"zudf-container\">\r\n  <kendo-card *ngIf=\"data.Title\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n                        [field]=\"field\"\r\n                        [group]=\"group\"\r\n                        [form]=\"form\"\r\n                        id=\"{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n      <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"data.Style\" class=\"zudf-container\">\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of formFields | divzlayout: data.zlayout\"\r\n        [field]=\"field\"\r\n        [group]=\"group\"\r\n        [form]=\"form\"\r\n        id=\"{{field.Name}}\">\r\n    </app-zformcontrol> -->\r\n    <app-zdiv [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\"></app-zdiv>\r\n  </form>\r\n</div>\r\n", styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}.zudf-container{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: ComponentErrorHandlerService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.ToastService }, { type: i2.ComponentErrorHandlerService }, { type: i0.ChangeDetectorRef }]; } });
 var ComponentType;
 (function (ComponentType) {
     ComponentType["text"] = "text";
@@ -12722,7 +12641,7 @@ class KcardComponent extends ContainerFieldBase {
             this.getFieldValues();
             this.myModel = Object.assign({}, this.group.zModel);
             this.isLoading = false;
-        }), switchMap(() => {
+        }), switchMap$1(() => {
             if (this.data.EditButtonVisible) {
                 return super.translateToolBarItems();
             }
@@ -12774,7 +12693,7 @@ class KcardComponent extends ContainerFieldBase {
     }
 }
 KcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KcardComponent, deps: [{ token: ZComponentService }, { token: MainService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}.kcard-container{margin-left:5px}\n"], components: [{ type: i3$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3$3.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$3.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}.kcard-container{margin-left:5px}\n"], components: [{ type: i3$4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i3$4.CardHeaderComponent, selector: "kendo-card-header" }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3$4.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$4.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kcard", template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:--container-title-padding-top-and-bottom;padding-bottom:--container-title-padding-top-and-bottom}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}.kcard-container{margin-left:5px}\n"] }]
@@ -12827,7 +12746,7 @@ class ZprogressbarComponent extends FieldBase {
     }
 }
 ZprogressbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZprogressbarComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZprogressbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZprogressbarComponent, selector: "app-zprogressbar", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"data.Label\">\r\n    {{data.Label}}\r\n  </div>\r\n  <kendo-progressbar [min]=\"minValue\" [max]=\"maxValue\" [indeterminate]=\"options.indeterminate\" [value]=\"value\" class=\"e1tag-style2\"\r\n                     [style]=\"componentProperties.style.style2\" [progressCssStyle]=\"options.progressStyles\"\r\n                     [emptyCssStyle]=\"options.emptyStyles\" [label]=\"options.label\" [animation]=\"options.animation\"></kendo-progressbar>\r\n</div>\r\n", styles: [""], components: [{ type: i4$3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+ZprogressbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZprogressbarComponent, selector: "app-zprogressbar", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"data.Label\">\r\n    {{data.Label}}\r\n  </div>\r\n  <kendo-progressbar [min]=\"minValue\" [max]=\"maxValue\" [indeterminate]=\"options.indeterminate\" [value]=\"value\" class=\"e1tag-style2\"\r\n                     [style]=\"componentProperties.style.style2\" [progressCssStyle]=\"options.progressStyles\"\r\n                     [emptyCssStyle]=\"options.emptyStyles\" [label]=\"options.label\" [animation]=\"options.animation\"></kendo-progressbar>\r\n</div>\r\n", styles: [""], components: [{ type: i4$2.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZprogressbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zprogressbar', template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"data.Label\">\r\n    {{data.Label}}\r\n  </div>\r\n  <kendo-progressbar [min]=\"minValue\" [max]=\"maxValue\" [indeterminate]=\"options.indeterminate\" [value]=\"value\" class=\"e1tag-style2\"\r\n                     [style]=\"componentProperties.style.style2\" [progressCssStyle]=\"options.progressStyles\"\r\n                     [emptyCssStyle]=\"options.emptyStyles\" [label]=\"options.label\" [animation]=\"options.animation\"></kendo-progressbar>\r\n</div>\r\n", styles: [""] }]
@@ -12918,11 +12837,11 @@ class SfquerybuilderComponent {
     ngOnInit() {
         ZComponentHelper.setComponentProperties(this);
         ZComponentHelper.registerComponent(this);
-        of(true).pipe(switchMap$1(_ => {
+        of(true).pipe(switchMap(_ => {
             return this.beforeLoadField(this.data);
         }), tap$1(data => {
             this.data = data;
-        }), switchMap$1(_ => {
+        }), switchMap(_ => {
             return this.loadQueryBuilder();
         })).subscribe(() => {
             // Where to update operator syntax
@@ -13294,7 +13213,7 @@ class SfquerybuilderComponent {
     }
 }
 SfquerybuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SfquerybuilderComponent, deps: [{ token: i2.FieldService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-SfquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SfquerybuilderComponent, selector: "app-sfquerybuilder", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "qryBldrObj", first: true, predicate: ["querybuilder"], descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div>\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3$a.QueryBuilderComponent, selector: "ejs-querybuilder", inputs: ["allowValidation", "columns", "cssClass", "dataSource", "displayMode", "enableNotCondition", "enablePersistence", "enableRtl", "fieldMode", "fieldModel", "headerTemplate", "height", "immediateModeDelay", "locale", "matchCase", "maxGroupCount", "operatorModel", "readonly", "rule", "separator", "showButtons", "sortDirection", "summaryView", "valueModel", "width"], outputs: ["actionBegin", "beforeChange", "change", "created", "dataBound", "ruleChange"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SfquerybuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SfquerybuilderComponent, selector: "app-sfquerybuilder", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "qryBldrObj", first: true, predicate: ["querybuilder"], descendants: true }], ngImport: i0, template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div>\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i3$b.QueryBuilderComponent, selector: "ejs-querybuilder", inputs: ["allowValidation", "columns", "cssClass", "dataSource", "displayMode", "enableNotCondition", "enablePersistence", "enableRtl", "fieldMode", "fieldModel", "headerTemplate", "height", "immediateModeDelay", "locale", "matchCase", "maxGroupCount", "operatorModel", "readonly", "rule", "separator", "showButtons", "sortDirection", "summaryView", "valueModel", "width"], outputs: ["actionBegin", "beforeChange", "change", "created", "dataBound", "ruleChange"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SfquerybuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-sfquerybuilder', template: "<ion-item *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <div class=\"qbcontainer\">\r\n    <ejs-querybuilder *ngIf=\"issfLoaded\"\r\n                      #querybuilder\r\n                      width=\"100%\"\r\n                      [dataSource]=\"sfData\"\r\n                      [columns]=\"sdFilter\"\r\n                      [rule]=\"importRules\"\r\n                      (ruleChange)=\"updateRule($event)\"\r\n                      (created)=\"onChange()\">\r\n    </ejs-querybuilder>\r\n\r\n    <div>\r\n      <br>\r\n      <ion-label>Result</ion-label>\r\n      <textarea class=\"output\"\r\n                resizable=\"none\"\r\n                [rows]=\"10\"\r\n                style=\"border: 1px solid #d3d3d3; width: 100%;\">{{displayRule}}</textarea>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n", styles: [".qbcontainer{border-radius:5px;border:1px solid rgba(0,0,0,.08);padding:10px;margin:10px 0;width:100%}#querybuilder .e-slider-container.e-control-wrapper{height:0}ejs-querybuilder{display:block}.e-query-builder{margin:0 auto;display:block}.highcontrast textarea#ruleContent{background-color:#000}\n"] }]
@@ -13769,5 +13688,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonFieldBase, ComponentErrorHandlerService, ContainerFieldBase, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KcardComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
+export { ButtonFieldBase, ContainerFieldBase, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KcardComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map