mmhglobal-dynamicform 1.3.13 → 1.3.16

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -1,8 +1,8 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, Input, Injectable, Directive, ViewChild, Inject, HostListener, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BehaviorSubject, forkJoin, of, Subject, AsyncSubject } from 'rxjs';
-import { map, tap, switchMap, delay, take, concatMap } from 'rxjs/operators';
+import { Component, Input, Injectable, Directive, ViewChild, Inject, HostListener, Pipe, ViewContainerRef, TemplateRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BehaviorSubject, forkJoin, of, Subject, map as map$1, AsyncSubject } from 'rxjs';
+import { map, tap, switchMap, delay, take, filter, concatMap } from 'rxjs/operators';
 import * as i1 from 'mmhglobal-zcore';
 import { ZComponentProperties, ZComponentHelper, ZGroup, MESSAGETYPE, ZSelectPostApiParams, DefaultPageSettingParams, UploadMetaData, ZCoreModule } from 'mmhglobal-zcore';
 import * as i1$3 from '@progress/kendo-angular-dialog';
@@ -24,7 +24,7 @@ import * as i1$2 from 'mmhglobal-middleware';
 import { MmhglobalMiddlewareModule } from 'mmhglobal-middleware';
 import * as i5$1 from '@progress/kendo-angular-grid';
 import { DataBindingDirective, GridComponent, BaseFilterCellComponent, GridModule, ExcelModule } from '@progress/kendo-angular-grid';
-import * as i4$1 from 'ionic-selectable';
+import * as i4$2 from 'ionic-selectable';
 import { IonicSelectableModule } from 'ionic-selectable';
 import * as i2$5 from 'ng2-ace-editor';
 import { AceEditorModule } from 'ng2-ace-editor';
@@ -42,6 +42,7 @@ import * as i7 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i2$7 from '@progress/kendo-angular-editor';
 import { EditorModule } from '@progress/kendo-angular-editor';
+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';
@@ -51,9 +52,11 @@ import * as i3$3 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import * as i2$3 from '@progress/kendo-angular-layout';
 import { LayoutModule, PanelBarModule, TabStripModule } from '@progress/kendo-angular-layout';
+import * as i4$1 from '@progress/kendo-angular-notification';
+import { NotificationModule } from '@progress/kendo-angular-notification';
 import * as i2$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import * as i4$2 from '@progress/kendo-angular-progressbar';
+import * as i4$3 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
 import * as i2$6 from '@progress/telerik-angular-report-viewer';
 import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';
@@ -67,6 +70,8 @@ import * as i8 from '@progress/kendo-angular-tooltip';
 import { TooltipDirective, TooltipModule } from '@progress/kendo-angular-tooltip';
 import * as i3$7 from '@progress/kendo-angular-upload';
 import { UploadModule, UploadsModule } from '@progress/kendo-angular-upload';
+import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
+import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack';
 import 'brace';
 import 'brace/theme/eclipse';
 import 'brace/mode/json';
@@ -1103,6 +1108,11 @@ class ZformComponent {
                     this.group.fields = fieldElements;
                     this.onInitNormal();
                 }
+            }), switchMap(() => {
+                if (!this.group['afterFormInit']) {
+                    return of({});
+                }
+                return this.group['afterFormInit']();
             }), switchMap(() => {
                 this.isLoading = false;
                 if (this.group._isDebugging && this.group._debug.isLoading) {
@@ -1727,24 +1737,12 @@ class MainService {
         if (group.beforeBackNavigationPage) {
             group.beforeBackNavigationPage(group).subscribe(() => {
                 group['isTriggered'] = false;
-                this.router.navigate([group.backNavigationPage]);
-                //if (group['reload']) {
-                //  group['isTriggered'] = false;
-                //  this.router.routeReuseStrategy.shouldReuseRoute = function () {
-                //    return false;
-                //  }
-                //  this.router.onSameUrlNavigation = 'reload';
-                //}
-                //this.router.navigate([group.backNavigationPage],);
+                this.router.navigate([group.backNavigationPage], { replaceUrl: true });
             });
         }
         else {
             group['isTriggered'] = false;
-            //this.router.routeReuseStrategy.shouldReuseRoute = function () {
-            //  return false;
-            //}
-            //this.router.onSameUrlNavigation = 'reload';
-            this.router.navigate([group.backNavigationPage]);
+            this.router.navigate([group.backNavigationPage], { replaceUrl: true });
         }
     }
     historyBack() {
@@ -2240,13 +2238,14 @@ function refreshGrid(group) {
 
 /********** Angular **********/
 class ZGridBindingDirective extends DataBindingDirective {
-    constructor(grid, webapiService, authService, storageService, router, zGridStatePersistingService) {
+    constructor(grid, webapiService, authService, storageService, router, zGridStatePersistingService, resourceApiService) {
         super(grid);
         this.webapiService = webapiService;
         this.authService = authService;
         this.storageService = storageService;
         this.router = router;
         this.zGridStatePersistingService = zGridStatePersistingService;
+        this.resourceApiService = resourceApiService;
         this.state = {
             skip: 0,
             take: 10,
@@ -2273,9 +2272,6 @@ class ZGridBindingDirective extends DataBindingDirective {
         return this.grid.data;
     }
     ngOnInit() {
-        if (this.field.SkipDirective) {
-            return;
-        }
         super.ngOnInit();
         this.grid.loading = true;
         this.state.take = this.field.PageSize || 20;
@@ -2462,6 +2458,21 @@ class ZGridBindingDirective extends DataBindingDirective {
         this.grid.loading = true;
         if (!this.dataSource) {
             this.params.pageSize = this.state.take;
+            // if paginationApiPostUrl invalid, try get from resourceAPI.
+            //if (!ZComponentHelper.validateURLPath(this.paginationApiPostUrl)) { 
+            //  const apiPostURL = this.resourceApiService.getURL(this.paginationApiPostUrl);
+            //  if (apiPostURL) {
+            //    const array = apiPostURL.split("/api/");
+            //    if (!!array[1]) {
+            //      array[1] = "Page" + array[1];
+            //      this.paginationApiPostUrl = array.join("/api/");
+            //    } else {
+            //      const arr = this.resourceURL.split("/");
+            //      arr[arr.length - 2] = "Page" + arr[arr.length - 2];
+            //      this.paginationApiPostUrl = arr.join("/");
+            //    }
+            //  }
+            //}
             if (this.field.ExternalPagination) {
                 // For POST method Page WebAPI
                 this.webapiService
@@ -2721,7 +2732,7 @@ class ZGridBindingDirective extends DataBindingDirective {
         }
     }
 }
-ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i1.WebApiService }, { token: i1.AuthService }, { token: i1.StorageSessionService }, { token: i1$1.Router }, { token: i1.ZGridStatePersistingService }], target: i0.ɵɵFactoryTarget.Directive });
+ZGridBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZGridBindingDirective, deps: [{ token: GridComponent }, { token: i1.WebApiService }, { token: i1.AuthService }, { token: i1.StorageSessionService }, { token: i1$1.Router }, { token: i1.ZGridStatePersistingService }, { token: i1.ResourceApiService }], target: i0.ɵɵFactoryTarget.Directive });
 ZGridBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: { zgridbinding: "zgridbinding" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZGridBindingDirective, decorators: [{
             type: Directive,
@@ -2732,7 +2743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [GridComponent]
-                    }] }, { type: i1.WebApiService }, { type: i1.AuthService }, { type: i1.StorageSessionService }, { type: i1$1.Router }, { type: i1.ZGridStatePersistingService }];
+                    }] }, { type: i1.WebApiService }, { type: i1.AuthService }, { type: i1.StorageSessionService }, { type: i1$1.Router }, { type: i1.ZGridStatePersistingService }, { type: i1.ResourceApiService }];
     }, propDecorators: { zgridbinding: [{
                 type: Input
             }] } });
