mmhglobal-dynamicform 1.1.12 → 1.1.16

package/README.md

@@ -3,6 +3,21 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
+`1.1.16`<br/>
+fix formHeader not rendering properly.
+
+`1.1.15`<br/>
+changed uiheader to cater home page top toolbar logout.
+
+`1.1.14`<br/>
+zgrid un-hide save state.
+
+`1.1.13`<br/>
+Require zCore 1.1.9<br/>
+zgrid support handling attribute: filterable, pinnedLeft, sortable. <br/>
+zbutton off timer for isTrigger is false if IsCreateNew is true. <br/>
+ztreelist support handling attribute: filterable, sortable. <br/>
+
 `1.1.12`<br/>
 zgrid fix save state. 
 
@@ -44,7 +59,6 @@ Required zcore 1.1.4.<br/>
 [input] - enhanced input labels to have shadow.<br/>
 [zworkflowbutton] - increase button height.<br/>
 
-
 `1.1.2`<br/>
 Required zcore 1.1.2.<br/>
 zkcard add pagesize handling.<br/>

package/bundles/mmhglobal-dynamicform.umd.js

@@ -239,7 +239,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -2956,6 +2956,15 @@
                 this.username = _myProfile.UserName;
                 this.userDisplayName = _myProfile.LastName;
             }
+            if (this.topFormHeader) {
+                this.formHeader = this.topFormHeader;
+            }
+        };
+        UiheaderComponent.prototype.bindFormHeader = function () {
+            if (!this.topFormHeader) {
+                return true;
+            }
+            return false;
         };
         UiheaderComponent.prototype.onLogout = function () {
             this.authService.logout();
@@ -2970,7 +2979,7 @@
     UiheaderComponent.decorators = [
         { type: i0.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      {{ group.formHeader }}\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    <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\r\n  </ion-toolbar>\r\n</ion-header>\r\n",
+                    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,#fff));--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{width:2.5rem;height:1.7rem}.profile-avatar,.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 rgba(0,0,0,.1);background-color:var(--z-page-header-backgroundcolor);border:none}.toolbar-title{text-shadow:.5px .5px hsla(0,0%,100%,.48)}"]
                 },] }
     ];
@@ -2980,7 +2989,8 @@
         { type: i3.AuthService }
     ]; };
     UiheaderComponent.propDecorators = {
-        group: [{ type: i0.Input }]
+        group: [{ type: i0.Input }],
+        topFormHeader: [{ type: i0.Input }]
     };
 
     /********** Angular **********/
@@ -3589,9 +3599,11 @@
             // debugger;
             this.group.isTriggered = true;
             var me = this.group;
-            setTimeout(function () {
-                me['isTriggered'] = false;
-            }, 500);
+            if (!this.data['IsCreateNew']) {
+                setTimeout(function () {
+                    me['isTriggered'] = false;
+                }, 500);
+            }
             this.group.subject.next({
                 type: "buttonClick",
                 target: button.ClickEvent,
@@ -5497,12 +5509,42 @@
         ZgridComponent.prototype.setGridIsLoading = function (triggered) {
             this.isLoading = triggered;
         };
+        ZgridComponent.prototype.filterable = function (value) {
+            if (value === false) {
+                return false;
+            }
+            return true;
+        };
+        ZgridComponent.prototype.sortable = function (value) {
+            if (value === false) {
+                return false;
+            }
+            return true;
+        };
+        ZgridComponent.prototype.locked = function (colSetting) {
+            if (colSetting['enablePinning'] == true) {
+                if (colSetting['pinnedLeft'] == true) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        ZgridComponent.prototype.stateExist = function () {
+            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
+            var _gridName = this.data.Name + '::' + this.data.Value;
+            var userGridState = this.zGridStatePersistingService.get(_storageKey);
+            var originalGridState = this.zGridStatePersistingService.get(_gridName);
+            if (userGridState || originalGridState) {
+                return true;
+            }
+            return false;
+        };
         return ZgridComponent;
     }());
     ZgridComponent.decorators = [
         { type: i0.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 *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" 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]=\"{buttonCount: 5, pageSizes: pageSizes, previousNext: false}\"\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                (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      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState\">\r\n        <button class=\"k-button\" (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 class=\"k-button\" (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button class=\"k-button\" (click)=\"restoreGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</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]=\"col.filterable\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         editor=\"numeric\"> \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 === '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        <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=\"'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            </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\" [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','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=\"'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-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",
+                    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 *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" 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]=\"{buttonCount: 5, pageSizes: pageSizes, previousNext: false}\"\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                (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      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState\">\r\n        <button class=\"k-button\" (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 class=\"k-button\" (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button class=\"k-button\" (click)=\"restoreGridSettings()\" *ngIf=\"stateExist()\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</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                         editor=\"numeric\"> \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 === '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        <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=\"'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            </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\" [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','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=\"'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-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 rgba(0,0,0,.1);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:rgba(214,224,239,.5)}:host ::ng-deep kendo-grid tr.k-alt{background-color:rgba(232,238,246,.5)}:host ::ng-deep kendo-grid tbody tr.k-state-hover,:host ::ng-deep kendo-grid tbody tr:hover{background-color:rgba(214,224,239,.5)}: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:rgba(255,94,91,.4)}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover{color:#ff5e5b;background-color:rgba(255,94,91,.15)}.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:hsla(0,0%,100%,.3);color:#0f4800}"]
                 },] }
     ];
@@ -8775,12 +8817,24 @@
                 // eq, neq, isnull, isnotnull, endswith, startswith
             }
         };
+        ZtreelistComponent.prototype.filterable = function (value) {
+            if (value === false) {
+                return false;
+            }
+            return true;
+        };
+        ZtreelistComponent.prototype.sortable = function (value) {
+            if (value === false) {
+                return false;
+            }
+            return true;
+        };
         return ZtreelistComponent;
     }());
     ZtreelistComponent.decorators = [
         { type: i0.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\" [class]=\"col.class\"\r\n                             [expandable]=\"i===0\" [field]=\"col.field\" [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [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",
+                    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-add-row,:host ::ng-deep kendo-treelist .k-grid-footer,:host ::ng-deep kendo-treelist .k-grid-header,:host ::ng-deep kendo-treelist .k-grouping-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-treelist .k-button{border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,.1);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:rgba(214,224,239,.5)}:host ::ng-deep kendo-treelist tr.k-alt{background-color:rgba(232,238,246,.5)}:host ::ng-deep kendo-treelist tbody tr.k-state-hover,:host ::ng-deep kendo-treelist tbody tr:hover{background-color:rgba(214,224,239,.5)}: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:rgba(255,94,91,.4)}:host ::ng-deep kendo-treelist .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist .k-pager-numbers .k-link:hover{color:#ff5e5b;background-color:rgba(255,94,91,.15)}.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:hsla(0,0%,100%,.3);color:#0f4800}"]
                 },] }
     ];