@@ -2938,6 +2949,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class ComponentConstant {
+}
+ComponentConstant.GridColDateFilterSuffix = "_GridFilter";
+
 class DateRangeFilterCellComponent extends BaseFilterCellComponent {
     constructor(filterService) {
         super(filterService);
@@ -2951,24 +2966,25 @@ class DateRangeFilterCellComponent extends BaseFilterCellComponent {
         return (end || {}).value;
     }
     get hasFilter() {
-        return this.filtersByField(this.field).length > 0;
+        return this.filtersByField(this.getFieldName()).length > 0;
     }
     clearFilter() {
-        this.filterService.filter(this.removeFilter(this.field));
+        this.filterService.filter(this.removeFilter(this.getFieldName()));
     }
     filterRange(start, end) {
-        this.filter = this.removeFilter(this.field);
+        this.filter = this.removeFilter(this.getFieldName());
         const filters = [];
         if (start) {
             filters.push({
-                field: this.field,
+                field: this.getFieldName(),
                 operator: "gte",
                 value: start
             });
         }
         if (end) {
+            end.setHours(23, 59, 59, 999);
             filters.push({
-                field: this.field,
+                field: this.getFieldName(),
                 operator: "lte",
                 value: end
             });
@@ -2983,12 +2999,15 @@ class DateRangeFilterCellComponent extends BaseFilterCellComponent {
         this.filterService.filter(root);
     }
     findByOperator(op) {
-        return this.filtersByField(this.field)
+        return this.filtersByField(this.getFieldName())
             .filter(({ operator }) => operator === op)[0];
     }
+    getFieldName() {
+        return this.data.SkipDirective ? `${this.field}${ComponentConstant.GridColDateFilterSuffix}` : this.field;
+    }
 }
 DateRangeFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateRangeFilterCellComponent, deps: [{ token: i5$1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-DateRangeFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: { filter: "filter", field: "field" }, usesInheritance: true, ngImport: i0, template: `
+DateRangeFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: { filter: "filter", field: "field", data: "data" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-daterange >
            <kendo-dateinput
                 class="range-filter"
@@ -3065,6 +3084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], field: [{
                 type: Input
+            }], data: [{
+                type: Input
             }] } });
 
 /********** Angular **********/
@@ -3339,6 +3360,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }] } });
 
+class SignalrEvent {
+}
+class PushChangeEvent {
+}
+class SignalrService {
+    constructor(zone, authService, zcoreService) {
+        this.zone = zone;
+        this.authService = authService;
+        this.zcoreService = zcoreService;
+        this.environment = null;
+        this.environment = this.zcoreService.getEnvironment();
+        const errorSubject = new Subject();
+        this.createHubConnection();
+        this.connection.onreconnecting(error => this.zone.run(() => errorSubject.next(error)));
+    }
+    get hubConnectionOptions() {
+        return {
+            headers: SignalRHeader,
+            // transport: HttpTransportType.WebSockets,
+            accessTokenFactory: () => {
+                return this.authService.e1Token.access_token;
+            }
+        };
+    }
+    get retryPolicy() {
+        return {
+            nextRetryDelayInMilliseconds: retryContext => {
+                if (retryContext.elapsedMilliseconds < 60000) {
+                    return Math.random() * 10000;
+                }
+                else {
+                    return 30000;
+                }
+            }
+        };
+    }
+    createHubConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.eventSubject = new Subject();
+            const hubEndPoint = this.environment.signalRUrl;
+            this.connection = new HubConnectionBuilder()
+                .withUrl(hubEndPoint + '/signalr', this.hubConnectionOptions)
+                .withHubProtocol(new MessagePackHubProtocol())
+                .withAutomaticReconnect(this.retryPolicy)
+                .configureLogging(LogLevel.Information)
+                .build();
+            this.connection.start();
+            this.connection.on('onEvent', (event) => {
+                switch (event.Name) {
+                    case 'ErrorAtHub':
+                        console.warn('Error At Hub:', event.Payload);
+                        break;
+                    case 'LoggingAtHub':
+                        console.warn('Logging At Hub:', event.Payload);
+                        break;
+                    default:
+                        this.zone.run(() => this.eventSubject.next(event));
+                        break;
+                }
+            });
+            this.connection.onreconnecting(error => this.handleOnReconnecting(error));
+            this.connection.onreconnected(connectionId => this.handleOnReconnected(connectionId));
+            this.connection.onclose(error => this.handleOnClose(error));
+            this.event$ = this.eventSubject.asObservable();
+        });
+    }
+    handleOnReconnecting(error) {
+        console.log('Hub connection started reconnecting due to an error: ', error);
+    }
+    handleOnReconnected(connectionId) {
+        console.log('Hub connection successfully reconnected. ConnectionId is now: ', connectionId);
+    }
+    handleOnClose(error) {
+        if (error === null) {
+            console.log('Hub connection closed without error.', error);
+        }
+        else {
+            console.log('Hub connection closed due to an error: ', error);
+        }
+    }
+    getEvent() {
+        return this.event$.pipe(map$1(event => {
+            return {
+                name: event.Name,
+                payload: event.Payload
+            };
+        }));
+    }
+    getConnectionId() {
+        return this.connection.connectionId;
+    }
+    joinGroup(groupName) {
+        this.connection.invoke("JoinGroup", groupName);
+    }
+    removeFromGroup(groupName) {
+        this.connection.invoke("RemoveFromGroup", groupName);
+    }
+    sendToClientGroup(groupsToSend, serviceName, events) {
+        this.connection.invoke("SendToClientGroup", groupsToSend, serviceName, events);
+    }
+    sendToClientUser(userToSend, serviceName, events) {
+        this.connection.invoke("SendToClientUser", userToSend, serviceName, events);
+    }
+    sendToAllClients(serviceName, events) {
+        this.connection.invoke("SendToAllClients", serviceName, events);
+    }
+    sendToCaller(serviceName, events) {
+        this.connection.invoke("SendToCaller", serviceName, events);
+    }
+}
+SignalrService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignalrService, deps: [{ token: i0.NgZone }, { token: i1.AuthService }, { token: i1.ZCoreService }], target: i0.ɵɵFactoryTarget.Injectable });
+SignalrService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignalrService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SignalrService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.AuthService }, { type: i1.ZCoreService }]; } });
+const SignalRHeader = {
+    SignalRKey: "3D36C63093B75A091E116182BE91FFB99D53192365C6222979587514E6F65994"
+};
+
+/********** Angular **********/
+class UibulletinComponent {
+    constructor(zcoreService, webApiService, resourceApiService, mainService, signalr, notificationService) {
+        this.zcoreService = zcoreService;
+        this.webApiService = webApiService;
+        this.resourceApiService = resourceApiService;
+        this.mainService = mainService;
+        this.signalr = signalr;
+        this.notificationService = notificationService;
+        // backNavigate = null;
+        this.bulletinMessages = [];
+        this.hideBulletinTemplate = true;
+        this.title = "";
+        this.showBulletinIcon = false;
+        this.defaultMessage = 'There are no message today.';
+        this.environment = this.zcoreService.getEnvironment();
+        this.showBulletinIcon = this.environment.bulletinUrl ? true : false;
+    }
+    ngOnInit() {
+        this.mainService.getResourceServerData().subscribe(() => {
+            this.webApiService.httpGet$(this.resourceApiService.getURL(this.environment.bulletinUrl), '').subscribe(resp => {
+                if (resp) {
+                    const msg = [];
+                    if (resp.length > 0) {
+                        resp.forEach((item) => {
+                            msg.push(item.Description);
+                        });
+                    }
+                    this.setBulletinMessages(msg);
+                }
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.getSignalrBulletinMessage().subscribe();
+    }
+    setBulletinMessages(data) {
+        if (data.length > 0) {
+            data.forEach((item) => {
+                if (item.Description) {
+                    this.bulletinMessages.push(item.Description);
+                }
+            });
+            this.title = this.bulletinMessages.length + " messages. Click to view messages.";
+        }
+        else {
+            this.title = "No message";
+        }
+    }
+    getSignalrBulletinMessage() {
+        return this.signalr.getEvent().pipe(filter(event => event.name === 'Bulletin'), map(event => {
+            this.setBulletinMessages(event.payload);
+        }));
+    }
+    showBulletinMessage() {
+        // if closable property is set to true, hideAfter property is ignored.
+        this.notificationService.show({
+            content: this.bulletinTemplate,
+            position: { horizontal: "center", vertical: "top" },
+            animation: { type: "slide", duration: 500 },
+            type: { style: "none", icon: false },
+            closable: this.bulletinMessages.length > 0 ? true : false,
+            hideAfter: 1000,
+        });
+    }
+}
+UibulletinComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UibulletinComponent, deps: [{ token: i1.ZCoreService }, { token: i1.WebApiService }, { token: i1.ResourceApiService }, { token: MainService }, { token: SignalrService }, { token: i4$1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+UibulletinComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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: i1.ZCoreService }, { type: i1.WebApiService }, { type: i1.ResourceApiService }, { type: MainService }, { type: SignalrService }, { type: i4$1.NotificationService }]; }, propDecorators: { appendTo: [{
+                type: ViewChild,
+                args: ['appendTo', { read: ViewContainerRef }]
+            }], bulletinTemplate: [{
+                type: ViewChild,
+                args: ['bulletinTemplate', { read: TemplateRef }]
+            }], group: [{
+                type: Input
+            }] } });
+
 /********** Angular **********/
 class UiheaderComponent {
     // backNavigate = null;
@@ -3346,6 +3570,7 @@ class UiheaderComponent {
         this.router = router;
         this.zcoreService = zcoreService;
         this.authService = authService;
+        this.showBulletinIcon = false;
     }
     ngOnInit() {
         // if (this.group.backNavigationPage) {
@@ -3365,6 +3590,7 @@ class UiheaderComponent {
         if (this.topFormHeader) {
             this.formHeader = this.topFormHeader;
         }
+        this.showBulletinIcon = environment.bulletinUrl ? true : false;
     }
     bindFormHeader() {
         if (!this.topFormHeader) {
@@ -3382,10 +3608,10 @@ class UiheaderComponent {
     }
 }
 UiheaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UiheaderComponent, deps: [{ token: i1$1.Router }, { token: i1.ZCoreService }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UiheaderComponent, selector: "app-uiheader", inputs: { group: "group", topFormHeader: "topFormHeader" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n    \r\n    <ion-title class=\"toolbar-title\">\r\n      <div *ngIf=\"!bindFormHeader()\">\r\n        {{ formHeader }}\r\n      </div>\r\n      <div *ngIf=\"bindFormHeader()\">\r\n        {{ group.formHeader }}\r\n      </div>\r\n    </ion-title>\r\n\r\n    <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel\">\r\n      <ion-avatar class=\"profile-avatar\">\r\n        <img src=\"{{profileImgUrl}}\" [routerLink]=\"['userProfile']\">\r\n      </ion-avatar>\r\n      <ion-label class=\"profile-username\">{{userDisplayName}}</ion-label>\r\n\r\n      <div class=\"profile-vl\"></div>\r\n\r\n      <!--<fa-icon slot=\"end\" class=\"fa-lg\" [icon]=\"['fas', 'sign-out-alt']\" (click)=\"onLogout()\" style=\"cursor: pointer;\"></fa-icon>-->\r\n\r\n      <ion-button (click)=\"onLogout()\" fill=\"none\" size=\"small\">\r\n        <fa-icon [icon]=\"['fas', 'sign-out-alt']\" style=\"margin-right: 5px;\"></fa-icon> logout\r\n      </ion-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"group\">\r\n      <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n        <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n        <!-- <ion-button (click)=\"onAction()\" [disabled]=\"false\">\r\n      <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\r\n       </ion-button> -->\r\n      </ion-buttons>\r\n    </div>\r\n\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: [".title-md{padding-inline-start:10px;padding-top:3px;font-size:18px}ion-toolbar{--background: var(--z-page-header-backgroundcolor);--color: var(--ion-toolbar-color, var(--ion-text-color, #ffffff));--border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #256b12)))}.end-panel{display:flex;padding-right:10px;align-items:stretch}.profile-avatar{margin:auto;padding-right:10px;width:2.5rem;height:1.7rem}.profile-username{margin:auto;padding-right:10px}.profile-vl{margin:auto;border-left:2px solid;height:2rem;border-radius:1px}.profile-button{width:2.5rem;height:2.5rem;border-radius:12px;box-shadow:0 8px 15px #0000001a;background-color:var(--z-page-header-backgroundcolor);border:none}.toolbar-title{text-shadow:.5px .5px rgba(255,255,255,.48)}\n"], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: UimenubuttonComponent, selector: "app-uimenubutton", inputs: ["group"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2.IonAvatar, selector: "ion-avatar" }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { type: i1$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
+UiheaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UiheaderComponent, selector: "app-uiheader", inputs: { group: "group", topFormHeader: "topFormHeader" }, ngImport: i0, template: "<ion-header>\r\n  <ion-toolbar>\r\n    <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n    \r\n    <ion-title class=\"toolbar-title\">\r\n      <div *ngIf=\"!bindFormHeader()\">\r\n        {{ formHeader }}\r\n      </div>\r\n      <div *ngIf=\"bindFormHeader()\">\r\n        {{ group.formHeader }}\r\n      </div>\r\n    </ion-title>\r\n\r\n    <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel\">\r\n      <ion-avatar class=\"profile-avatar\">\r\n        <img src=\"{{profileImgUrl}}\" [routerLink]=\"['userProfile']\">\r\n      </ion-avatar>\r\n      <ion-label class=\"profile-username\">{{userDisplayName}}</ion-label>\r\n\r\n      <div class=\"profile-vl\"></div>\r\n\r\n      <app-uibulletin  *ngIf=\"showBulletinIcon\"></app-uibulletin>\r\n      <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n      <!--<fa-icon slot=\"end\" class=\"fa-lg\" [icon]=\"['fas', 'sign-out-alt']\" (click)=\"onLogout()\" style=\"cursor: pointer;\"></fa-icon>-->\r\n      <ion-button (click)=\"onLogout()\" fill=\"none\" size=\"small\">\r\n        <fa-icon [icon]=\"['fas', 'sign-out-alt']\" style=\"margin-right: 5px;\"></fa-icon> logout\r\n      </ion-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"group\">\r\n      <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n        <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n        <!-- <ion-button (click)=\"onAction()\" [disabled]=\"false\">\r\n      <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\r\n       </ion-button> -->\r\n      </ion-buttons>\r\n    </div>\r\n\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: [".title-md{padding-inline-start:10px;padding-top:3px;font-size:18px}ion-toolbar{--background: var(--z-page-header-backgroundcolor);--color: var(--ion-toolbar-color, var(--ion-text-color, #ffffff));--border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #256b12)))}.end-panel{display:flex;padding-right:10px;align-items:stretch}.profile-avatar{margin:auto;padding-right:10px;width:2.5rem;height:1.7rem}.profile-username{margin:auto;padding-right:10px}.profile-vl{margin:auto;border-left:2px solid;height:2rem;border-radius:1px}.profile-button{width:2.5rem;height:2.5rem;border-radius:12px;box-shadow:0 8px 15px #0000001a;background-color:var(--z-page-header-backgroundcolor);border:none}.toolbar-title{text-shadow:.5px .5px rgba(255,255,255,.48)}\n"], components: [{ type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: UimenubuttonComponent, selector: "app-uimenubutton", inputs: ["group"] }, { type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i2.IonAvatar, selector: "ion-avatar" }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: UibulletinComponent, selector: "app-uibulletin", inputs: ["group"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton", inputs: ["group"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkDelegate, selector: ":not(a):not(area)[routerLink]", inputs: ["routerDirection", "routerAnimation"] }, { type: i1$1.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.3.11", ngImport: i0, type: UiheaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-uiheader", template: "<ion-header>\r\n  <ion-toolbar>\r\n    <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n    \r\n    <ion-title class=\"toolbar-title\">\r\n      <div *ngIf=\"!bindFormHeader()\">\r\n        {{ formHeader }}\r\n      </div>\r\n      <div *ngIf=\"bindFormHeader()\">\r\n        {{ group.formHeader }}\r\n      </div>\r\n    </ion-title>\r\n\r\n    <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel\">\r\n      <ion-avatar class=\"profile-avatar\">\r\n        <img src=\"{{profileImgUrl}}\" [routerLink]=\"['userProfile']\">\r\n      </ion-avatar>\r\n      <ion-label class=\"profile-username\">{{userDisplayName}}</ion-label>\r\n\r\n      <div class=\"profile-vl\"></div>\r\n\r\n      <!--<fa-icon slot=\"end\" class=\"fa-lg\" [icon]=\"['fas', 'sign-out-alt']\" (click)=\"onLogout()\" style=\"cursor: pointer;\"></fa-icon>-->\r\n\r\n      <ion-button (click)=\"onLogout()\" fill=\"none\" size=\"small\">\r\n        <fa-icon [icon]=\"['fas', 'sign-out-alt']\" style=\"margin-right: 5px;\"></fa-icon> logout\r\n      </ion-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"group\">\r\n      <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n        <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n        <!-- <ion-button (click)=\"onAction()\" [disabled]=\"false\">\r\n      <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\r\n       </ion-button> -->\r\n      </ion-buttons>\r\n    </div>\r\n\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: [".title-md{padding-inline-start:10px;padding-top:3px;font-size:18px}ion-toolbar{--background: var(--z-page-header-backgroundcolor);--color: var(--ion-toolbar-color, var(--ion-text-color, #ffffff));--border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #256b12)))}.end-panel{display:flex;padding-right:10px;align-items:stretch}.profile-avatar{margin:auto;padding-right:10px;width:2.5rem;height:1.7rem}.profile-username{margin:auto;padding-right:10px}.profile-vl{margin:auto;border-left:2px solid;height:2rem;border-radius:1px}.profile-button{width:2.5rem;height:2.5rem;border-radius:12px;box-shadow:0 8px 15px #0000001a;background-color:var(--z-page-header-backgroundcolor);border:none}.toolbar-title{text-shadow:.5px .5px rgba(255,255,255,.48)}\n"] }]
+            args: [{ selector: "app-uiheader", template: "<ion-header>\r\n  <ion-toolbar>\r\n    <app-uimenubutton slot=\"start\" [group]=\"group\"></app-uimenubutton>\r\n    \r\n    <ion-title class=\"toolbar-title\">\r\n      <div *ngIf=\"!bindFormHeader()\">\r\n        {{ formHeader }}\r\n      </div>\r\n      <div *ngIf=\"bindFormHeader()\">\r\n        {{ group.formHeader }}\r\n      </div>\r\n    </ion-title>\r\n\r\n    <div slot=\"end\" *ngIf=\"!isMobileScreen()\" class=\"end-panel\">\r\n      <ion-avatar class=\"profile-avatar\">\r\n        <img src=\"{{profileImgUrl}}\" [routerLink]=\"['userProfile']\">\r\n      </ion-avatar>\r\n      <ion-label class=\"profile-username\">{{userDisplayName}}</ion-label>\r\n\r\n      <div class=\"profile-vl\"></div>\r\n\r\n      <app-uibulletin  *ngIf=\"showBulletinIcon\"></app-uibulletin>\r\n      <div class=\"profile-vl\" *ngIf=\"showBulletinIcon\"></div>\r\n\r\n      <!--<fa-icon slot=\"end\" class=\"fa-lg\" [icon]=\"['fas', 'sign-out-alt']\" (click)=\"onLogout()\" style=\"cursor: pointer;\"></fa-icon>-->\r\n      <ion-button (click)=\"onLogout()\" fill=\"none\" size=\"small\">\r\n        <fa-icon [icon]=\"['fas', 'sign-out-alt']\" style=\"margin-right: 5px;\"></fa-icon> logout\r\n      </ion-button>\r\n    </div>\r\n\r\n    <div *ngIf=\"group\">\r\n      <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n        <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n        <!-- <ion-button (click)=\"onAction()\" [disabled]=\"false\">\r\n      <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\r\n       </ion-button> -->\r\n      </ion-buttons>\r\n    </div>\r\n\r\n  </ion-toolbar>\r\n</ion-header>\r\n", styles: [".title-md{padding-inline-start:10px;padding-top:3px;font-size:18px}ion-toolbar{--background: var(--z-page-header-backgroundcolor);--color: var(--ion-toolbar-color, var(--ion-text-color, #ffffff));--border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, #256b12)))}.end-panel{display:flex;padding-right:10px;align-items:stretch}.profile-avatar{margin:auto;padding-right:10px;width:2.5rem;height:1.7rem}.profile-username{margin:auto;padding-right:10px}.profile-vl{margin:auto;border-left:2px solid;height:2rem;border-radius:1px}.profile-button{width:2.5rem;height:2.5rem;border-radius:12px;box-shadow:0 8px 15px #0000001a;background-color:var(--z-page-header-backgroundcolor);border:none}.toolbar-title{text-shadow:.5px .5px rgba(255,255,255,.48)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1.ZCoreService }, { type: i1.AuthService }]; }, propDecorators: { group: [{
                 type: Input
             }], topFormHeader: [{
@@ -5534,7 +5760,7 @@ class ZselectmultipleComponent {
     }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: i1.ResourceApiService }, { token: i1.WebApiService }, { token: i1.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: { data: "data", group: "group", form: "form", iconList: "iconList", buttonList: "buttonList" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\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          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }}-->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n          <!--For Validation feature-->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n\r\n\r\n\r\n      <kendo-multiselect *ngIf=\"data.Multiple && !data.EnableCheckbox\"\r\n                         [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span>--> {{ dataItem.text }}\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n\r\n\r\n\r\n      <kendo-multiselecttree *ngIf=\"data.Multiple && data.EnableCheckbox\"\r\n                             kendoMultiSelectTreeExpandable\r\n                             [placeholder]=\"data.PlaceHolder\"\r\n                             [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData()\"\r\n                             childrenField=\"items\"\r\n                             [hasChildren]=\"hasChildren\"\r\n                             [textField]=\"itemTextField\"\r\n                             [valueField]=\"itemValueField\"\r\n                             [valuePrimitive]=\"true\"\r\n                             (valueChange)=\"onValueChange($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=\"margin-top: 7px; width: 100%;\">\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\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["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:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4$1.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i7.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i7.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["valueDepth", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeVisible", "itemDisabled", "tagMapper", "tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "isNodeExpanded", "textField", "valueField", "loading"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4$1.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4$1.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4$1.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["filterable", "data", "kendoDropDownFilter"] }, { type: i7.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { type: i7.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i7.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i7.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: { data: "data", group: "group", form: "form", iconList: "iconList", buttonList: "buttonList" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\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          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }}-->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n          <!--For Validation feature-->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n\r\n\r\n\r\n      <kendo-multiselect *ngIf=\"data.Multiple && !data.EnableCheckbox\"\r\n                         [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span>--> {{ dataItem.text }}\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n\r\n\r\n\r\n      <kendo-multiselecttree *ngIf=\"data.Multiple && data.EnableCheckbox\"\r\n                             kendoMultiSelectTreeExpandable\r\n                             [placeholder]=\"data.PlaceHolder\"\r\n                             [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData()\"\r\n                             childrenField=\"items\"\r\n                             [hasChildren]=\"hasChildren\"\r\n                             [textField]=\"itemTextField\"\r\n                             [valueField]=\"itemValueField\"\r\n                             [valuePrimitive]=\"true\"\r\n                             (valueChange)=\"onValueChange($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=\"margin-top: 7px; width: 100%;\">\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\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["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:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i3$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4$2.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: UivalidationmessageComponent, selector: "app-uivalidationmessage", inputs: ["group", "data", "form"] }, { type: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i7.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "tabindex", "disabled", "readonly", "filterable", "listHeight", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "data", "value", "tabIndex", "size", "rounded", "fillMode", "placeholder", "itemDisabled", "checkboxes", "virtual", "popupSettings", "valuePrimitive", "loading", "valueField", "textField"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i7.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["valueDepth", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeVisible", "itemDisabled", "tagMapper", "tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "isNodeExpanded", "textField", "valueField", "loading"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4$2.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4$2.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4$2.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["filterable", "data", "kendoDropDownFilter"] }, { type: i7.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]" }, { type: i7.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i7.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i7.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zselectmultiple", template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\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          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n          <ion-toolbar>\r\n            <ion-row>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                  Clear\r\n                </ion-button>\r\n              </ion-col>\r\n              <ion-col>\r\n                <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                  OK\r\n                </ion-button>\r\n              </ion-col>\r\n            </ion-row>\r\n          </ion-toolbar>\r\n        </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }}-->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n          <!--For Validation feature-->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n\r\n\r\n\r\n      <kendo-multiselect *ngIf=\"data.Multiple && !data.EnableCheckbox\"\r\n                         [data]=\"getItemsData()\"\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)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!--<span class=\"template\">{{ dataItem.value }}</span>--> {{ dataItem.text }}\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n\r\n\r\n\r\n      <kendo-multiselecttree *ngIf=\"data.Multiple && data.EnableCheckbox\"\r\n                             kendoMultiSelectTreeExpandable\r\n                             [placeholder]=\"data.PlaceHolder\"\r\n                             [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData()\"\r\n                             childrenField=\"items\"\r\n                             [hasChildren]=\"hasChildren\"\r\n                             [textField]=\"itemTextField\"\r\n                             [valueField]=\"itemValueField\"\r\n                             [valuePrimitive]=\"true\"\r\n                             (valueChange)=\"onValueChange($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=\"margin-top: 7px; width: 100%;\">\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\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n", styles: ["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:100%;color:#000}.tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;margin-left:5px}.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px;width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0px}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}\n"] }]
@@ -5696,18 +5922,17 @@ class ZgridComponent {
                 total: (gData ? gData.length : 0)
             };
             this.gData = gData;
-            if (this.zgrid) {
-                this.zgrid.grid['pageSize'] = gData.length; // set grid size
-            }
-            if (!!this.data.ShowRecordNumber) {
-                if (this.gridData.data) {
+            if (this.gData) {
+                if (this.zgrid) {
+                    this.zgrid.grid['pageSize'] = gData.length; // set grid size
+                }
+                if (!!this.data.ShowRecordNumber) {
                     this.gridData.data.forEach((d, i) => {
                         d.GridNo = i + 1;
                     });
                 }
-            }
-            if (this.gData) {
                 this.createFormControls();
+                this.setDateColForFiltering();
             }
         };
         /* Available Functions */
@@ -5741,7 +5966,7 @@ class ZgridComponent {
         //  return this.mainService.cookieStoreGet(this.gridStorageKey, this.authService.e1Token.access_token);
         //}),
         //switchMap(savedGridCache => {
-        //  if (savedGridCache) {  
+        //  if (savedGridCache) {
         //    // Keep the gridSetting from cookiestore to localStorage
         //    this.zGridStatePersistingService.set(this.gridStorageKey, savedGridCache);
         //    return of(true);
@@ -5826,6 +6051,9 @@ class ZgridComponent {
     get state() {
         return this._state;
     }
+    set state(state) {
+        this._state = state;
+    }
     stateExist() {
         const userGridState = this.zGridStatePersistingService.get(this.gridStorageKey);
         if (userGridState) {
@@ -5836,12 +6064,17 @@ class ZgridComponent {
         }
     }
     dataStateChange(state) {
-        if (this.zgrid) {
+        if (!this.data.SkipDirective) {
             this.zgrid.dataStateChange(state);
         }
         else {
+            this._state = state;
             this.gridData = process(this.gData, state);
             this.createFormControls();
+            if (this.zgrid) {
+                this.zgrid.state = state;
+                this.zgrid.data = this.gridData.data;
+            }
         }
     }
     filterable(value) {
@@ -5879,7 +6112,7 @@ class ZgridComponent {
         //   return (h < 250) ? 250 : h;
         // }else{
         //   return "auto";
-        // } 
+        // }
     }
     /* End Grid Styling, Display */
     /* Start Grid Columns */
@@ -5959,6 +6192,18 @@ class ZgridComponent {
             });
         }
     }
+    setDateColForFiltering() {
+        if (this.data.SkipDirective && this.gData && this.gData.length > 0) {
+            const dateCol = Object.keys(this.gData[0]).filter(x => x.includes("Date"));
+            if (dateCol && dateCol.length > 0) {
+                this.gData.forEach(data => {
+                    dateCol.forEach(colName => {
+                        data[`${colName}${ComponentConstant.GridColDateFilterSuffix}`] = new Date(data[colName]);
+                    });
+                });
+            }
+        }
+    }
     getData() {
         if (this.zgrid) {
             this.zgrid.getDataBinding();
@@ -6365,17 +6610,17 @@ class ZgridComponent {
     }
     /* onchange Events */
     filterChange(event) {
-        if (this.zgrid) {
+        if (!this.data.SkipDirective) {
             this.zgrid.filterChange(event);
         }
     }
     pageChange(event) {
-        if (this.zgrid) {
+        if (!this.data.SkipDirective) {
             this.zgrid.pageChange(event);
         }
     }
     sortChange(sort) {
-        if (this.zgrid) {
+        if (!this.data.SkipDirective) {
             this.zgrid.sortChange(sort);
         }
     }
@@ -6425,7 +6670,7 @@ class ZgridComponent {
                 const formUniqueKeyValue = formGroup.value[uniqueKey];
                 if (isNew || (!isNew && (gridExistingData[rowIndex][uniqueKey] != formUniqueKeyValue))) {
                     // if new...
-                    // if edit... if current field, uniquekey value changed. need to check.  
+                    // if edit... if current field, uniquekey value changed. need to check.
                     gridExistingData.forEach(data => {
                         if (data[uniqueKey] === formUniqueKeyValue) {
                             uniqueKeyExist = true;
@@ -6497,10 +6742,10 @@ class ZgridComponent {
     }
 }
 ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZgridComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i5.FormBuilder }, { token: i1.AuthService }, { token: i1.WebApiService }, { token: i1.ZGridStatePersistingService }, { token: i1.ToastService }, { token: i1.ZCoreService }, { token: i1.StorageSessionService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZgridComponent, selector: "app-zgrid", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: 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 style=\"margin: 10px 0 6px 0;\">\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  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\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                [ngStyle]=\"getGridStyle()\"\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      <!--[scrollable]=\"scrollMode\" temp remove. causing some bug on pagination-->\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [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 [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-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 class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\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 [column]=\"column\" [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 *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [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\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\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <!--{{ dataItem[col.field] }}--> \r\n              <div [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                <span *ngSwitchCase=true>\r\n                  <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\"> \r\n                      {{ dataItem[col.field] }}\r\n                  </div>\r\n                </span>\r\n                <span *ngSwitchDefault>\r\n                  {{ dataItem[col.field] }}\r\n                </span>\r\n              </div>\r\n\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 && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\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\">\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\">\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-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellStyleConditionDefault{border-radius:5px;text-align:center}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.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;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i5$1.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], 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: i5$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i5$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { type: i5$1.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field"] }, { type: i5$1.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i5$1.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i5$1.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i5$1.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i6.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "decimals", "step", "spinners", "rangeValidation", "tabindex", "changeValueOnScroll", "selectOnFocus", "value", "format", "tabIndex", "size", "rounded", "fillMode", "max", "min", "placeholder", "maxlength"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "positionMode", "offset", "anchor", "popupClass", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i6.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "size", "rounded", "fillMode", "tabIndex", "successIcon", "errorIcon", "clearButtonIcon", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i5$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i2$4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i5$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5$1.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5$1.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i5$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i5$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i5$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i5$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i5$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "date": i4.DatePipe, "number": i4.DecimalPipe } });
+ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZgridComponent, selector: "app-zgrid", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: 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 style=\"margin: 10px 0 6px 0;\">\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  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\">\r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\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                [ngStyle]=\"getGridStyle()\"\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      <!--[scrollable]=\"scrollMode\" temp remove. causing some bug on pagination-->\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [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 [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-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 class=\"date-range-filter\"\r\n                                        [data]=\"data\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\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 [column]=\"column\" [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 *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [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\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\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <!--{{ dataItem[col.field] }}-->\r\n              <div [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                <span *ngSwitchCase=true>\r\n                  <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      {{ dataItem[col.field] }}\r\n                  </div>\r\n                </span>\r\n                <span *ngSwitchDefault>\r\n                  {{ dataItem[col.field] }}\r\n                </span>\r\n              </div>\r\n\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 && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\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\">\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\">\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-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellStyleConditionDefault{border-radius:5px;text-align:center}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.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;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i5$1.GridComponent, selector: "kendo-grid", inputs: ["data", "scrollable", "selectable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "sort", "group", "navigatable", "rowClass", "rowSticky", "rowSelected", "cellSelected", "isDetailExpanded", "isGroupExpanded", "pageSize", "height", "rowHeight", "detailRowHeight", "filter"], 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: i5$1.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i5$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["sortable", "groupable", "editor", "filter", "filterable", "editable", "field", "format"] }, { type: i5$1.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i5$1.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i5$1.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i5$1.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i5$1.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i6.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "decimals", "step", "spinners", "rangeValidation", "tabindex", "changeValueOnScroll", "selectOnFocus", "value", "format", "tabIndex", "size", "rounded", "fillMode", "max", "min", "placeholder", "maxlength"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "positionMode", "offset", "anchor", "popupClass", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i6.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "size", "rounded", "fillMode", "tabIndex", "successIcon", "errorIcon", "clearButtonIcon", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i2.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i5$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i5$1.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "showAfter", "callout", "closable", "offset", "tooltipTemplate", "showOn", "titleTemplate", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle"], exportAs: ["kendoTooltip"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i2$4.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "role", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5$1.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i5$1.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5$1.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5$1.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i5$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i5$1.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i5$1.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i5$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i5$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "date": i4.DatePipe, "number": i4.DecimalPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZgridComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zgrid", 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 style=\"margin: 10px 0 6px 0;\">\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  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\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                [ngStyle]=\"getGridStyle()\"\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      <!--[scrollable]=\"scrollMode\" temp remove. causing some bug on pagination-->\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [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 [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-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 class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\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 [column]=\"column\" [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 *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [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\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\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <!--{{ dataItem[col.field] }}--> \r\n              <div [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                <span *ngSwitchCase=true>\r\n                  <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\"> \r\n                      {{ dataItem[col.field] }}\r\n                  </div>\r\n                </span>\r\n                <span *ngSwitchDefault>\r\n                  {{ dataItem[col.field] }}\r\n                </span>\r\n              </div>\r\n\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 && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\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\">\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\">\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-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellStyleConditionDefault{border-radius:5px;text-align:center}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.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;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
+            args: [{ selector: "app-zgrid", 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 style=\"margin: 10px 0 6px 0;\">\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  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\">\r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\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                [ngStyle]=\"getGridStyle()\"\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      <!--[scrollable]=\"scrollMode\" temp remove. causing some bug on pagination-->\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [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 [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-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 class=\"date-range-filter\"\r\n                                        [data]=\"data\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\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 [column]=\"column\" [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 *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [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\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\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <!--{{ dataItem[col.field] }}-->\r\n              <div [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                <span *ngSwitchCase=true>\r\n                  <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      {{ dataItem[col.field] }}\r\n                  </div>\r\n                </span>\r\n                <span *ngSwitchDefault>\r\n                  {{ dataItem[col.field] }}\r\n                </span>\r\n              </div>\r\n\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 && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\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\">\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\">\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-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-grid tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-grid tbody tr:hover,:host ::ng-deep kendo-grid tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellStyleConditionDefault{border-radius:5px;text-align:center}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.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;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i5.FormBuilder }, { type: i1.AuthService }, { type: i1.WebApiService }, { type: i1.ZGridStatePersistingService }, { type: i1.ToastService }, { type: i1.ZCoreService }, { type: i1.StorageSessionService }, { type: MainService }]; }, propDecorators: { data: [{
                 type: Input
             }], group: [{
@@ -6978,7 +7223,7 @@ class ZkcardComponent {
     }
 }
 ZkcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZkcardComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.ResourceApiService }, { token: i1.AuthService }, { token: i1.ZGridStatePersistingService }, { token: i1.WebApiService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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')\" 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')\" 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')\" 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: i2$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$3.CardBodyComponent, selector: "kendo-card-body" }, { type: i2$3.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4$2.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "animation", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i2$3.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i2$3.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
+ZkcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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')\" 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')\" 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')\" 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: i2$3.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$3.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$3.CardBodyComponent, selector: "kendo-card-body" }, { type: i2$3.CardFooterComponent, selector: "kendo-card-footer" }, { type: i4$3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "animation", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i2$3.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CardTitleDirective, selector: "[kendoCardTitle]" }, { type: i2$3.CardSubtitleDirective, selector: "[kendoCardSubtitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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')\" 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')\" 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')\" 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"] }]
@@ -7712,7 +7957,7 @@ class ZpostselectinputComponent {
     }
 }
 ZpostselectinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZpostselectinputComponent, deps: [{ token: i1.ResourceApiService }, { token: i1.WebApiService }, { token: i1.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZpostselectinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZpostselectinputComponent, selector: "app-zpostselectinput", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getIon_InvalidClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <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%\" *ngIf=\"!isLoading\">\r\n    <span style=\"flex-basis: 35%;\">\r\n      <ionic-selectable #selectComponent item-content\r\n        [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)\" [items]=\"getItemsData()\"\r\n        [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\" [shouldStoreItemValue]=\"true\"\r\n        [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\" size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" 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 style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\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-basis: 35%;\">\r\n        <kendo-combobox [id]=\"data.CCValue\"\r\n          [data]=\"getItemsData()\" [valueField]=\"itemValueField\" [textField]=\"itemTextField\"\r\n          [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n          [placeholder]=\"data.CCPlaceHolder\"\r\n          (valueChange)=\"onValueChange($event)\"\r\n          [filterable]=\"!!data.HasInfiniteScroll\"\r\n          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          (filterChange)=\"handleFilter($event)\"\r\n          (open)=\"handleOpen()\"\r\n          (close)=\"handleClose()\"\r\n          (blur)=\"handleBlur()\"\r\n          style=\"margin-top: 7px; width: 100%;\"\r\n          [loading]=\"isLoading\">\r\n        </kendo-combobox>\r\n      </span>\r\n      <span style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n        <input kendoTextBox [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" type=\"text\"\r\n          [formControlName]=\"data.Value\" \r\n          style=\"margin: 7px 0 0 0; width: 100%\"\r\n        />\r\n      </span>\r\n      <app-uivalidationmessage style=\"flex-basis: 5%;\"\r\n        [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n      </app-uivalidationmessage>\r\n    </div>\r\n</ion-item>", 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)}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i4$1.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.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: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4$1.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4$1.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4$1.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
+ZpostselectinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZpostselectinputComponent, selector: "app-zpostselectinput", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ion-item [ngClass]=\"getIon_InvalidClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <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%\" *ngIf=\"!isLoading\">\r\n    <span style=\"flex-basis: 35%;\">\r\n      <ionic-selectable #selectComponent item-content\r\n        [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)\" [items]=\"getItemsData()\"\r\n        [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\" [shouldStoreItemValue]=\"true\"\r\n        [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\" size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" 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 style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\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-basis: 35%;\">\r\n        <kendo-combobox [id]=\"data.CCValue\"\r\n          [data]=\"getItemsData()\" [valueField]=\"itemValueField\" [textField]=\"itemTextField\"\r\n          [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n          [placeholder]=\"data.CCPlaceHolder\"\r\n          (valueChange)=\"onValueChange($event)\"\r\n          [filterable]=\"!!data.HasInfiniteScroll\"\r\n          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          (filterChange)=\"handleFilter($event)\"\r\n          (open)=\"handleOpen()\"\r\n          (close)=\"handleClose()\"\r\n          (blur)=\"handleBlur()\"\r\n          style=\"margin-top: 7px; width: 100%;\"\r\n          [loading]=\"isLoading\">\r\n        </kendo-combobox>\r\n      </span>\r\n      <span style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n        <input kendoTextBox [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" type=\"text\"\r\n          [formControlName]=\"data.Value\" \r\n          style=\"margin: 7px 0 0 0; width: 100%\"\r\n        />\r\n      </span>\r\n      <app-uivalidationmessage style=\"flex-basis: 5%;\"\r\n        [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n      </app-uivalidationmessage>\r\n    </div>\r\n</ion-item>", 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)}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i4$2.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: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.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: i7.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "valueNormalizer", "placeholder", "listHeight", "suggest", "clearButton", "disabled", "readonly", "tabindex", "filterable", "data", "value", "valuePrimitive", "popupSettings", "itemDisabled", "tabIndex", "virtual", "size", "rounded", "fillMode", "loading", "textField", "valueField", "iconClass"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i4$2.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i4$2.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i4$2.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZpostselectinputComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zpostselectinput", template: "<ion-item [ngClass]=\"getIon_InvalidClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <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%\" *ngIf=\"!isLoading\">\r\n    <span style=\"flex-basis: 35%;\">\r\n      <ionic-selectable #selectComponent item-content\r\n        [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)\" [items]=\"getItemsData()\"\r\n        [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\" [shouldStoreItemValue]=\"true\"\r\n        [canAddItem]=\"!!data.OnAddItem\" (onAddItem)=\"onAddItem($event)\"\r\n        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\" class=\"isItemSelected\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\" size=\"sm\" [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></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\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" 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 style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n      <ion-input [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" [type]=\"'text'\" [formControlName]=\"data.Value\"\r\n        [readonly]=\"data.ReadOnly\" [inputmode]=\"'text'\"></ion-input>\r\n    </span>\r\n    <app-uivalidationmessage style=\"flex-basis: 5%;\" [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\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-basis: 35%;\">\r\n        <kendo-combobox [id]=\"data.CCValue\"\r\n          [data]=\"getItemsData()\" [valueField]=\"itemValueField\" [textField]=\"itemTextField\"\r\n          [formControlName]=\"data.CCValue\" [valuePrimitive]=\"true\"\r\n          [placeholder]=\"data.CCPlaceHolder\"\r\n          (valueChange)=\"onValueChange($event)\"\r\n          [filterable]=\"!!data.HasInfiniteScroll\"\r\n          [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          (filterChange)=\"handleFilter($event)\"\r\n          (open)=\"handleOpen()\"\r\n          (close)=\"handleClose()\"\r\n          (blur)=\"handleBlur()\"\r\n          style=\"margin-top: 7px; width: 100%;\"\r\n          [loading]=\"isLoading\">\r\n        </kendo-combobox>\r\n      </span>\r\n      <span style=\"flex-basis: 60%; margin-left: 5px;\" [formGroup]=\"form\">\r\n        <input kendoTextBox [id]=\"data.Value\" [placeholder]=\"data.PlaceHolder\" type=\"text\"\r\n          [formControlName]=\"data.Value\" \r\n          style=\"margin: 7px 0 0 0; width: 100%\"\r\n        />\r\n      </span>\r\n      <app-uivalidationmessage style=\"flex-basis: 5%;\"\r\n        [group]=\"group\" [data]=\"data\" [form]=\"form\">\r\n      </app-uivalidationmessage>\r\n    </div>\r\n</ion-item>", 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)}\n"] }]
@@ -8791,10 +9036,10 @@ class ZtexteditorComponent {
     }
 }
 ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZtexteditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZtexteditorComponent, selector: "app-ztexteditor", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\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 kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n      </kendo-editor>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$7.EditorComponent, selector: "kendo-editor", inputs: ["iframe", "applyToWord", "updateInterval", "preserveWhitespace", "resizable", "value", "disabled", "readonly", "schema", "plugins", "placeholder", "pasteCleanupSettings"], outputs: ["valueChange", "focus", "blur"] }, { type: i3$5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "tabindex", "resizable", "popupSettings", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3$5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["selection", "look", "disabled", "width"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3$5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "toggleable", "selected", "fillMode", "themeColor", "text", "look", "togglable", "icon", "iconClass", "imageUrl", "style", "className", "title", "disabled"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2$7.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["disabled", "view", "value", "icon", "paletteSettings", "editorCommand"] }, { type: i2$7.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$7.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2$7.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2$7.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2$7.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2$7.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2$7.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2$7.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2$7.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2$7.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2$7.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2$7.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2$7.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2$7.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2$7.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2$7.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2$7.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2$7.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2$7.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2$7.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2$7.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2$7.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2$7.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2$7.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2$7.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2$7.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2$7.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2$7.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2$7.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i2$7.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2$7.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }] });
+ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZtexteditorComponent, selector: "app-ztexteditor", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\">\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 kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\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 kendoEditorInsertImageButton></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    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"], components: [{ type: i2.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.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$7.EditorComponent, selector: "kendo-editor", inputs: ["iframe", "applyToWord", "updateInterval", "preserveWhitespace", "resizable", "value", "disabled", "readonly", "schema", "plugins", "placeholder", "pasteCleanupSettings"], outputs: ["valueChange", "focus", "blur"] }, { type: i3$5.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "tabindex", "resizable", "popupSettings", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i3$5.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["selection", "look", "disabled", "width"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i3$5.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "toggleable", "selected", "fillMode", "themeColor", "text", "look", "togglable", "icon", "iconClass", "imageUrl", "style", "className", "title", "disabled"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i2$7.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i2$7.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["disabled", "view", "value", "icon", "paletteSettings", "editorCommand"] }, { type: i2$7.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$7.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i2$7.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i2$7.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i2$7.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i2$7.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i2$7.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i2$7.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i2$7.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i2$7.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i2$7.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i2$7.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i2$7.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i2$7.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i2$7.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i2$7.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i2$7.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i2$7.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i2$7.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i2$7.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i2$7.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i2$7.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i2$7.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i2$7.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i2$7.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i2$7.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i2$7.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i2$7.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i2$7.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i2$7.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i2$7.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i2$7.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i2$7.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZtexteditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ztexteditor', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\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 kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n      </kendo-editor>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"] }]
+            args: [{ selector: 'app-ztexteditor', template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <div *ngIf=\"data.Title\" class=\"title\">{{data.Title}}</div>\r\n\r\n    <ion-label [attr.for]=\"data.Value\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               position=\"stacked\"\r\n               style=\"margin-bottom:10px;\">\r\n      {{data.Label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\">\r\n        *\r\n      </ion-text>\r\n    </ion-label>\r\n\r\n    <span style=\"flex: 1;\">\r\n      <kendo-editor [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [value]=\"value\"\r\n                    [ngStyle]=\"getCompStyle()\"\r\n                    [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'hidden'\">\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\">\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 kendoEditorInsertImageButton></kendo-toolbar-button>\r\n          <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n        </kendo-toolbar>\r\n        <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\">\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 kendoEditorInsertImageButton></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    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { data: [{
                 type: Input
             }], group: [{
@@ -9685,7 +9930,7 @@ class ZtreelistComponent {
     }
 }
 ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZtreelistComponent, deps: [{ token: i1.FieldService }, { token: i1.WebApiService }, { token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZtreelistComponent, selector: "app-ztreelist", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\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\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\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\"\r\n                                        [filter]=\"filter\"\r\n                                        [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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\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;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\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              {{ 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\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\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\" [width]=\"col.width || 250\">\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\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [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", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i3$6.TreeListComponent, selector: "kendo-treelist", inputs: ["pageSize", "scrollable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "data", "sort", "navigatable", "rowClass", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded", "aria-label", "height", "rowHeight", "filter"], 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: i3$6.ColumnComponent, selector: "kendo-treelist-column", inputs: ["sortable", "editor", "filter", "filterable", "editable", "expandable", "field", "format"] }, { type: i3$6.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field"] }, { type: i3$6.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i3$6.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i3$6.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i3$6.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i3$6.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i3$6.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i3$6.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i3$6.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i3$6.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i3$6.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i3$6.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i3$6.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i3$6.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZcheckboxComponent, selector: "app-zcheckbox", inputs: ["data", "group", "form"] }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$6.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$6.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["initiallyExpanded", "expandedKeys", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i3$6.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$6.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$6.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$6.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i3$6.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListAddCommand", "kendoTreeListFocusable", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$6.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i4.DatePipe, "number": i4.DecimalPipe, "titlecase": i4.TitleCasePipe } });
+ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ZtreelistComponent, selector: "app-ztreelist", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\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\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\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\"\r\n                                        [filter]=\"filter\"\r\n                                        [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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\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;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\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              {{ 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\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\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\" [width]=\"col.width || 250\">\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\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [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", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i3$6.TreeListComponent, selector: "kendo-treelist", inputs: ["pageSize", "scrollable", "trackBy", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "autoSize", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "skip", "data", "sort", "navigatable", "rowClass", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded", "aria-label", "height", "rowHeight", "filter"], 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: i3$6.ColumnComponent, selector: "kendo-treelist-column", inputs: ["sortable", "editor", "filter", "filterable", "editable", "expandable", "field", "format"] }, { type: i3$6.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$1.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i5$1.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i5$1.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i5$1.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i5$1.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i5$1.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i5$1.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i5$1.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i3$6.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i3$6.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i3$6.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i3$6.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i3$6.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i3$6.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i3$6.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i3$6.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i3$6.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i3$6.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i3$6.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i3$6.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i3$6.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZcheckboxComponent, selector: "app-zcheckbox", inputs: ["data", "group", "form"] }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple", inputs: ["data", "group", "form", "iconList", "buttonList"] }, { type: ZtextareaComponent, selector: "app-ztextarea", inputs: ["data", "group", "form"] }, { type: ZdatetimeComponent, selector: "app-zdatetime", inputs: ["data", "group", "form"] }, { type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$6.CommandColumnComponent, selector: "kendo-treelist-command-column" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$6.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["initiallyExpanded", "expandedKeys", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i3$6.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$6.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$6.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$6.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i3$6.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListAddCommand", "kendoTreeListFocusable", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$6.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i4.DatePipe, "number": i4.DecimalPipe, "titlecase": i4.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZtreelistComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztreelist", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"treelistTitle\">{{data.Title}}</div>\r\n  <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\" [ngStyle]=\"getGridStyle()\" [idField]=\"options.idField\" [parentIdField]=\"options.parentIdField\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  [sortable]=\"options.sortable\"\r\n                  [resizable]=\"options.resizable\"\r\n                  [filterable]=\"false\"\r\n                  [reorderable]=\"false\"\r\n                  [columnMenu]=\"options.columnMenu\"\r\n                  [scrollable]=\"options.scrollable\"\r\n                  [aggregate]=\"options.aggregate\"\r\n                  [pageable]=\"options.pageAble\"\r\n                  [pageSize]=\"data.PageSize\"\r\n                  [initiallyExpanded]=\"data.DefaultCollapse === false\"\r\n                  (filterChange)=\"onFilterChange($event)\"\r\n                  kendoTreeListExpandable\r\n                  treelist>\r\n\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\"\r\n                             [class]=\"col.class\"\r\n                             [expandable]=\"i===0\"\r\n                             [field]=\"col.field\"\r\n                             [title]=\"col.title || col.field\"\r\n                             [width]=\"col.width || 250\"\r\n                             [filterable]=\"filterable(col.enableFiltering)\"\r\n                             [sortable]=\"sortable(col.enableSorting)\"\r\n                             [hidden]=\"!isColumnsVisible(col.visible)\">\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\"\r\n                                        [filter]=\"filter\"\r\n                                        [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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\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;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\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')\" *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\" [ngSwitch]=\"col.fieldType\" [ngClass]=\"getColClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <app-zcheckbox style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\" (click)=\"buttonClick(col, cellContext)\"></app-zcheckbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.field)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(dataItem)\"></app-zdatetime>\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              {{ 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\" [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\">\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\" [width]=\"col.width || 250\">\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\" [kendoTreeListEditCommand]=\"cellContext\"\r\n                    [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", styles: [":host ::ng-deep kendo-treelist .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header,:host ::ng-deep kendo-treelist .k-grid-add-row,:host ::ng-deep kendo-treelist .k-grid-footer{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px #0000001a;background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-treelist .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-treelist .k-grid .k-grid-filter,:host ::ng-deep kendo-treelist .k-grid .k-header-column-menu,:host ::ng-deep kendo-treelist .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-treelist .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:#d6e0ef80}:host ::ng-deep kendo-treelist tr.k-alt{background-color:#e8eef680}:host ::ng-deep kendo-treelist tbody tr:hover,:host ::ng-deep kendo-treelist tbody tr.k-state-hover{background-color:#d6e0ef80}:host ::ng-deep kendo-treelist .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:#ff5e5b66}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover{color:#ff5e5b;background-color:#ff5e5b26}.cellWrapText .gridCell{white-space:pre-line!important}.treelistTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
@@ -10558,6 +10803,7 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         UimenucontentComponent,
         UimenubuttonComponent,
         UiappmenucontentComponent,
+        UibulletinComponent,
         UivalidationmessageComponent,
         ZBulletComponent,
         ZbuttonsComponent,
@@ -10611,6 +10857,7 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         DateInputsModule,
         DropDownsModule,
         EditorModule,
+        FilterModule,
         GridModule,
         ExcelModule,
         IndicatorsModule,
@@ -10622,6 +10869,7 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         LayoutModule,
         PanelBarModule,
         TabStripModule,
+        NotificationModule,
         PopupModule,
         ProgressBarModule,
         TelerikReportingModule,
@@ -10652,6 +10900,7 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         UimenucontentComponent,
         UimenubuttonComponent,
         UiappmenucontentComponent,
+        UibulletinComponent,
         UiactionbuttonComponent,
         UivalidationmessageComponent,
         ZBulletComponent,
@@ -10710,6 +10959,7 @@ MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             DateInputsModule,
             DropDownsModule,
             EditorModule,
+            FilterModule,
             GridModule,
             ExcelModule,
             IndicatorsModule,
@@ -10721,6 +10971,7 @@ MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.
             LayoutModule,
             PanelBarModule,
             TabStripModule,
+            NotificationModule,
             PopupModule,
             ProgressBarModule,
             TelerikReportingModule,
@@ -10758,6 +11009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         UimenucontentComponent,
                         UimenubuttonComponent,
                         UiappmenucontentComponent,
+                        UibulletinComponent,
                         UivalidationmessageComponent,
                         ZBulletComponent,
                         ZbuttonsComponent,
@@ -10814,6 +11066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DateInputsModule,
                         DropDownsModule,
                         EditorModule,
+                        FilterModule,
                         GridModule,
                         ExcelModule,
                         IndicatorsModule,
@@ -10825,6 +11078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         LayoutModule,
                         PanelBarModule,
                         TabStripModule,
+                        NotificationModule,
                         PopupModule,
                         ProgressBarModule,
                         TelerikReportingModule,
@@ -10858,6 +11112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         UimenucontentComponent,
                         UimenubuttonComponent,
                         UiappmenucontentComponent,
+                        UibulletinComponent,
                         UiactionbuttonComponent,
                         UivalidationmessageComponent,
                         ZBulletComponent,
@@ -10913,5 +11168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldElementDirective, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, ScrollbarThemeDirective, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZSchedulerToolBarComponent, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
+export { DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldElementDirective, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, ScrollbarThemeDirective, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZSchedulerToolBarComponent, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map