mmhglobal-dynamicform 2.44.0 → 2.44.2

package/fesm2015/mmhglobal-dynamicform.mjs

@@ -83,7 +83,7 @@ import { MenusModule } from '@progress/kendo-angular-menu';
 import * as i2$d from '@progress/kendo-angular-gantt';
 import { GanttModule } from '@progress/kendo-angular-gantt';
 import * as i1$1 from '@angular/platform-browser';
-import * as i4$3 from '@angular/flex-layout/extended';
+import * as i8$1 from '@angular/flex-layout/extended';
 import * as i5$1 from '@angular/flex-layout/flex';
 import { Group } from '@progress/kendo-drawing';
 import 'brace';
@@ -93,6 +93,7 @@ import 'brace/mode/javascript';
 import 'brace/mode/html';
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { event as event$1 } from 'jquery';
+import { DOMParser as DOMParser$1, keymap, chainCommands, exitCode, splitBlock } from '@progress/kendo-editor-common';
 import * as i7$2 from '@progress/kendo-angular-toolbar';
 import { MultiSelect, DropDownList } from '@syncfusion/ej2-dropdowns';
 import { createElement, getComponent } from '@syncfusion/ej2-base';
@@ -5409,7 +5410,7 @@ class ZformComponent {
     }
 }
 ZformComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZformComponent, deps: [{ token: i2.AuthService }, { token: i2.FieldService }, { token: ZComponentDebugService }, { token: i2.ZCoreService }, { token: i2.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZformComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZformComponent, selector: "app-zform", inputs: { group: "group", fieldName: "fieldName" }, ngImport: i0, template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ZformComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZformComponent, selector: "app-zform", inputs: { group: "group", fieldName: "fieldName" }, ngImport: i0, template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZformComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zform", template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n", styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}.container-center{margin:auto}.e1-form{max-width:2000px;margin:auto}\n"] }]
@@ -5457,7 +5458,7 @@ class UicontentComponent {
     }
 }
 UicontentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UicontentComponent, deps: [{ token: i2.ZCoreService }, { token: i1.Router }, { token: MainService }, { token: i2.CacheService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-UicontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UicontentComponent, selector: "app-uicontent", inputs: { group: "group", cssClass: "cssClass" }, ngImport: i0, template: "<div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n  <app-page-loader></app-page-loader>\r\n</div>\r\n<ion-grid [class]=\"cssClass\">\r\n  <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && group && group.navItems\">\r\n    <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n      <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n        <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n          <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n            [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n          <span>{{ item.text }}</span>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-breadcrumb>\r\n  </ion-row>\r\n  <ion-row *ngIf=\"!group.isLoading\" class=\"main-content-row\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\"></app-zform>\r\n    </ion-col>\r\n    <!-- <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre> -->\r\n  </ion-row>\r\n  <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\" style=\"padding-top: 50px;\" class=\"main-content-row style1\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\" [fieldName]=\"debuggerSectionFieldElementName\"></app-zform>\r\n    </ion-col>\r\n  </ion-row>\r\n  <!-- require for mobile screen -->\r\n  <div *ngIf=\"!isSITEnvironment() && !group.isLoading && isMobileScreen()\" style=\"height: 150px;\"></div>\r\n</ion-grid>\r\n", styles: [":host ::ng-deep kendo-breadcrumb.nav-bar{margin-left:15px;background:transparent;border-radius:5px}:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter,:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter-icon{color:var(--ion-color-primary-shade);font-size:calc(var(--nav-bar-font-size) * 1.2);opacity:1;font-weight:900}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item{font-size:var(--nav-bar-font-size);color:var(--ion-color-primary-shade);cursor:pointer;justify-content:center;text-align:center;font-weight:600;border-radius:15px;padding:5px 8px}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item:hover{background:rgba(var(--ion-color-primary-rgb),.15)}:host ::ng-deep kendo-breadcrumb.nav-bar .icon-with-text{padding:0 10px 0 0}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item.current{cursor:default;background:transparent;color:#787878;padding-right:10px}\n"], components: [{ type: PageLoaderComponent, selector: "app-page-loader" }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i7.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "collapseMode"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+UicontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UicontentComponent, selector: "app-uicontent", inputs: { group: "group", cssClass: "cssClass" }, ngImport: i0, template: "<div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n  <app-page-loader></app-page-loader>\r\n</div>\r\n<ion-grid [class]=\"cssClass\">\r\n  <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && group && group.navItems\">\r\n    <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n      <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n        <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n          <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n            [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n          <span>{{ item.text }}</span>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-breadcrumb>\r\n  </ion-row>\r\n  <ion-row *ngIf=\"!group.isLoading\" class=\"main-content-row\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\"></app-zform>\r\n    </ion-col>\r\n    <!-- <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre> -->\r\n  </ion-row>\r\n  <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\" style=\"padding-top: 50px;\" class=\"main-content-row style1\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\" [fieldName]=\"debuggerSectionFieldElementName\"></app-zform>\r\n    </ion-col>\r\n  </ion-row>\r\n  <!-- require for mobile screen -->\r\n  <div *ngIf=\"!isSITEnvironment() && !group.isLoading && isMobileScreen()\" style=\"height: 150px;\"></div>\r\n</ion-grid>\r\n", styles: [":host ::ng-deep kendo-breadcrumb.nav-bar{margin-left:15px;background:transparent;border-radius:5px}:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter,:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter-icon{color:var(--ion-color-primary-shade);font-size:calc(var(--nav-bar-font-size) * 1.2);opacity:1;font-weight:900}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item{font-size:var(--nav-bar-font-size);color:var(--ion-color-primary-shade);cursor:pointer;justify-content:center;text-align:center;font-weight:600;border-radius:15px;padding:5px 8px}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item:hover{background:rgba(var(--ion-color-primary-rgb),.15)}:host ::ng-deep kendo-breadcrumb.nav-bar .icon-with-text{padding:0 10px 0 0}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item.current{cursor:default;background:transparent;color:#787878;padding-right:10px}\n"], components: [{ type: PageLoaderComponent, selector: "app-page-loader" }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i7.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "collapseMode"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UicontentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uicontent', template: "<div *ngIf=\"group.isLoading\" class=\"spinner-container\">\r\n  <app-page-loader></app-page-loader>\r\n</div>\r\n<ion-grid [class]=\"cssClass\">\r\n  <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && group && group.navItems\">\r\n    <kendo-breadcrumb [items]=\"group.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n      <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n        <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n          <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n            [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n          <span>{{ item.text }}</span>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-breadcrumb>\r\n  </ion-row>\r\n  <ion-row *ngIf=\"!group.isLoading\" class=\"main-content-row\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\"></app-zform>\r\n    </ion-col>\r\n    <!-- <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre> -->\r\n  </ion-row>\r\n  <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\" style=\"padding-top: 50px;\" class=\"main-content-row style1\">\r\n    <ion-col class=\"main-content-col\">\r\n      <app-zform [group]=\"group\" [fieldName]=\"debuggerSectionFieldElementName\"></app-zform>\r\n    </ion-col>\r\n  </ion-row>\r\n  <!-- require for mobile screen -->\r\n  <div *ngIf=\"!isSITEnvironment() && !group.isLoading && isMobileScreen()\" style=\"height: 150px;\"></div>\r\n</ion-grid>\r\n", styles: [":host ::ng-deep kendo-breadcrumb.nav-bar{margin-left:15px;background:transparent;border-radius:5px}:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter,:host ::ng-deep kendo-breadcrumb.nav-bar .k-breadcrumb-delimiter-icon{color:var(--ion-color-primary-shade);font-size:calc(var(--nav-bar-font-size) * 1.2);opacity:1;font-weight:900}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item{font-size:var(--nav-bar-font-size);color:var(--ion-color-primary-shade);cursor:pointer;justify-content:center;text-align:center;font-weight:600;border-radius:15px;padding:5px 8px}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item:hover{background:rgba(var(--ion-color-primary-rgb),.15)}:host ::ng-deep kendo-breadcrumb.nav-bar .icon-with-text{padding:0 10px 0 0}:host ::ng-deep kendo-breadcrumb.nav-bar .nav-bar-item.current{cursor:default;background:transparent;color:#787878;padding-right:10px}\n"] }]
@@ -5564,7 +5565,7 @@ class UiappmenucontentComponent {
     }
 }
 UiappmenucontentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiappmenucontentComponent, deps: [{ token: i1.Router }, { token: i2.MenuService }, { token: i2.AuthService }, { token: i2.ZCoreService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col\r\n      [ngClass]=\"getDivClass(item)\"\r\n      *ngFor=\"let item of items; index as i; trackBy: trackByFn\"\r\n    >\r\n\r\n      <!-- Regular Menu Item (non-submenu) -->\r\n      <div\r\n        *ngIf=\"item.Type !== MENU_TYPE_DROPDOWN_SUBMENU\"\r\n        class=\"menu-btn ion-activatable ripple-parent\"\r\n        (click)=\"menuOnClick(item)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon\r\n            class=\"menu-icon\"\r\n            [icon]=\"['fas', item.Icon]\"\r\n            [inverse]=\"true\"\r\n          ></fa-icon>\r\n\r\n          <!-- 1) Spinner if loading -->\r\n          <ion-badge \r\n            class=\"pending-counter\"\r\n            *ngIf=\"item.counterLoading\">\r\n            <ion-spinner name=\"bubbles\"></ion-spinner>\r\n          </ion-badge>\r\n\r\n          <!-- 2) Numeric badge if loaded & > 0 -->\r\n          <ion-badge\r\n            class=\"pending-counter\"\r\n            *ngIf=\"!item.counterLoading && item.PendingCounter && item.PendingCounter > 0\">\r\n            {{ item.PendingCounter }}\r\n          </ion-badge>\r\n        </ion-label>\r\n\r\n        <ion-label class=\"menu-btn-label-text\">\r\n          {{ item.Label }}\r\n        </ion-label>\r\n\r\n        <ion-label\r\n          *ngIf=\"item.Description\"\r\n          class=\"menu-btn-label-text menu-btn-label-text-desc\"\r\n        >\r\n          {{ item.Description }}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <!-- Dropdown Submenu -->\r\n      <kendo-card *ngIf=\"item.Type === MENU_TYPE_DROPDOWN_SUBMENU\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>\r\n            {{ item.Label }}\r\n          </ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item) || []\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:123px;max-height:123px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{position:relative;background-size:100%;text-align:center;font-size:15px;top:.4em}.pending-counter{position:absolute;top:.4em;right:.4em;background-color:#ff243a;color:#fff;border-radius:1em;min-width:2.5em;max-width:6em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 .5em;box-sizing:border-box;font-size:1.2rem;line-height:1.1}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+UiappmenucontentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: { items: "items" }, ngImport: i0, template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col\r\n      [ngClass]=\"getDivClass(item)\"\r\n      *ngFor=\"let item of items; index as i; trackBy: trackByFn\"\r\n    >\r\n\r\n      <!-- Regular Menu Item (non-submenu) -->\r\n      <div\r\n        *ngIf=\"item.Type !== MENU_TYPE_DROPDOWN_SUBMENU\"\r\n        class=\"menu-btn ion-activatable ripple-parent\"\r\n        (click)=\"menuOnClick(item)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon\r\n            class=\"menu-icon\"\r\n            [icon]=\"['fas', item.Icon]\"\r\n            [inverse]=\"true\"\r\n          ></fa-icon>\r\n\r\n          <!-- 1) Spinner if loading -->\r\n          <ion-badge \r\n            class=\"pending-counter\"\r\n            *ngIf=\"item.counterLoading\">\r\n            <ion-spinner name=\"bubbles\"></ion-spinner>\r\n          </ion-badge>\r\n\r\n          <!-- 2) Numeric badge if loaded & > 0 -->\r\n          <ion-badge\r\n            class=\"pending-counter\"\r\n            *ngIf=\"!item.counterLoading && item.PendingCounter && item.PendingCounter > 0\">\r\n            {{ item.PendingCounter }}\r\n          </ion-badge>\r\n        </ion-label>\r\n\r\n        <ion-label class=\"menu-btn-label-text\">\r\n          {{ item.Label }}\r\n        </ion-label>\r\n\r\n        <ion-label\r\n          *ngIf=\"item.Description\"\r\n          class=\"menu-btn-label-text menu-btn-label-text-desc\"\r\n        >\r\n          {{ item.Description }}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <!-- Dropdown Submenu -->\r\n      <kendo-card *ngIf=\"item.Type === MENU_TYPE_DROPDOWN_SUBMENU\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>\r\n            {{ item.Label }}\r\n          </ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item) || []\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:123px;max-height:123px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{position:relative;background-size:100%;text-align:center;font-size:15px;top:.4em}.pending-counter{position:absolute;top:.4em;right:.4em;background-color:#ff243a;color:#fff;border-radius:1em;min-width:2.5em;max-width:6em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 .5em;box-sizing:border-box;font-size:1.2rem;line-height:1.1}\n"], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: UiappmenucontentComponent, selector: "app-uiappmenucontent", inputs: ["items"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: UiappmenucontentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-uiappmenucontent', template: "<ion-grid>\r\n  <ion-row>\r\n    <ion-col\r\n      [ngClass]=\"getDivClass(item)\"\r\n      *ngFor=\"let item of items; index as i; trackBy: trackByFn\"\r\n    >\r\n\r\n      <!-- Regular Menu Item (non-submenu) -->\r\n      <div\r\n        *ngIf=\"item.Type !== MENU_TYPE_DROPDOWN_SUBMENU\"\r\n        class=\"menu-btn ion-activatable ripple-parent\"\r\n        (click)=\"menuOnClick(item)\">\r\n        <ion-label class=\"menu-btn-label menu-btn-icon\">\r\n          <fa-icon\r\n            class=\"menu-icon\"\r\n            [icon]=\"['fas', item.Icon]\"\r\n            [inverse]=\"true\"\r\n          ></fa-icon>\r\n\r\n          <!-- 1) Spinner if loading -->\r\n          <ion-badge \r\n            class=\"pending-counter\"\r\n            *ngIf=\"item.counterLoading\">\r\n            <ion-spinner name=\"bubbles\"></ion-spinner>\r\n          </ion-badge>\r\n\r\n          <!-- 2) Numeric badge if loaded & > 0 -->\r\n          <ion-badge\r\n            class=\"pending-counter\"\r\n            *ngIf=\"!item.counterLoading && item.PendingCounter && item.PendingCounter > 0\">\r\n            {{ item.PendingCounter }}\r\n          </ion-badge>\r\n        </ion-label>\r\n\r\n        <ion-label class=\"menu-btn-label-text\">\r\n          {{ item.Label }}\r\n        </ion-label>\r\n\r\n        <ion-label\r\n          *ngIf=\"item.Description\"\r\n          class=\"menu-btn-label-text menu-btn-label-text-desc\"\r\n        >\r\n          {{ item.Description }}\r\n        </ion-label>\r\n        <ion-ripple-effect></ion-ripple-effect>\r\n      </div>\r\n\r\n      <!-- Dropdown Submenu -->\r\n      <kendo-card *ngIf=\"item.Type === MENU_TYPE_DROPDOWN_SUBMENU\">\r\n        <kendo-card-header class=\"k-hstack\">\r\n          <ion-label class=\"card-title\" kendoCardTitle>\r\n            {{ item.Label }}\r\n          </ion-label>\r\n        </kendo-card-header>\r\n        <kendo-card-body>\r\n          <div>\r\n            <app-uiappmenucontent [items]=\"getMenuList(item) || []\"></app-uiappmenucontent>\r\n          </div>\r\n        </kendo-card-body>\r\n      </kendo-card>\r\n    </ion-col>\r\n  </ion-row>\r\n</ion-grid>\r\n", styles: ["ion-grid{max-width:2000px;margin-top:10px}:host ::ng-deep kendo-card{width:95%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card .k-card-body{padding-top:0}.menu-col{padding:10px}.menu-btn{margin:0;padding:0;border:0px;display:flex;flex-flow:column;align-items:stretch;background-color:#fff;cursor:pointer;border-radius:5px;box-shadow:1px 1px 4px #797979;min-width:180px;max-width:250px;min-height:123px;max-height:123px;color:#fff;background:var(--ion-color-primary)}.menu-btn:hover{box-shadow:0 0 2px 2px var(--ion-color-secondary)}.menu-btn:hover .menu-btn-label-text-desc{bottom:0;transition:.5s ease bottom;width:100%}.menu-btn-label-text{text-align:center;font-size:16px;font-weight:600;padding:10px 5px}.menu-btn-label-text-desc{bottom:-100%;transition:.5s ease bottom;display:block;position:absolute;color:#000;font-size:16px;background-color:#fff;padding:8px 10px;border:1px solid #797979;border-radius:5px;text-shadow:0px 0px black;width:100%;text-align:left;font-size:14px;font-weight:500}.ripple-parent{position:relative;overflow:hidden}.menu-btn-label{text-align:center;font-size:15px}.menu-icon{zoom:3;position:relative;top:2px}.menu-btn-icon{position:relative;background-size:100%;text-align:center;font-size:15px;top:.4em}.pending-counter{position:absolute;top:.4em;right:.4em;background-color:#ff243a;color:#fff;border-radius:1em;min-width:2.5em;max-width:6em;height:1.5em;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:0 .5em;box-sizing:border-box;font-size:1.2rem;line-height:1.1}\n"] }]
@@ -5658,7 +5659,7 @@ class ZBulletComponent {
     }
 }
 ZBulletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZBulletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZBulletComponent, selector: "app-zbullet", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZBulletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZBulletComponent, selector: "app-zbullet", inputs: { data: "data", group: "group", form: "form" }, ngImport: i0, template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZBulletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zbullet', template: "<ion-item [formGroup]=\"form\" *ngIf=\"componentProperties.isVisible\" [ngClass]=\"getClass(form, data)\">\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\" class=\"listContainer\">\r\n      <ul *ngIf=\"data.ListType === 'ul'\" [style.list-style-type]=\"data.BulletStyle ? data.BulletStyle : 'disc'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ul>\r\n      <ol *ngIf=\"data.ListType === 'ol'\">\r\n        <li *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </li>\r\n      </ol>\r\n      <!-- <dl *ngIf=\"data.ListType === 'dl'\">\r\n        <dd *ngFor=\"let item of dataSource\">\r\n          <ion-label class=\"ion-text-wrap\" Position=\"Fixed\" [color]=\"item.Color ? item.Color : 'black'\">\r\n            {{item.Label}}\r\n          </ion-label>\r\n        </dd>\r\n      </dl> -->\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.listContainer li{font-size:12px;white-space:pre-wrap!important}.mediumFont .listContainer li{font-size:15px;white-space:pre-wrap!important}\n"] }]
@@ -5799,7 +5800,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
     }
 }
 ZbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbuttonsComponent, selector: "app-zbuttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zbuttons", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\"\r\n    [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\"\r\n      class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span (click)=\"buttonClick(dataItem)\">{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\"\r\n    [style]=\"componentProperties.style.style3\">\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ng-container *ngFor=\"let item of leftBtns; let i = index\">\r\n        <ion-button [fill]=\"item.fill\" *ngIf=\"item.Type === 'a'\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style5 + ' ' + item.style\"\r\n          class=\"e1tag-style5\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ng-container *ngFor=\"let item of rightBtns; let i = index\">\r\n        <ion-button *ngIf=\"item.Type === 'a'\" [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\"\r\n          [ngClass]=\"item.class\" (click)=\"buttonClick(item)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n          [disabled]=\"group.isTriggered || item.disabled\" [style]=\"componentProperties.style.style7 + ' ' + item.style\"\r\n          class=\"e1tag-style7\">\r\n          <div class=\"button-content-container e1tag-style8\" [style]=\"componentProperties.style.style8\">\r\n            <fa-icon class=\"btn-icon e1tag-style9\" [style]=\"componentProperties.style.style9\" *ngIf=\"item.icon\"\r\n              [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n            <span class=\"ion-text-capitalize e1tag-style10\" [style]=\"componentProperties.style.style10\"\r\n              *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\">{{item.text}}</span>\r\n          </div>\r\n        </ion-button>\r\n        <app-zformcontrol *ngIf=\"item.Type !== 'a'\"\r\n          [ngClass]=\"group[item['isVisibleField']] ? item.DivClass :((item.Visible === true) ?  item.DivClass : 'flex-hide')\"\r\n          [field]=\"item\" [group]=\"group\" [form]=\"form\" id=\"{{item.Type}}-{{item.Name}}\"></app-zformcontrol>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
@@ -5919,7 +5920,7 @@ class ZbreadcrumbComponent extends ContainerFieldBase {
     }
 }
 ZbreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbreadcrumbComponent, deps: [{ token: ZComponentService }, { token: i1.Router }, { token: MainService }, { token: i2.CacheService }], target: i0.ɵɵFactoryTarget.Component });
-ZbreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbreadcrumbComponent, selector: "app-zbreadcrumb", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && options && options.navItems\">\r\n      <kendo-breadcrumb [items]=\"options.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n        <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n          <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n            <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n                     [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n            <span>{{ item.text }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-breadcrumb>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n", styles: [""], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i7.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "collapseMode"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ZbreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZbreadcrumbComponent, selector: "app-zbreadcrumb", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && options && options.navItems\">\r\n      <kendo-breadcrumb [items]=\"options.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n        <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n          <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n            <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n                     [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n            <span>{{ item.text }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-breadcrumb>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n", styles: [""], components: [{ type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i7.BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: ["items", "separatorIcon", "collapseMode"], outputs: ["itemClick"], exportAs: ["kendoBreadCrumb"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.BreadCrumbItemTemplateDirective, selector: "[kendoBreadCrumbItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZbreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zbreadcrumb', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"!group.isLoading && !isMobileScreen() && options && options.navItems\">\r\n      <kendo-breadcrumb [items]=\"options.navItems\" class=\"nav-bar\" (itemClick)=\"onNavItemClick($event)\">\r\n        <ng-template kendoBreadCrumbItemTemplate let-item let-index=\"index\">\r\n          <div class=\"nav-bar-item\" [class.current]=\"!item.route\">\r\n            <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\" class=\"zcard-header-icon\"\r\n                     [ngClass]=\"{'icon-with-text': item.text}\"></fa-icon>\r\n            <span>{{ item.text }}</span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-breadcrumb>\r\n    </ion-row>\r\n  </ion-grid>\r\n</div>\r\n", styles: [""] }]
@@ -6013,7 +6014,7 @@ class ContextMenuComponent extends FieldBase {
     }
 }
 ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContextMenuComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }, { token: i2.UISignalService }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ContextMenuComponent, selector: "app-context-menu", inputs: { target: "target", selectedData: "selectedData" }, viewQueries: [{ propertyName: "contextMenuList", predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"], components: [{ type: i3$4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$4.HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { type: i3$4.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ContextMenuComponent, selector: "app-context-menu", inputs: { target: "target", selectedData: "selectedData" }, viewQueries: [{ propertyName: "contextMenuList", predicate: ["contextMenu"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"], components: [{ type: i3$4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$4.HierarchyBindingDirective, selector: "[kendoMenuHierarchyBinding]", inputs: ["kendoMenuHierarchyBinding", "textField", "urlField", "iconField", "svgIconField", "disabledField", "cssClassField", "cssStyleField", "separatorField", "childrenField"], exportAs: ["kendoMenuHierarchyBinding"] }, { type: i3$4.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-context-menu", template: "<div class=\"context-menu-container\" *ngIf=\"target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [target]=\"target\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\"\r\n    (popupOpen)=\"popUpOpened(contextMenu)\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n\r\n<!-- Manual trigger from zgrid, ztree -->\r\n<div class=\"context-menu-container-manual-trigger-mode\" *ngIf=\"!target && !isLoading\">\r\n  <kendo-contextmenu\r\n    #contextMenu\r\n    class=\"context-menu-item\"\r\n    *ngFor=\"let targetContextMenuSetting of contextMenuSettings\"\r\n    [size]=\"targetContextMenuSetting.Size ?? 'medium'\"\r\n    [kendoMenuHierarchyBinding]=\"targetContextMenuSetting.ContextMenuItems\"\r\n    childrenField=\"Value\"\r\n    separatorField=\"IsSeparator\"\r\n    (select)=\"onSelect($event, targetContextMenuSetting)\"\r\n    [filter]=\"targetContextMenuSetting.CSSSelectorFilter\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"context-menu-item-container\" [class.has-icon]=\"item.data.Icon\" [ngClass]=\"item.data.Class\"\r\n        *ngIf=\"!item.data.IsSeparator\">\r\n        <fa-icon class=\"context-menu-item-icon\" [icon]=\"getFontAwesome(item.data.Icon, fontAweSomeService)\"\r\n          *ngIf=\"item.data.Icon\"></fa-icon>\r\n        <div class=\"context-menu-item-text\" *ngIf=\"item.data.Text\">{{ item.data.TranslatedText ?? item.data.Text }}\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-contextmenu>\r\n</div>\r\n", styles: [".context-menu-item-container.has-icon{display:grid;grid-template-columns:20px auto}.context-menu-item-container.has-icon .context-menu-item-icon{padding-right:5px}\n"] }]
@@ -6086,7 +6087,7 @@ class ZdivComponent extends ContainerFieldBase {
     }
 }
 ZdivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdivComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: ["@media (min-width: 357px){.col-xs-1{width:8.333%}.col-xs-2{width:16.666%}.col-xs-3{width:25%}.col-xs-4{width:33.333%}.col-xs-5{width:41.666%}.col-xs-6{width:50%}.col-xs-8{width:66.666%}.col-xs-9{width:75%}.col-xs-10{width:83.333%}.col-xs-11{width:91.667%}.col-xs-12{width:100%}}@media (min-width: 576px){.col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}.col-sm-5{width:41.666%}.col-sm-6{width:50%}.col-sm-8{width:66.666%}.col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%}}@media (min-width: 768px){.col-1,.col-md-1{width:8.333%}.col-2,.col-md-2{width:16.666%}.col-3,.col-md-3{width:25%}.col-4,.col-md-4{width:33.333%}.col-5,.col-md-5{width:41.666%}.col-6,.col-md-6{width:50%}.col-7,.col-md-7{width:58.333%}.col-8,.col-md-8{width:66.666%}.col-9,.col-md-9{width:75%}.col-10,.col-md-10{width:83.333%}.col-11,.col-md-11{width:91.667%}.col-12,.col-md-12{width:100%}}@media (min-width: 992px){.col-lg-1{width:8.333%}.col-lg-2{width:16.666%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}.col-lg-10{width:83.333%}.col-lg-11{width:91.667%}.col-lg-12{width:100%}}@media (min-width: 1200px){.col-xl-1{width:8.333%}.col-xl-2{width:16.666%}.col-xl-3{width:25%}.col-xl-4{width:33.333%}.col-xl-5{width:41.666%}.col-xl-6{width:50%}.col-xl-8{width:66.666%}.col-xl-9{width:75%}.col-xl-10{width:83.333%}.col-xl-11{width:91.667%}.col-xl-12{width:100%}}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: ["@media (min-width: 357px){.col-xs-1{width:8.333%}.col-xs-2{width:16.666%}.col-xs-3{width:25%}.col-xs-4{width:33.333%}.col-xs-5{width:41.666%}.col-xs-6{width:50%}.col-xs-8{width:66.666%}.col-xs-9{width:75%}.col-xs-10{width:83.333%}.col-xs-11{width:91.667%}.col-xs-12{width:100%}}@media (min-width: 576px){.col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}.col-sm-5{width:41.666%}.col-sm-6{width:50%}.col-sm-8{width:66.666%}.col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%}}@media (min-width: 768px){.col-1,.col-md-1{width:8.333%}.col-2,.col-md-2{width:16.666%}.col-3,.col-md-3{width:25%}.col-4,.col-md-4{width:33.333%}.col-5,.col-md-5{width:41.666%}.col-6,.col-md-6{width:50%}.col-7,.col-md-7{width:58.333%}.col-8,.col-md-8{width:66.666%}.col-9,.col-md-9{width:75%}.col-10,.col-md-10{width:83.333%}.col-11,.col-md-11{width:91.667%}.col-12,.col-md-12{width:100%}}@media (min-width: 992px){.col-lg-1{width:8.333%}.col-lg-2{width:16.666%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}.col-lg-10{width:83.333%}.col-lg-11{width:91.667%}.col-lg-12{width:100%}}@media (min-width: 1200px){.col-xl-1{width:8.333%}.col-xl-2{width:16.666%}.col-xl-3{width:25%}.col-xl-4{width:33.333%}.col-xl-5{width:41.666%}.col-xl-6{width:50%}.col-xl-8{width:66.666%}.col-xl-9{width:75%}.col-xl-10{width:83.333%}.col-xl-11{width:91.667%}.col-xl-12{width:100%}}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZdivComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zdiv', template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\" #zdiv>\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of data.Value\"\r\n                    [field]=\"field\"\r\n                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zdiv\"></app-context-menu>\r\n</div>\r\n", styles: ["@media (min-width: 357px){.col-xs-1{width:8.333%}.col-xs-2{width:16.666%}.col-xs-3{width:25%}.col-xs-4{width:33.333%}.col-xs-5{width:41.666%}.col-xs-6{width:50%}.col-xs-8{width:66.666%}.col-xs-9{width:75%}.col-xs-10{width:83.333%}.col-xs-11{width:91.667%}.col-xs-12{width:100%}}@media (min-width: 576px){.col-sm-1{width:8.333%}.col-sm-2{width:16.666%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}.col-sm-5{width:41.666%}.col-sm-6{width:50%}.col-sm-8{width:66.666%}.col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%}}@media (min-width: 768px){.col-1,.col-md-1{width:8.333%}.col-2,.col-md-2{width:16.666%}.col-3,.col-md-3{width:25%}.col-4,.col-md-4{width:33.333%}.col-5,.col-md-5{width:41.666%}.col-6,.col-md-6{width:50%}.col-7,.col-md-7{width:58.333%}.col-8,.col-md-8{width:66.666%}.col-9,.col-md-9{width:75%}.col-10,.col-md-10{width:83.333%}.col-11,.col-md-11{width:91.667%}.col-12,.col-md-12{width:100%}}@media (min-width: 992px){.col-lg-1{width:8.333%}.col-lg-2{width:16.666%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.666%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}.col-lg-10{width:83.333%}.col-lg-11{width:91.667%}.col-lg-12{width:100%}}@media (min-width: 1200px){.col-xl-1{width:8.333%}.col-xl-2{width:16.666%}.col-xl-3{width:25%}.col-xl-4{width:33.333%}.col-xl-5{width:41.666%}.col-xl-6{width:50%}.col-xl-8{width:66.666%}.col-xl-9{width:75%}.col-xl-10{width:83.333%}.col-xl-11{width:91.667%}.col-xl-12{width:100%}}\n"] }]
@@ -6108,7 +6109,7 @@ class ZcardComponent extends ContainerFieldBase {
     }
 }
 ZcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcardComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\"\r\n    [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px;align-items:self-end}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);border:1px solid #dbdbdb;padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link{padding:2px 8px 5px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-icon{font-size:12px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-title{font-size:14px}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i2$5.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i2$5.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i2$5.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
+ZcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcardComponent, selector: "app-zcard", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\"\r\n    [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px;align-items:self-end}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);border:1px solid #dbdbdb;padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link{padding:2px 8px 5px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-icon{font-size:12px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-title{font-size:14px}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"], components: [{ type: i2$5.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse"], exportAs: ["kendoPanelbar"] }, { type: i2$5.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]" }, { type: i2$5.PanelBarContentDirective, selector: "[kendoPanelBarContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcard", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\" [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <kendo-panelbar class=\"zcard e1tag-container-style1\" keepItemContent=\"true\" [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\"\r\n    [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\"\r\n                         [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n          <fa-icon [icon]=\"componentProperties.icon || 'folder'\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">{{componentProperties.title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <app-zdiv class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\" [data]=\"data\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}:host ::ng-deep kendo-panelbar.zcard{border:none;background:transparent}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link{background:var(--ion-color-primary);text-transform:none;border-radius:var(--ion-container-border-radius);padding:10px 16px;align-items:self-end}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-icon{color:var(--ion-color-primary-contrast);padding-right:10px;font-size:11pt}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link .zcard-header-title{color:var(--ion-color-primary-contrast);font-weight:600;font-size:16px;padding-top:3px}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link>.k-icon{color:var(--ion-color-primary-contrast);font-size:20px;font-weight:900}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-hover{background:rgba(var(--ion-color-primary-rgb),.9);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-selected,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header>.k-link.k-state-selected{background:var(--ion-color-primary)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link{border-radius:var(--ion-container-border-radius) var(--ion-container-border-radius) 0px 0px;background:rgba(var(--ion-color-primary-rgb),.25)}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link.k-state-selected:hover,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-hover :host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link.k-state-selected:hover{background:rgba(var(--ion-color-primary-rgb),.35);cursor:pointer}:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-expanded>.k-link .k-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-icon,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .zcard-header-title,:host ::ng-deep kendo-panelbar.zcard>.k-panelbar-header.k-state-expanded>.k-link .k-icon{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-panelbar.zcard .k-content.k-panelbar-content{border-radius:0px 0px var(--ion-container-border-radius) var(--ion-container-border-radius);border:1px solid #dbdbdb;padding:5px 5px 20px 0;animation:slide-bottom .5s cubic-bezier(.25,.46,.45,.94) both}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link{padding:2px 8px 5px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-icon{font-size:12px}:host ::ng-deep kendo-panelbar.zcard.medium-size-header>.k-panelbar-header>.k-link .zcard-header-title{font-size:14px}@keyframes slide-bottom{0%{transform:translateY(-50px);opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{transform:translateY(0);opacity:1}}\n"] }]
@@ -6862,12 +6863,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 args: ["checkbox"]
             }] } });
 
+/********** Angular **********/
+class InputFieldAddOnsComponent extends InputFieldBase {
+    constructor(componentService, fontAweSomeService, translationService) {
+        super(componentService);
+        this.fontAweSomeService = fontAweSomeService;
+        this.translationService = translationService;
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        if (this.addOn) {
+            this.position = this.position || 'top';
+            this.setupIconList();
+            this.setupButtonList();
+            this.setupTextList();
+            this.setupChipList();
+        }
+    }
+    setupIconList() {
+        // this.addOn.IconList = [{ Icon: "user", Click: null, Style: "color:blue;", ToolTipText: "text" }]; // For Testing
+        if (this.addOn.IconList) {
+            this.addOn.IconList = this.addOn.IconList.filter(x => x);
+            this.addOn.IconList.forEach((i) => {
+                if (!i.ToolTipText) {
+                    i.ToolTipText = "";
+                }
+                else if (i.ToolTipText.indexOf("group.") !== -1) {
+                    i.ToolTipText = ZComponentHelper.getGroupEvalValue.call(this, i.ToolTipText);
+                }
+                this.translationService.$translateText(i.ToolTipText, { elementName: this.group.fieldName, group: this.group }).subscribe();
+                // Default position top. right | bottom | top | left
+                i.Position = i.Position || "top";
+            });
+            this.translationService.$translateItemList(this.addOn.IconList, "ToolTipText", { elementName: this.group.fieldName, group: this.group }).subscribe();
+        }
+    }
+    setupButtonList() {
+        // this.addOn.ButtonList = [{ Text: 'test', Icon: 'user', Style: '', Click: null }];  // For Testing
+        if (this.addOn.ButtonList) {
+            this.addOn.ButtonList = this.addOn.ButtonList.filter(x => x);
+            this.addOn.ButtonList.forEach(button => {
+                const isUseCustomClass = button.Color ? false : true;
+                button['color'] = isUseCustomClass ? '' : (button.Color || 'primary');
+                button['fill'] = isUseCustomClass ? '' : (button.Fill || 'solid');
+                button['class'] = isUseCustomClass ? `${button.Class} useCustomClass` : button.Class;
+                button.Visible = ZComponentHelper.isNullUndefinedEmpty(button.Visible) ? 'true' : button.Visible;
+            });
+            this.translationService.$translateItemList(this.addOn.ButtonList, "Text", { elementName: this.group.fieldName, group: this.group }).subscribe();
+        }
+    }
+    setupTextList() {
+        // this.addOn.TextList = [{ Text: 'test', Style: '', TooltipText: 'test' }];  // For Testing
+        if (this.addOn.TextList) {
+            this.addOn.TextList = this.addOn.TextList.filter(x => x);
+            this.addOn.TextList.forEach((i) => {
+                if (!i.ToolTipText) {
+                    i.ToolTipText = "";
+                }
+                else if (i.ToolTipText.indexOf("group.") !== -1) {
+                    i.ToolTipText = ZComponentHelper.getGroupEvalValue.call(this, i.ToolTipText);
+                }
+                // Default position top. right | bottom | top | left
+                i.Position = i.Position || "top";
+            });
+            this.translationService.$translateItemList(this.addOn.TextList, "Text", { elementName: this.group.fieldName, group: this.group }).subscribe();
+            this.translationService.$translateItemList(this.addOn.TextList, "ToolTipText", { elementName: this.group.fieldName, group: this.group }).subscribe();
+        }
+    }
+    setupChipList() {
+        if (this.addOn.ChipList) {
+            this.addOn.ChipList = this.addOn.ChipList.filter(x => x);
+            this.translationService.$translateItemList(this.addOn.ChipList, "Label", { elementName: this.group.fieldName, group: this.group }).subscribe();
+        }
+    }
+    onRemoveChip(chip) {
+        if (this.addOn.ChipList) {
+            const index = this.addOn.ChipList.indexOf(chip);
+            if (index > -1) {
+                this.addOn.ChipList.splice(index, 1);
+            }
+        }
+    }
+    onChipSelectionChange(selectedChipIndexes) {
+        if (this.addOn.ChipList) {
+            this.addOn.ChipList.forEach((chip, i) => {
+                chip.Selected = Array.isArray(selectedChipIndexes) ? selectedChipIndexes.includes(i) : selectedChipIndexes === i;
+            });
+        }
+    }
+}
+InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
+InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n  <div class=\"addons-chips\" *ngIf=\"addOn.ChipList && addOn.ChipList.length > 0\">\r\n    <kendo-chip-list [selection]=\"data && data['Multiple'] ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"onChipSelectionChange($event)\">\r\n      <kendo-chip *ngFor=\"let chip of addOn.ChipList\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable && !chip.ReadOnly\"\r\n        [style]=\"chip.Style\" \r\n        [style.pointer-events]=\"chip.ReadOnly ? 'none' : 'auto'\"\r\n        (contentClick)=\"onIconClick(chip.Click)\" (remove)=\"onRemoveChip(chip)\">\r\n        <div class=\"e1-chip-content-container\" style=\"display: flex; align-items: center; gap: 5px;\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\"></div>\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top{margin-bottom:5px}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.bottom{margin-top:5px}.addons-container.left{margin-right:5px}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container.right{margin-left:5px}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"], components: [{ type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3$3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n  <div class=\"addons-chips\" *ngIf=\"addOn.ChipList && addOn.ChipList.length > 0\">\r\n    <kendo-chip-list [selection]=\"data && data['Multiple'] ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"onChipSelectionChange($event)\">\r\n      <kendo-chip *ngFor=\"let chip of addOn.ChipList\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable && !chip.ReadOnly\"\r\n        [style]=\"chip.Style\" \r\n        [style.pointer-events]=\"chip.ReadOnly ? 'none' : 'auto'\"\r\n        (contentClick)=\"onIconClick(chip.Click)\" (remove)=\"onRemoveChip(chip)\">\r\n        <div class=\"e1-chip-content-container\" style=\"display: flex; align-items: center; gap: 5px;\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\"></div>\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top{margin-bottom:5px}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.bottom{margin-top:5px}.addons-container.left{margin-right:5px}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container.right{margin-left:5px}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.TranslationService }]; }, propDecorators: { position: [{
+                type: Input
+            }], addOn: [{
+                type: Input
+            }] } });
+
 /********** Angular **********/
 class ZChipComponent extends InputFieldBase {
     constructor(componentService, fontAweSomeService) {
         super(componentService);
         this.componentService = componentService;
         this.fontAweSomeService = fontAweSomeService;
+        this.inputFieldAddOn = { top: {}, left: {}, right: {}, bottom: {} };
     }
     ngOnInit() {
         super.initComponent().pipe(tap(() => {
@@ -6875,11 +6978,26 @@ class ZChipComponent extends InputFieldBase {
             if (this.dataSource && this.dataSource.length > 0) {
                 this.setupDataSourceByzModel();
             }
+            this.setupAddOnValue();
         })).subscribe();
     }
+    setupAddOnValue(addOns) {
+        const inputFieldAddOnGroupValue = ZComponentHelper.getGroupValue(addOns || this.data.InputFieldAddOns, this.group);
+        const addOnValue = inputFieldAddOnGroupValue || addOns || this.data.InputFieldAddOns;
+        if (addOnValue && Array.isArray(addOnValue)) {
+            for (const key of Object.keys(this.inputFieldAddOn)) {
+                this.inputFieldAddOn[key] = addOnValue.find(i => i.Position === key);
+            }
+        }
+    }
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
+    get isReadOnly() {
+        return !!this.componentProperties.isReadOnlyField
+            ? this.group[this.componentProperties.isReadOnlyField]
+            : this.componentProperties.isReadOnly;
+    }
     setupDataSource() {
         if (!this.data.DataSource) {
             console.error("No data source found for zchip");
@@ -6904,7 +7022,17 @@ class ZChipComponent extends InputFieldBase {
     }
     setData(data) {
         var _a;
-        this.setupDataSourceByzModel();
+        if (data !== undefined && data !== null) {
+            // Datasource replacement mode: caller provides a new chip array directly.
+            // Used when the chip list itself changes
+            this.dataSource = data;
+        }
+        else {
+            // Selection-refresh mode: chip list stays the same, only re-evaluate which chips
+            // are marked Selected based on the current group.zModel[data.Value].
+            this.setupDataSourceByzModel();
+        }
+        // Spread into a new array reference so Angular detects the change and re-renders.
         this.dataSource = [...this.dataSource];
         // Need to set in this way as the chips are QueryList
         if (this.chipList && this.chipList.chips && this.chipList.chips.length > 0) {
@@ -6955,10 +7083,10 @@ class ZChipComponent extends InputFieldBase {
     }
 }
 ZChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZChipComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZChipComponent, selector: "app-zchip", viewQueries: [{ propertyName: "chipList", first: true, predicate: ChipListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n      class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n        (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n        [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n            class=\"e1tag-style5\"></div>\r\n          <!-- <div *ngIf=\"chip.Label\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{chip.Label}}</div> -->\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n            [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px rgba(var(--ion-color-primary-rgb),1)}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}\n"], components: [{ type: i3$3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZChipComponent, selector: "app-zchip", viewQueries: [{ propertyName: "chipList", first: true, predicate: ChipListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\"\r\n    *ngIf=\"!data.InputFieldAddOns || data.InputFieldAddOns.length <= 0\">\r\n    <div kendoTooltip>\r\n      <kendo-chip-list [selection]=\"isReadOnly ? 'none' : (data.Multiple ? 'multiple' : 'single')\"\r\n        [style.pointer-events]=\"isReadOnly ? 'none' : 'auto'\"\r\n        (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n        class=\"e1tag-style2\">\r\n        <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n          [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n          (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n          [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n          <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n            <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n              class=\"e1tag-style5\"></div>\r\n            <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n              [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n          </div>\r\n        </kendo-chip>\r\n      </kendo-chip-list>\r\n    </div>\r\n  </div>\r\n  <div class=\"label-div-container e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n    *ngIf=\"data.InputFieldAddOns && data.InputFieldAddOns.length > 0\">\r\n    <div class=\"addon-top-row\" *ngIf=\"inputFieldAddOn.top\">\r\n      <app-input-field-addons class=\"addon-top e1tag-style4\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <div class=\"content-withaddon-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n      <app-input-field-addons class=\"addon-left e1tag-style4\" [position]=\"'left'\" [addOn]=\"inputFieldAddOn.left\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n      <div kendoTooltip>\r\n        <kendo-chip-list [selection]=\"isReadOnly ? 'none' : (data.Multiple ? 'multiple' : 'single')\"\r\n        [style.pointer-events]=\"isReadOnly ? 'none' : 'auto'\"\r\n          (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n          class=\"e1tag-style2\">\r\n          <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n            [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n            (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n            [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n            <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n              <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n                class=\"e1tag-style5\"></div>\r\n              <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n                [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n            </div>\r\n          </kendo-chip>\r\n        </kendo-chip-list>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-style4\" [position]=\"'right'\" [addOn]=\"inputFieldAddOn.right\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <div class=\"addon-bottom-row\" *ngIf=\"inputFieldAddOn.bottom\">\r\n      <app-input-field-addons class=\"addon-bottom e1tag-style4\" [position]=\"'bottom'\" [addOn]=\"inputFieldAddOn.bottom\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px rgba(var(--ion-color-primary-rgb),1)}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}.label-div-container{width:100%}.addon-top-row,.addon-bottom-row{display:block}.content-withaddon-container{display:flex;align-items:center;gap:5px}\n"], components: [{ type: i3$3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zchip', template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div kendoTooltip class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-chip-list [selection]=\"data.Multiple ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n      class=\"e1tag-style2\">\r\n      <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n        (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n        [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n            class=\"e1tag-style5\"></div>\r\n          <!-- <div *ngIf=\"chip.Label\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{chip.Label}}</div> -->\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n            [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px rgba(var(--ion-color-primary-rgb),1)}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}\n"] }]
+            args: [{ selector: 'app-zchip', template: "<div [formGroup]=\"form\" class=\"e1tag-style\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"e1tag-style1\" [style]=\"componentProperties.style.style1\"\r\n    *ngIf=\"!data.InputFieldAddOns || data.InputFieldAddOns.length <= 0\">\r\n    <div kendoTooltip>\r\n      <kendo-chip-list [selection]=\"isReadOnly ? 'none' : (data.Multiple ? 'multiple' : 'single')\"\r\n        [style.pointer-events]=\"isReadOnly ? 'none' : 'auto'\"\r\n        (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n        class=\"e1tag-style2\">\r\n        <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n          [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n          (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n          [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n          <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n            <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n              class=\"e1tag-style5\"></div>\r\n            <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n              [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n          </div>\r\n        </kendo-chip>\r\n      </kendo-chip-list>\r\n    </div>\r\n  </div>\r\n  <div class=\"label-div-container e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n    *ngIf=\"data.InputFieldAddOns && data.InputFieldAddOns.length > 0\">\r\n    <div class=\"addon-top-row\" *ngIf=\"inputFieldAddOn.top\">\r\n      <app-input-field-addons class=\"addon-top e1tag-style4\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <div class=\"content-withaddon-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n      <app-input-field-addons class=\"addon-left e1tag-style4\" [position]=\"'left'\" [addOn]=\"inputFieldAddOn.left\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n      <div kendoTooltip>\r\n        <kendo-chip-list [selection]=\"isReadOnly ? 'none' : (data.Multiple ? 'multiple' : 'single')\"\r\n        [style.pointer-events]=\"isReadOnly ? 'none' : 'auto'\"\r\n          (selectedChange)=\"chipListChangeSelection($event)\" [style]=\"componentProperties.style.style2\"\r\n          class=\"e1tag-style2\">\r\n          <kendo-chip *ngFor=\"let chip of dataSource\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n            [removable]=\"chip.Removable\" (remove)=\"onRemove(chip)\"\r\n            (mouseover)=\"mouseover($event, chip)\" (contentClick)=\"onItemClick($event, chip)\"\r\n            [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n            <div class=\"e1-chip-content-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n              <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\" [style]=\"componentProperties.style.style5\"\r\n                class=\"e1tag-style5\"></div>\r\n              <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"\r\n                [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\"></fa-icon>\r\n            </div>\r\n          </kendo-chip>\r\n        </kendo-chip-list>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-right e1tag-style4\" [position]=\"'right'\" [addOn]=\"inputFieldAddOn.right\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <div class=\"addon-bottom-row\" *ngIf=\"inputFieldAddOn.bottom\">\r\n      <app-input-field-addons class=\"addon-bottom e1tag-style4\" [position]=\"'bottom'\" [addOn]=\"inputFieldAddOn.bottom\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-chip-list .k-chip-filled,:host ::ng-deep kendo-chip-list .k-chip{background:white;border:1px solid #d1d1d1}:host ::ng-deep kendo-chip-list .k-chip-filled.k-selected,:host ::ng-deep kendo-chip-list .k-chip.k-selected{background:rgba(var(--ion-color-primary-rgb),.2);color:#000;box-shadow:0 0 1px 1px rgba(var(--ion-color-primary-rgb),1)}.e1-chip-content-container{display:flex;gap:5px;margin:2px 4px}.label-div-container{width:100%}.addon-top-row,.addon-bottom-row{display:block}.content-withaddon-container{display:flex;align-items:center;gap:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }]; }, propDecorators: { chipList: [{
                 type: ViewChild,
                 args: [ChipListComponent]
@@ -7100,7 +7228,7 @@ class ZcodeeditorComponent {
     }
 }
 ZcodeeditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcodeeditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZcodeeditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcodeeditorComponent, selector: "app-zcodeeditor", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""], components: [{ type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$7.AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "editorfilter": EditorFilter } });
+ZcodeeditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZcodeeditorComponent, selector: "app-zcodeeditor", inputs: { data: "data", group: "group", form: "form" }, viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""], components: [{ type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i2$7.AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "editorfilter": EditorFilter } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZcodeeditorComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zcodeeditor", template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\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>\r\n  <!-- <div ace-editor\r\n       [(text)]=\"text\"\r\n       ></div> -->\r\n  <ace-editor [readOnly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\" #editor [ngStyle]=\"getEditorStyle()\" (textChanged)=\"onTextChange($event)\" [text]=\"getValue() | editorfilter\" [theme]=\"theme\" [mode]=\"mode\"></ace-editor>\r\n\r\n    <!-- <ngx-monaco-editor #editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor> -->\r\n  </div>\r\n\r\n</div>", styles: [""] }]
@@ -7445,7 +7573,7 @@ class ZgaugeComponent extends FieldBase {
     }
 }
 ZgaugeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgaugeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZgaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgaugeComponent, selector: "app-zgauge", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"componentProperties.style.style\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" [style]=\"componentProperties.style.style1\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\" [style]=\"componentProperties.style.style2\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""], components: [{ type: i2$8.ArcGaugeComponent, selector: "kendo-arcgauge", inputs: ["value", "color", "colors", "opacity", "scale"], exportAs: ["kendoArcGauge"] }, { type: i2$8.ArcScaleComponent, selector: "kendo-arcgauge-scale", inputs: ["labels", "rangeDistance", "rangeLineCap", "startAngle", "endAngle"] }, { type: i2$8.ArcLabelsComponent, selector: "kendo-arcgauge-scale-labels" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$8.ArcCenterTemplateDirective, selector: "[kendoArcGaugeCenterTemplate]" }] });
+ZgaugeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgaugeComponent, selector: "app-zgauge", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"componentProperties.style.style\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" [style]=\"componentProperties.style.style1\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\" [style]=\"componentProperties.style.style2\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""], components: [{ type: i2$8.ArcGaugeComponent, selector: "kendo-arcgauge", inputs: ["value", "color", "colors", "opacity", "scale"], exportAs: ["kendoArcGauge"] }, { type: i2$8.ArcScaleComponent, selector: "kendo-arcgauge-scale", inputs: ["labels", "rangeDistance", "rangeLineCap", "startAngle", "endAngle"] }, { type: i2$8.ArcLabelsComponent, selector: "kendo-arcgauge-scale-labels" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$8.ArcCenterTemplateDirective, selector: "[kendoArcGaugeCenterTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgaugeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zgauge', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [style]=\"componentProperties.style.style\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\" *ngIf=\"options.title\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" [style]=\"componentProperties.style.style1\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\" [style]=\"componentProperties.style.style2\">{{ value }}</span>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n\r\n<!--<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [style]=\"componentProperties.style.style\" class=\"e1tag-style\">\r\n  <div class=\"chart-top-title e1tag-style1\" [style]=\"componentProperties.style.style1\" *ngIf=\"options.title\">\r\n    {{options.title}}\r\n  </div>\r\n  <div [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\"\r\n                    [style]=\"getGaugeStyle()\" class=\"e1tag-style3\">\r\n      <kendo-arcgauge-scale [majorTicks]=\"options.majorTicks\"\r\n                            [minorTicks]=\"options.minorTicks\"\r\n                            [reverse]=\"options.reverse\"\r\n                            [startAngle]=\"options.startAngle\"\r\n                            [endAngle]=\"options.endAngle\"\r\n                            [min]=\"options.minValue\"\r\n                            [max]=\"options.maxValue\"\r\n                            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n                            [rangeSize]=\"options.rangeSize\"\r\n                            [rangeLineCap]=\"options.rangeLineCap\">\r\n        <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n        </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <div *ngIf=\"options.chartInnerText1\" [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\">{{ options.chartInnerText1 }}</div>\r\n        <div *ngIf=\"options.chartInnerText2\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">{{ options.chartInnerText2 }}</div>\r\n      </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>-->\r\n\r\n", styles: [""] }]
@@ -7703,7 +7831,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
     }
 }
 ZworkflowbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZworkflowbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
-ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZworkflowbuttonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zworkflowbuttons', template: "<div class=\"e1tag-style\"\r\n  *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\">\r\n  <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      Actions\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n            kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n            style=\"margin-right: 5px;\">\r\n      {{item.text}}\r\n    </button> -->\r\n    <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n    <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n      <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n        [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n        [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n        <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n        <span *ngIf=\"item.text && item.showLabel\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n      </ion-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
@@ -8515,7 +8643,7 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i0.ChangeDetectorRef }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }, { propertyName: "itemElement", first: true, predicate: ["itemElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                class=\"input-field e1tag-style1\"\r\n                #comboboxComponent\r\n                [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                [valueField]=\"itemValueField\"\r\n                [textField]=\"itemTextField\"\r\n                [formControlName]=\"data.Value\"\r\n                [valuePrimitive]=\"true\"\r\n                [placeholder]=\"data.PlaceHolder\"\r\n                [allowCustom]=\"allowCustomValue\"\r\n                [kendoDropDownFilter]=\"filterSettings\"\r\n                [suggest]=\"true\"\r\n                [filterable]=\"data.Filterable == false ? false : true\"\r\n                [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [ngClass]=\"data.Class\"\r\n                [loading]=\"isLoading\"\r\n                (valueChange)=\"onChange_desktop($event)\"\r\n                (filterChange)=\"handleFilter($event)\"\r\n                [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                (close)=\"handleClose($event)\"\r\n                (opened)=\"onComboOpened()\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"onMultiSelectOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (opened)=\"onMultiSelectOpened()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (close)=\"handleClose($event)\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (opened)=\"onDropDownListOpened()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$1.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$1.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i4.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }, { propertyName: "itemElement", first: true, predicate: ["itemElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                class=\"input-field e1tag-style1\"\r\n                #comboboxComponent\r\n                [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                [valueField]=\"itemValueField\"\r\n                [textField]=\"itemTextField\"\r\n                [formControlName]=\"data.Value\"\r\n                [valuePrimitive]=\"true\"\r\n                [placeholder]=\"data.PlaceHolder\"\r\n                [allowCustom]=\"allowCustomValue\"\r\n                [kendoDropDownFilter]=\"filterSettings\"\r\n                [suggest]=\"true\"\r\n                [filterable]=\"data.Filterable == false ? false : true\"\r\n                [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [ngClass]=\"data.Class\"\r\n                [loading]=\"isLoading\"\r\n                (valueChange)=\"onChange_desktop($event)\"\r\n                (filterChange)=\"handleFilter($event)\"\r\n                [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                (close)=\"handleClose($event)\"\r\n                (opened)=\"onComboOpened()\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"onMultiSelectOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (opened)=\"onMultiSelectOpened()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (close)=\"handleClose($event)\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (opened)=\"onDropDownListOpened()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$1.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$1.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$1.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$1.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$1.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$1.MultiSelectTreeSummaryTagDirective, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: ["kendoMultiSelectTreeSummaryTag"] }, { type: i6$1.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i4.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zselectmultiple", template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableCloseButtonTemplate>\r\n      <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n      <fa-icon [icon]=\"'times-circle'\" size=\"md\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\r\n      <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                class=\"input-field e1tag-style1\"\r\n                #comboboxComponent\r\n                [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                [valueField]=\"itemValueField\"\r\n                [textField]=\"itemTextField\"\r\n                [formControlName]=\"data.Value\"\r\n                [valuePrimitive]=\"true\"\r\n                [placeholder]=\"data.PlaceHolder\"\r\n                [allowCustom]=\"allowCustomValue\"\r\n                [kendoDropDownFilter]=\"filterSettings\"\r\n                [suggest]=\"true\"\r\n                [filterable]=\"data.Filterable == false ? false : true\"\r\n                [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                [ngClass]=\"data.Class\"\r\n                [loading]=\"isLoading\"\r\n                (valueChange)=\"onChange_desktop($event)\"\r\n                (filterChange)=\"handleFilter($event)\"\r\n                [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                (close)=\"handleClose($event)\"\r\n                (opened)=\"onComboOpened()\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                     [valueField]=\"itemValueField\"\r\n                     [textField]=\"itemTextField\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [valuePrimitive]=\"true\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [allowCustom]=\"allowCustomValue\"\r\n                     [filterable]=\"data.Filterable == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"onMultiSelectOpen($event)\"\r\n                     (close)=\"handleClose($event)\"\r\n                     (opened)=\"onMultiSelectOpened()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         [kendoMultiSelectTreeSummaryTag]=\"componentSettings.kendoMultiSelectTreeSummaryTag\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"getDataItems()\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"componentSettings.expandOnFilter\"\r\n                         [filterable]=\"data.Filterable == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (close)=\"handleClose($event)\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [(expandedKeys)]=\"expandedKeys\"\r\n                         [popupSettings]=\"componentSettings.popupSettings\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                  [valueField]=\"itemValueField\"\r\n                  [textField]=\"itemTextField\"\r\n                  [formControlName]=\"data.Value\"\r\n                  [valuePrimitive]=\"true\"\r\n                  [placeholder]=\"data.PlaceHolder\"\r\n                  [allowCustom]=\"allowCustomValue\"\r\n                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.Filterable == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (close)=\"handleClose($event)\"\r\n                  (opened)=\"onDropDownListOpened()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span #itemElement class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">\r\n        {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n      </span>\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-dropdownlist kendo-taglist.k-chip-list .k-chip-label,:host ::ng-deep kendo-multiselect kendo-taglist.k-chip-list .k-chip-label{white-space:normal;word-break:break-word}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}:host ::ng-deep kendo-dropdownlist{background:white}:host ::ng-deep kendo-dropdownlist>span.k-input-inner>.k-input-value-text{width:0px}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background: transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
@@ -8629,7 +8757,7 @@ class SfdatetimepickerComponent extends InputFieldBase {
     }
 }
 SfdatetimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngClass]=\"updateElementClasses()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [ngModel]=\"form.get(data.Value).value | dateParser : data\"\r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [showClearButton]=\"data.ClearButton\"\r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [style]=\"componentProperties.style.style1\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div>\r\n", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}.read-only-input{color:gray!important}.read-only-textbox{background:#f2f2f2!important}.editable-input{color:#000!important;opacity:.8}.editable-textbox{background:#fff!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
+SfdatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker", viewQueries: [{ propertyName: "sfdatetimepicker", first: true, predicate: ["sfdatetimepicker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngClass]=\"updateElementClasses()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [ngModel]=\"form.get(data.Value).value | dateParser : data\"\r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [showClearButton]=\"data.ClearButton\"\r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [style]=\"componentProperties.style.style1\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div>\r\n", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}.read-only-input{color:gray!important}.read-only-textbox{background:#f2f2f2!important}.editable-input{color:#000!important;opacity:.8}.editable-textbox{background:#fff!important}\n"], components: [{ type: i2$9.DateTimePickerComponent, selector: "ejs-datetimepicker", inputs: ["allowEdit", "calendarMode", "cssClass", "dayHeaderFormat", "depth", "enableMask", "enablePersistence", "enableRtl", "enabled", "firstDayOfWeek", "floatLabelType", "format", "htmlAttributes", "isMultiSelection", "keyConfigs", "locale", "maskPlaceholder", "max", "min", "openOnFocus", "placeholder", "readonly", "scrollTo", "serverTimezoneOffset", "showClearButton", "showTodayButton", "start", "step", "strictMode", "timeFormat", "value", "values", "weekNumber", "weekRule", "width", "zIndex"], outputs: ["blur", "change", "cleared", "close", "created", "destroyed", "focus", "navigated", "open", "renderDayCell", "valueChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "dateParser": DateParserFilter, "dateFormatKendo": DateKendoFormatParser }, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SfdatetimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-sfdatetimepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"zdate-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <div class=\"dateTimeDesktopContainer\" *ngIf=\"!isMobileScreen()\" [ngClass]=\"updateElementClasses()\">\r\n    <ejs-datetimepicker #sfdatetimepicker\r\n                        [ngModel]=\"form.get(data.Value).value | dateParser : data\"\r\n                        (change)=\"onChange($event)\"\r\n                        [min]=\"minDate\"\r\n                        [max]=\"maxDate\"\r\n                        [step]=\"interval\"\r\n                        [format]=\"data | dateFormatKendo\"\r\n                        [required]=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [showClearButton]=\"data.ClearButton\"\r\n                        [strictMode]=\"disableStrictMode\"\r\n                        cssClass=\"e-custom\"\r\n                        [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [style]=\"componentProperties.style.style1\">\r\n    </ejs-datetimepicker>\r\n  </div>\r\n</div>\r\n", styles: [".e-custom.e-input-group.e-control-wrapper input.e-input,.e-custom.e-input-focus input.e-input{font-size:var(--content-font-size);padding-left:8px}.e-custom.e-input-group.e-control-wrapper{border-radius:5px!important;border:.1px solid rgba(0,0,0,.3)!important}.e-custom.e-input-group.e-control-wrapper:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)!important}.e-custom.e-input-group.e-control-wrapper input.e-input:focus{padding-left:8px}.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):before,.e-custom.e-input-group:not(.e-float-icon-left):not(.e-float-input):after{background:transparent!important}.e-custom.e-input-group.e-error,.e-custom.e-input-group.e-control-wrapper.e-error,.e-custom.e-input-group.e-error:not(.e-float-icon-left),.e-custom.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left){border-color:#f31700!important}.e-custom.e-input-group.e-error.e-control-wrapper:focus-within{box-shadow:0 0 3px #f31700!important}.read-only-input{color:gray!important}.read-only-textbox{background:#f2f2f2!important}.editable-input{color:#000!important;opacity:.8}.editable-textbox{background:#fff!important}\n"] }]
@@ -9749,6 +9877,22 @@ class ZtexteditorComponent extends InputFieldBase {
         this.componentSettings = {
             iframe: true,
         };
+        this.symbolNormalizationSettings = {
+            Enabled: true,
+            NormalizeHtmlEntities: true,
+            NormalizeDash: true,
+            NormalizeQuotes: true,
+            NormalizeSpaces: true,
+            NormalizeEllipsis: true,
+            CustomReplacements: [],
+        };
+        this.pluginsCallback = (defaultPlugins) => {
+            var _a;
+            if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.EnterKeyBehavior) === 'paragraph') {
+                return defaultPlugins;
+            }
+            return [this.enterAsLineBreakPlugin(), ...defaultPlugins];
+        };
         this.isCompressModeOn = false;
         this.CloseEnlargeBtn = false;
         this.originalInlineStyle = '';
@@ -9762,6 +9906,7 @@ class ZtexteditorComponent extends InputFieldBase {
         // Backward-compatible default: when not provided, use explorer.
         this.data.ToolBarUploadImageMethod = this.data.ToolBarUploadImageMethod || 'explorer';
         this.setupPasteCleanupSettings();
+        this.setupSymbolNormalizationSettings();
         super.setupComponentSettings(this.componentSettings);
         super.focusOnDefault(this.focus.bind(this));
         // Safe cast to boolean.
@@ -9784,7 +9929,11 @@ class ZtexteditorComponent extends InputFieldBase {
                 return;
             }
             // Common Excel/plain-text issue: "&amp;" gets inserted literally causing "&amp;amp;" in HTML.
-            this.handleCommonSymbolTags(e);
+            const isHandled = this.handleCommonSymbolTags(e);
+            if (isHandled) {
+                return;
+            }
+            this.normalizePastedHtml(e);
             // Compress only if enabled and base64 images exist.
             yield this.handleImageCompression(e);
         });
@@ -9810,19 +9959,138 @@ class ZtexteditorComponent extends InputFieldBase {
         if (htmlHasImg || cleanedHasTags) {
             return false;
         }
-        // Plain-text paste: prevent Kendo from inserting encoded entities as literal text.
+        const normalized = this.normalizePastedText(plainText || cleanedHtml);
         e.preventDefault();
-        // Decode common entities once so user sees correct characters.
-        // This is intentionally limited to common entities to avoid unexpected transformations.
-        const normalized = (plainText || cleanedHtml)
-            .replaceAll('&amp;', '&')
-            .replaceAll('&lt;', '<')
-            .replaceAll('&gt;', '>')
-            .replaceAll('&quot;', '"')
-            .replaceAll('&#39;', "'");
-        editor.exec('insertText', { text: normalized });
+        this.insertPlainTextWithEditorLineBreaks(this.normalizeLineEndings(normalized));
         return true;
     }
+    normalizeLineEndings(value) {
+        return value.replace(/\r\n|\r/g, '\n');
+    }
+    insertPlainTextWithEditorLineBreaks(value) {
+        var _a;
+        const view = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.view;
+        if (!view) {
+            console.warn('[Ztexteditor] Editor view is not ready. Cannot insert pasted text.');
+            return;
+        }
+        const container = document.createElement('div');
+        container.innerHTML = this.plainTextToEditorHtml(value);
+        const slice = DOMParser$1.fromSchema(view.state.schema).parseSlice(container);
+        view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+    }
+    plainTextToEditorHtml(value) {
+        var _a;
+        const lines = value.split('\n');
+        if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.EnterKeyBehavior) === 'paragraph') {
+            return lines
+                .map(line => line.trim() ? `<p>${this.escapeHtml(line)}</p>` : '<p><br></p>')
+                .join('');
+        }
+        return `<p>${lines.map(line => this.escapeHtml(line)).join('<br>')}</p>`;
+    }
+    escapeHtml(value) {
+        return value
+            .replaceAll('&', '&amp;')
+            .replaceAll('<', '&lt;')
+            .replaceAll('>', '&gt;')
+            .replaceAll('"', '&quot;')
+            .replaceAll("'", '&#39;');
+    }
+    /** Normalize text nodes inside pasted HTML without touching tags, styles, links, or image attributes. */
+    normalizePastedHtml(e) {
+        var _a, _b;
+        if (!this.symbolNormalizationSettings.Enabled) {
+            return;
+        }
+        const cleaned = (_a = e.cleanedHtml) !== null && _a !== void 0 ? _a : '';
+        if (!cleaned) {
+            return;
+        }
+        let doc;
+        try {
+            doc = new DOMParser().parseFromString(cleaned, 'text/html');
+        }
+        catch (err) {
+            console.warn('[Ztexteditor] Failed to parse pasted HTML for symbol normalization. Paste will continue.', err);
+            return;
+        }
+        const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+        let node = walker.nextNode();
+        while (node) {
+            node.textContent = this.normalizePastedText((_b = node.textContent) !== null && _b !== void 0 ? _b : '');
+            node = walker.nextNode();
+        }
+        this.removeEmptyParagraphs(doc);
+        e.cleanedHtml = doc.body.innerHTML;
+    }
+    removeEmptyParagraphs(doc) {
+        const emptyParagraphs = Array.from(doc.body.querySelectorAll('p')).filter(paragraph => this.isEmptyParagraph(paragraph));
+        emptyParagraphs.forEach(paragraph => paragraph.remove());
+    }
+    isEmptyParagraph(paragraph) {
+        var _a;
+        const allowedEmptyNodes = Array.from(paragraph.childNodes).every(node => {
+            var _a;
+            if (node.nodeType === Node.TEXT_NODE) {
+                return !((_a = node.textContent) !== null && _a !== void 0 ? _a : '').trim();
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                return false;
+            }
+            const element = node;
+            return element.tagName.toLowerCase() === 'br';
+        });
+        return allowedEmptyNodes && !((_a = paragraph.textContent) !== null && _a !== void 0 ? _a : '').trim();
+    }
+    /** Normalize known paste symbol variants from Office/email content into stable display characters. */
+    normalizePastedText(value) {
+        if (!this.symbolNormalizationSettings.Enabled || !value) {
+            return value;
+        }
+        let normalized = value;
+        if (this.symbolNormalizationSettings.NormalizeHtmlEntities) {
+            normalized = normalized
+                .replaceAll('&amp;', '&')
+                .replaceAll('&lt;', '<')
+                .replaceAll('&gt;', '>')
+                .replaceAll('&quot;', '"')
+                .replaceAll('&#39;', "'");
+        }
+        if (this.symbolNormalizationSettings.NormalizeDash) {
+            normalized = normalized.replace(/[\u2010\u2011\u2012\u2013\u2014\u2212]/g, '-');
+        }
+        if (this.symbolNormalizationSettings.NormalizeQuotes) {
+            normalized = normalized
+                .replace(/[\u2018\u2019\u201A\u201B]/g, "'")
+                .replace(/[\u201C\u201D\u201E\u201F]/g, '"');
+        }
+        if (this.symbolNormalizationSettings.NormalizeSpaces) {
+            normalized = normalized.replace(/[\u00A0\u202F\u2007]/g, ' ');
+        }
+        if (this.symbolNormalizationSettings.NormalizeEllipsis) {
+            normalized = normalized.replace(/\u2026/g, '...');
+        }
+        return this.applyCustomSymbolReplacements(normalized);
+    }
+    applyCustomSymbolReplacements(value) {
+        return this.symbolNormalizationSettings.CustomReplacements.reduce((result, replacement) => {
+            var _a, _b;
+            if (!(replacement === null || replacement === void 0 ? void 0 : replacement.From)) {
+                return result;
+            }
+            try {
+                if (replacement.IsRegex) {
+                    return result.replace(new RegExp(replacement.From, replacement.Flags || 'g'), (_a = replacement.To) !== null && _a !== void 0 ? _a : '');
+                }
+                return result.replaceAll(replacement.From, (_b = replacement.To) !== null && _b !== void 0 ? _b : '');
+            }
+            catch (err) {
+                console.warn('[Ztexteditor] Invalid custom symbol replacement skipped.', { replacement, err });
+                return result;
+            }
+        }, value);
+    }
     /**
      * If compression is enabled and compress mode is ON, compress any pasted base64 images (data:image/*).
      * IMPORTANT: modifies e.cleanedHtml (what gets pasted), not editor.value.
@@ -9887,7 +10155,7 @@ class ZtexteditorComponent extends InputFieldBase {
     /**
      * Toggle compress mode via confirmation dialog.
      */
-    onOffCompressMode(event) {
+    onOffCompressMode() {
         const header = 'Confirmation';
         const actionText = this.isCompressModeOn ? 'disable' : 'enable';
         // Keep existing behavior: toggling resets content.
@@ -9910,21 +10178,30 @@ class ZtexteditorComponent extends InputFieldBase {
             }
             editor.value = '';
             this.isCompressModeOn = !this.isCompressModeOn;
-            // Update toolbar icon classes safely.
-            const buttonEl = this.getEventTargetElement(event);
-            if (!buttonEl) {
-                console.warn('[Ztexteditor] Unable to resolve toolbar button element from event.');
-            }
-            else {
-                buttonEl.classList.remove(this.compressionEnableIcon, this.compressionDisabledIcon);
-                buttonEl.classList.add(this.isCompressModeOn ? this.compressionDisabledIcon : this.compressionEnableIcon);
-            }
-            if (this.compress_btn) {
-                this.compress_btn.title = `${this.isCompressModeOn ? 'Disable' : 'Enable'} image compression`;
-            }
             this.toastService.show(`${this.isCompressModeOn ? 'Enable' : 'Disable'} image compression successfully.`, 'top', false, 2500, 'success');
         });
     }
+    get compressionToolbarIcon() {
+        return `k-i-image ${this.isCompressModeOn ? this.compressionDisabledIcon : this.compressionEnableIcon}`;
+    }
+    get compressionToolbarTitle() {
+        return `${this.isCompressModeOn ? 'Disable' : 'Enable'} image compression`;
+    }
+    enterAsLineBreakPlugin() {
+        return keymap({
+            'Shift-Enter': chainCommands(exitCode, splitBlock),
+            Enter: chainCommands(exitCode, (state, dispatch) => {
+                const hardBreak = state.schema.nodes.hard_break;
+                if (!hardBreak || !state.selection.$from.parent.inlineContent) {
+                    return false;
+                }
+                if (dispatch) {
+                    dispatch(state.tr.replaceSelectionWith(hardBreak.create()).scrollIntoView());
+                }
+                return true;
+            }),
+        });
+    }
     /** Focus editor if available. Returns true if focus succeeded. */
     focus() {
         if (this.editor) {
@@ -9940,10 +10217,10 @@ class ZtexteditorComponent extends InputFieldBase {
         }
         return iconName;
     }
-    /** Merge paste cleanup options from data.Options (string expression or object) into pasteCleanupSettings. */
+    /** Merge Kendo paste cleanup settings from PasteCleanupSettings, with data.Options kept as a legacy fallback. */
     setupPasteCleanupSettings() {
-        var _a;
-        const options = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Options;
+        var _a, _b, _c;
+        const options = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.PasteCleanupSettings) !== null && _b !== void 0 ? _b : (_c = this.data) === null || _c === void 0 ? void 0 : _c.Options;
         if (!options) {
             return;
         }
@@ -9953,7 +10230,7 @@ class ZtexteditorComponent extends InputFieldBase {
                 Object.assign(this.pasteCleanupSettings, resolved);
             }
             else {
-                console.warn('[Ztexteditor] data.Options resolved value is not an object. Paste cleanup settings unchanged.', {
+                console.warn('[Ztexteditor] Paste cleanup settings resolved value is not an object. Settings unchanged.', {
                     resolved,
                 });
             }
@@ -9963,10 +10240,45 @@ class ZtexteditorComponent extends InputFieldBase {
             Object.assign(this.pasteCleanupSettings, options);
             return;
         }
-        console.warn('[Ztexteditor] Unsupported data.Options type. Paste cleanup settings unchanged.', {
+        console.warn('[Ztexteditor] Unsupported paste cleanup settings type. Settings unchanged.', {
             type: typeof options,
         });
     }
+    /** Resolve optional paste symbol normalization settings from field config. */
+    setupSymbolNormalizationSettings() {
+        var _a;
+        const settings = (_a = this.data) === null || _a === void 0 ? void 0 : _a.SymbolNormalization;
+        if (settings === undefined || settings === null) {
+            return;
+        }
+        if (typeof settings === 'boolean') {
+            this.symbolNormalizationSettings.Enabled = settings;
+            return;
+        }
+        if (typeof settings === 'string') {
+            const resolved = ZComponentHelper.getGroupValue(settings, this.group);
+            this.mergeSymbolNormalizationSettings(resolved);
+            return;
+        }
+        this.mergeSymbolNormalizationSettings(settings);
+    }
+    mergeSymbolNormalizationSettings(settings) {
+        if (typeof settings === 'boolean') {
+            this.symbolNormalizationSettings.Enabled = settings;
+            return;
+        }
+        if (!settings || typeof settings !== 'object' || Array.isArray(settings)) {
+            console.warn('[Ztexteditor] SymbolNormalization resolved value is not a supported config. Settings unchanged.', {
+                settings,
+            });
+            return;
+        }
+        Object.assign(this.symbolNormalizationSettings, settings);
+        this.symbolNormalizationSettings.CustomReplacements =
+            Array.isArray(this.symbolNormalizationSettings.CustomReplacements)
+                ? this.symbolNormalizationSettings.CustomReplacements
+                : [];
+    }
     // #region Custom Image Upload / Enlarge
     /** Trigger hidden file input click for image upload. */
     openFileExplorer() {
@@ -10087,7 +10399,7 @@ class ZtexteditorComponent extends InputFieldBase {
     }
     /**
      * Compress an image file if it is an image and above min threshold.
-     * Returns the compressed file, or null if not compressible / compression skipped.
+     * Returns the original file when compression is skipped, and null only when compression fails.
      */
     imageCompression(file) {
         var _a;
@@ -10102,14 +10414,14 @@ class ZtexteditorComponent extends InputFieldBase {
             }
             const config = (_a = this.data) === null || _a === void 0 ? void 0 : _a.Compression;
             if (!config) {
-                // Compression not configured.
-                return null;
+                // Compression not configured; keep the original file.
+                return file;
             }
             const imgConfig = this.compressionConfigHandler(config);
-            // If file is below threshold, keep existing behavior: skip compression (return null).
+            // If file is below threshold, keep the original file.
             if (file.size <= imgConfig.FileSizeMinSizeByte) {
                 console.log(`[Ztexteditor] Skipping compression: file size ${(file.size / 1024).toFixed(2)}KB is below threshold ${(imgConfig.FileSizeMinSizeByte / 1024).toFixed(2)}KB.`);
-                return null;
+                return file;
             }
             try {
                 const compressed$ = this.compressImage.compress(file, imgConfig);
@@ -10194,25 +10506,15 @@ class ZtexteditorComponent extends InputFieldBase {
             reader.onerror = (error) => reject(error);
         });
     }
-    // #endregion
-    // #region Small helpers
-    /** Extract event target as HTMLElement safely. */
-    getEventTargetElement(event) {
-        const target = event === null || event === void 0 ? void 0 : event.target;
-        return target instanceof HTMLElement ? target : null;
-    }
 }
 ZtexteditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i6.DialogService }, { token: i2.AlertService }, { token: i2.CompressImageService }, { token: i2.ToastService }], target: i0.ɵɵFactoryTarget.Component });
-ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "compress_btn", first: true, predicate: ["compressButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"onOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"onOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6$2.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i7$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i7$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6$2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i6$2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i6$2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i6$2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i6$2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i6$2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i6$2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i6$2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i6$2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i6$2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i6$2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i6$2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i6$2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i6$2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i6$2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i6$2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i6$2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i6$2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i6$2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i6$2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i6$2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i6$2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i6$2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i6$2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i6$2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i6$2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i6$2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i6$2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i6$2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i6$2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i6$2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i6$2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i6$2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
+ZtexteditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtexteditorComponent, selector: "app-ztexteditor", viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [plugins]=\"pluginsCallback\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\" [icon]=\"compressionToolbarIcon\" (click)=\"onOffCompressMode()\" [title]=\"compressionToolbarTitle\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist 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 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-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-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\" [icon]=\"compressionToolbarIcon\" (click)=\"onOffCompressMode()\" [title]=\"compressionToolbarTitle\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"], components: [{ type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i6$2.EditorComponent, selector: "kendo-editor", inputs: ["value", "disabled", "readonly", "iframe", "applyToWord", "schema", "plugins", "placeholder", "preserveWhitespace", "pasteCleanupSettings", "resizable"], outputs: ["valueChange", "focus", "paste", "blur"] }, { type: i7$2.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "tabindex", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { type: i7$2.ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { type: i7$2.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { type: i6$2.EditorFormatComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFormat]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: ["data"], outputs: ["valueChange"] }, { type: i6$2.EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: ["value", "icon", "paletteSettings", "editorCommand", "disabled", "views", "view"] }, { type: i6$2.EditorInsertTableButtonComponent, selector: "kendo-editor-insert-table-button" }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.EditorUndoButtonDirective, selector: "kendo-toolbar-button[kendoEditorUndoButton]" }, { type: i6$2.EditorRedoButtonDirective, selector: "kendo-toolbar-button[kendoEditorRedoButton]" }, { type: i6$2.EditorBoldButtonDirective, selector: "kendo-toolbar-button[kendoEditorBoldButton]" }, { type: i6$2.EditorItalicButtonDirective, selector: "kendo-toolbar-button[kendoEditorItalicButton]" }, { type: i6$2.EditorUnderlineButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnderlineButton]" }, { type: i6$2.EditorStrikethroughButtonDirective, selector: "kendo-toolbar-button[kendoEditorStrikethroughButton]" }, { type: i6$2.EditorSubscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSubscriptButton]" }, { type: i6$2.EditorSuperscriptButtonDirective, selector: "kendo-toolbar-button[kendoEditorSuperscriptButton]" }, { type: i6$2.EditorAlignLeftButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignLeftButton]" }, { type: i6$2.EditorAlignCenterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignCenterButton]" }, { type: i6$2.EditorAlignRightButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignRightButton]" }, { type: i6$2.EditorAlignJustifyButtonDirective, selector: "kendo-toolbar-button[kendoEditorAlignJustifyButton]" }, { type: i6$2.EditorForeColorDirective, selector: "[kendoEditorForeColor]" }, { type: i6$2.EditorBackColorDirective, selector: "[kendoEditorBackColor]" }, { type: i6$2.EditorInsertUnorderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertUnorderedListButton]" }, { type: i6$2.EditorInsertOrderedListButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertOrderedListButton]" }, { type: i6$2.EditorIndentButtonDirective, selector: "kendo-toolbar-button[kendoEditorIndentButton]" }, { type: i6$2.EditorOutdentButtonDirective, selector: "kendo-toolbar-button[kendoEditorOutdentButton]" }, { type: i6$2.EditorCreateLinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorCreateLinkButton]" }, { type: i6$2.EditorUnlinkButtonDirective, selector: "kendo-toolbar-button[kendoEditorUnlinkButton]" }, { type: i6$2.EditorAddColumnBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnBeforeButton]" }, { type: i6$2.EditorAddColumnAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddColumnAfterButton]" }, { type: i6$2.EditorAddRowBeforeButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowBeforeButton]" }, { type: i6$2.EditorAddRowAfterButtonDirective, selector: "kendo-toolbar-button[kendoEditorAddRowAfterButton]" }, { type: i6$2.EditorDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteColumnButton]" }, { type: i6$2.EditorDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteRowButton]" }, { type: i6$2.EditorDeleteTableButtonDirective, selector: "kendo-toolbar-button[kendoEditorDeleteTableButton]" }, { type: i6$2.EditorInsertFileButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertFileButton]" }, { type: i6$2.EditorInsertImageButtonDirective, selector: "kendo-toolbar-button[kendoEditorInsertImageButton]" }, { type: i6$2.EditorViewSourceButtonDirective, selector: "kendo-toolbar-button[kendoEditorViewSourceButton]" }, { type: i6$2.EditorMergeCellsButtonDirective, selector: "kendo-toolbar-button[kendoEditorMergeCellsButton]" }, { type: i6$2.EditorSplitCellButtonDirective, selector: "kendo-toolbar-button[kendoEditorSplitCellButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtexteditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-ztexteditor', template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'basic' ? 'inherit' : 'none'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\"  icon=\"k-i-image k-i-zoom-actual-size\" (click)=\"onOffCompressMode($event)\" #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar [style.display]=\"data.ToolBarStyle === 'full' ? 'inherit' : 'none'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor view=\"gradient\"></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button  *ngIf=\"!!data.Compression\" icon=\"k-i-image k-i-file-image\" (click)=\"onOffCompressMode($event)\"  #compressButton title=\"Disable Image Compression\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorMergeCellsButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSplitCellButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"] }]
+            args: [{ selector: 'app-ztexteditor', template: "\r\n\r\n<div [formGroup]=\"form\" class=\"ztexteditor-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <div class=\"col-lg-12 expand-btn-container\">\r\n  <ion-button   class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.AllowEnlarge\" (click)=\"openPopup()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\" [icon]=\"getFontAwesome('faExpandAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n  <ion-button  class=\"ion-activatable ripple-parent\" [style]=\"componentProperties.style.style4\" *ngIf=\"CloseEnlargeBtn\" (click)=\"onPopupClose()\"  [id]=\"data.Value +'-popup-button'\">\r\n    <fa-icon class=\"btn-icon\"  [icon]=\"getFontAwesome('faCompressAlt', fontAweSomeService)\"></fa-icon>\r\n  </ion-button>\r\n</div>\r\n  <kendo-editor #editor\r\n                [id]=\"data.Value\"\r\n                [formControlName]=\"data.Value\"\r\n                class=\"e1tag-style1\"\r\n                [style]=\"componentProperties.style.style1\"\r\n                [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                (valueChange)=\"onChange($event)\"\r\n                [resizable]=\"data.Resizable || false\"\r\n                [plugins]=\"pluginsCallback\"\r\n                [pasteCleanupSettings]=\"pasteCleanupSettings\"\r\n                (paste)=\"onPaste($event)\"\r\n                [iframe]=\"componentSettings.iframe\">\r\n    <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'basic'\" class=\"e1tag-style2\"\r\n                   [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontSize></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>\r\n      <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-colorpicker kendoEditorBackColor></kendo-toolbar-colorpicker>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-editor-insert-table-button></kendo-editor-insert-table-button>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAddColumnBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddColumnAfterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowBeforeButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAddRowAfterButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorDeleteColumnButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteRowButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorDeleteTableButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\" [icon]=\"compressionToolbarIcon\" (click)=\"onOffCompressMode()\" [title]=\"compressionToolbarTitle\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n    <kendo-toolbar *ngIf=\"data.ToolBarStyle === 'full'\" class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorUndoButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorRedoButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorStrikethroughButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorSubscriptButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorSuperscriptButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-buttongroup>\r\n        <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\r\n        <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\r\n      </kendo-toolbar-buttongroup>\r\n      <kendo-toolbar-dropdownlist 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 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-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-button kendoEditorInsertFileButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'default'\" kendoEditorInsertImageButton></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"data.ToolBarUploadImageMethod == 'explorer'\" icon=\"k-i-image k-i-photo\" (click)=\"openFileExplorer()\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button *ngIf=\"!!data.Compression\" [icon]=\"compressionToolbarIcon\" (click)=\"onOffCompressMode()\" [title]=\"compressionToolbarTitle\"></kendo-toolbar-button>\r\n      <kendo-toolbar-button kendoEditorViewSourceButton></kendo-toolbar-button>\r\n    </kendo-toolbar>\r\n  </kendo-editor>\r\n  <input style=\"display:none;\" type=\"file\" [id]=\"data.Value +'-upload-file'\" [name]=\"data.Value +'-upload-file'\" accept=\"image/*\" ngf-max-size=\"5MB\" (change)=\"uploadImage($event)\">\r\n</div>\r\n", styles: [".title{margin:20px 10px 5px;font-size:18px;font-weight:700}.expand-btn-container{text-align:right}.expand-btn-container ion-button{--background: rgba(var(--ion-color-primary-rgb),10%);--color:black;font-size:12px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i6.DialogService }, { type: i2.AlertService }, { type: i2.CompressImageService }, { type: i2.ToastService }]; }, propDecorators: { editor: [{
                 type: ViewChild,
                 args: ['editor']
-            }], compress_btn: [{
-                type: ViewChild,
-                args: ['compressButton']
             }] } });
 
 /********** Angular **********/
@@ -10335,7 +10637,7 @@ class ZradiobuttonComponent extends InputFieldBase {
     }
 }
 ZradiobuttonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZradiobuttonComponent, deps: [{ token: ZComponentService }, { token: i0.ChangeDetectorRef }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-ZradiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZradiobuttonComponent, selector: "app-zradiobutton", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\"> \r\n  <div *ngFor=\"let option of radioButtonItems\" >\r\n        <!--for not readonly, onchange is allow -->\r\n        <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            kendoRadioButton  \r\n            type=\"radio\" \r\n            [id]=\"'radio-' + option.Value\" \r\n            [value]=\"option.Value\" \r\n            [formControlName]=\"data.Value\"\r\n            (change)=\"onChange($event,option.Value)\"\r\n            class=\"e1tag-style1\"\r\n            [style]=\"componentProperties.style.style1\"\r\n            [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          />\r\n          <!--for  readonly, onchange is remove -->\r\n          <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          kendoRadioButton  \r\n          type=\"radio\" \r\n          [id]=\"'radio-' + option.Value\" \r\n          [value]=\"option.Value\" \r\n          [formControlName]=\"data.Value\"\r\n          class=\"e1tag-style1\"\r\n          [style]=\"componentProperties.style.style1\"\r\n          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        />\r\n          <kendo-label \r\n          class=\"k-radio-label\" \r\n          [for]=\"'radio-' + option.Value\" \r\n          [text]=\"option.Label\">\r\n        </kendo-label>\r\n  </div>\r\n</div>", styles: [""], components: [{ type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$5.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { type: i4$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4$2.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: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+ZradiobuttonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZradiobuttonComponent, selector: "app-zradiobutton", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\"> \r\n  <div *ngFor=\"let option of radioButtonItems\" >\r\n        <!--for not readonly, onchange is allow -->\r\n        <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            kendoRadioButton  \r\n            type=\"radio\" \r\n            [id]=\"'radio-' + option.Value\" \r\n            [value]=\"option.Value\" \r\n            [formControlName]=\"data.Value\"\r\n            (change)=\"onChange($event,option.Value)\"\r\n            class=\"e1tag-style1\"\r\n            [style]=\"componentProperties.style.style1\"\r\n            [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          />\r\n          <!--for  readonly, onchange is remove -->\r\n          <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          kendoRadioButton  \r\n          type=\"radio\" \r\n          [id]=\"'radio-' + option.Value\" \r\n          [value]=\"option.Value\" \r\n          [formControlName]=\"data.Value\"\r\n          class=\"e1tag-style1\"\r\n          [style]=\"componentProperties.style.style1\"\r\n          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        />\r\n          <kendo-label \r\n          class=\"k-radio-label\" \r\n          [for]=\"'radio-' + option.Value\" \r\n          [text]=\"option.Label\">\r\n        </kendo-label>\r\n  </div>\r\n</div>", styles: [""], components: [{ type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$5.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { type: i4$2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4$2.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: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZradiobuttonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zradiobutton', template: "<div [formGroup]=\"form\" [ngClass]=\"getClass(form, data)\" [style]=\"componentProperties.style.style\"> \r\n  <div *ngFor=\"let option of radioButtonItems\" >\r\n        <!--for not readonly, onchange is allow -->\r\n        <input *ngIf=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n            kendoRadioButton  \r\n            type=\"radio\" \r\n            [id]=\"'radio-' + option.Value\" \r\n            [value]=\"option.Value\" \r\n            [formControlName]=\"data.Value\"\r\n            (change)=\"onChange($event,option.Value)\"\r\n            class=\"e1tag-style1\"\r\n            [style]=\"componentProperties.style.style1\"\r\n            [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          />\r\n          <!--for  readonly, onchange is remove -->\r\n          <input *ngIf=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n          kendoRadioButton  \r\n          type=\"radio\" \r\n          [id]=\"'radio-' + option.Value\" \r\n          [value]=\"option.Value\" \r\n          [formControlName]=\"data.Value\"\r\n          class=\"e1tag-style1\"\r\n          [style]=\"componentProperties.style.style1\"\r\n          [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n        />\r\n          <kendo-label \r\n          class=\"k-radio-label\" \r\n          [for]=\"'radio-' + option.Value\" \r\n          [text]=\"option.Label\">\r\n        </kendo-label>\r\n  </div>\r\n</div>", styles: [""] }]
@@ -10364,8 +10666,31 @@ class ZsliderComponent extends InputFieldBase {
         return this.data;
     }
     ngOnInit() {
+        var _a, _b;
         super.setupInnerField();
         this.setInitPropertyValue();
+        // Wrap setRequire to re-add min/max validators after the base resets all validators via setValidators()
+        const originalSetRequire = this.setRequire;
+        this.setRequire = (status) => {
+            originalSetRequire(status);
+            this.addMinAndMaxValidator();
+        };
+        // Initialize FormControl disabled state programmatically (avoids [disabled] Angular warning)
+        this._cachedReadOnlyState = this.getReadOnlyState();
+        if (this._cachedReadOnlyState) {
+            (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls[this.data.Value]) === null || _b === void 0 ? void 0 : _b.disable();
+        }
+    }
+    ngDoCheck() {
+        var _a;
+        const currentReadOnly = this.getReadOnlyState();
+        if (currentReadOnly !== this._cachedReadOnlyState) {
+            this._cachedReadOnlyState = currentReadOnly;
+            const fc = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls[this.data.Value];
+            if (fc) {
+                currentReadOnly ? fc.disable() : fc.enable();
+            }
+        }
     }
     ngOnDestroy() {
         this.removeMinAndMaxValidator();
@@ -10373,6 +10698,12 @@ class ZsliderComponent extends InputFieldBase {
     ngAfterViewInit() {
         this.componentService.decrementComponentCounterForField(this.data);
     }
+    getReadOnlyState() {
+        var _a, _b;
+        return !!((_a = this.componentProperties) === null || _a === void 0 ? void 0 : _a.isReadOnlyField)
+            ? !!this.group[this.componentProperties.isReadOnlyField]
+            : !!((_b = this.componentProperties) === null || _b === void 0 ? void 0 : _b.isReadOnly);
+    }
     setMinValue(newValue) {
         this.minValue = newValue;
         // mark this control as touched to trigger for validation
@@ -10426,35 +10757,51 @@ class ZsliderComponent extends InputFieldBase {
     }
     addMinAndMaxValidator() {
         var _a;
-        // Setup form validator for ionic components only (Kendo component will be auto setup)
-        if (this.isMobileScreen()) {
-            const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls[this.data.Value];
-            if (control) {
-                if (this.minValue != undefined) {
-                    this.minValidator = Validators.min(Number(this.minValue));
-                    control.addValidators(this.minValidator);
-                }
-                if (this.maxValue != undefined) {
-                    this.maxValidator = Validators.max(Number(this.maxValue));
-                    control.addValidators(this.maxValidator);
-                }
-                control.updateValueAndValidity();
+        const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls[this.data.Value];
+        if (control) {
+            // Remove existing references first to prevent duplicates on re-add (e.g. after setRequire resets validators)
+            if (this.minValidator) {
+                control.removeValidators(this.minValidator);
+            }
+            if (this.maxValidator) {
+                control.removeValidators(this.maxValidator);
+            }
+            if (this.minValue != undefined) {
+                const min = Number(this.minValue);
+                // Use minError key (not Angular's 'min') so getErrorMessageByErrorType produces the correct message
+                this.minValidator = (c) => {
+                    const v = c.value;
+                    if (v === null || v === undefined || v === '')
+                        return null;
+                    return Number(v) < min ? { minError: { minValue: min } } : null;
+                };
+                control.addValidators(this.minValidator);
+            }
+            if (this.maxValue != undefined) {
+                const max = Number(this.maxValue);
+                // Use maxError key (not Angular's 'max') so getErrorMessageByErrorType produces the correct message
+                this.maxValidator = (c) => {
+                    const v = c.value;
+                    if (v === null || v === undefined || v === '')
+                        return null;
+                    return Number(v) > max ? { maxError: { maxValue: max } } : null;
+                };
+                control.addValidators(this.maxValidator);
             }
+            control.updateValueAndValidity();
         }
     }
     removeMinAndMaxValidator() {
         var _a;
-        this.minValue = null;
-        this.maxValue = null;
+        this.minValue = undefined;
+        this.maxValue = undefined;
         const control = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls[this.data.Value];
         if (control) {
-            if (this.isMobileScreen()) {
-                if (control.hasValidator(this.minValidator)) {
-                    control.removeValidators(this.minValidator);
-                }
-                if (control.hasValidator(this.maxValidator)) {
-                    control.removeValidators(this.maxValidator);
-                }
+            if (control.hasValidator(this.minValidator)) {
+                control.removeValidators(this.minValidator);
+            }
+            if (control.hasValidator(this.maxValidator)) {
+                control.removeValidators(this.maxValidator);
             }
             control.updateValueAndValidity();
         }
@@ -10468,10 +10815,10 @@ class ZsliderComponent extends InputFieldBase {
     }
 }
 ZsliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZsliderComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZsliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZsliderComponent, selector: "app-zslider", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zslider-container e1tag-style\" [style]=\"componentProperties.style.style\"\r\n  [class.has-error-with-tick]=\"tickPlacement !== 'none' && hasError\">\r\n  <div style=\"display: flex;  width: 100%;\">\r\n    <kendo-slider #orientation [id]=\"data.Name\" [formControlName]=\"data.Value\" [vertical]=\"sliderData?.IsVertical\"\r\n      [min]=\"minValue\" [max]=\"maxValue\" [smallStep]=\"smallStep\" [largeStep]=\"largeStep\" [tickPlacement]=\"tickPlacement\"\r\n      [showButtons]=\"sliderData?.ShowButtons\"\r\n      [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties?.style?.style1\" class=\"e1tag-style1\">\r\n    </kendo-slider>&nbsp;\r\n\r\n    <kendo-numerictextbox [formControlName]=\"data.Value\" [min]=\"minValue\" [max]=\"maxValue\"\r\n      [spinners]=\"data.ShowSpinners\" [step]=\"data.StepValue\"\r\n      [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      (valueChange)=\"onChange(null, $event)\" style=\"width: 30%;\">\r\n    </kendo-numerictextbox>\r\n  </div>\r\n</div>", styles: [".has-error-with-tick{padding-bottom:25px}\n"], components: [{ type: i3$5.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+ZsliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZsliderComponent, selector: "app-zslider", inputs: { data: "data", group: "group", form: "form" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zslider-container e1tag-style\" [style]=\"componentProperties.style.style\"\r\n     [class.has-error-with-tick]=\"tickPlacement !== 'none' && hasError\">\r\n  <div style=\"display: flex;  width: 100%;\">\r\n    <kendo-slider #orientation [id]=\"data.Name\" [formControlName]=\"data.Value\" [vertical]=\"sliderData?.IsVertical\"\r\n                  [min]=\"minValue\" [max]=\"maxValue\" [smallStep]=\"smallStep\" [largeStep]=\"largeStep\" [tickPlacement]=\"tickPlacement\"\r\n                  [showButtons]=\"sliderData?.ShowButtons\"\r\n                  (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties?.style?.style1\" class=\"e1tag-style1\">\r\n    </kendo-slider>&nbsp;\r\n\r\n    <kendo-numerictextbox [formControlName]=\"data.Value\" [min]=\"minValue\" [max]=\"maxValue\"\r\n                          [spinners]=\"data.ShowSpinners\" [step]=\"data.StepValue\"\r\n                          (valueChange)=\"onChange(null, $event)\" style=\"width: 30%;\">\r\n    </kendo-numerictextbox>\r\n  </div>\r\n</div>\r\n", styles: [".has-error-with-tick{padding-bottom:25px}\n"], components: [{ type: i3$5.SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZsliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zslider', template: "<div [formGroup]=\"form\" class=\"zslider-container e1tag-style\" [style]=\"componentProperties.style.style\"\r\n  [class.has-error-with-tick]=\"tickPlacement !== 'none' && hasError\">\r\n  <div style=\"display: flex;  width: 100%;\">\r\n    <kendo-slider #orientation [id]=\"data.Name\" [formControlName]=\"data.Value\" [vertical]=\"sliderData?.IsVertical\"\r\n      [min]=\"minValue\" [max]=\"maxValue\" [smallStep]=\"smallStep\" [largeStep]=\"largeStep\" [tickPlacement]=\"tickPlacement\"\r\n      [showButtons]=\"sliderData?.ShowButtons\"\r\n      [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties?.style?.style1\" class=\"e1tag-style1\">\r\n    </kendo-slider>&nbsp;\r\n\r\n    <kendo-numerictextbox [formControlName]=\"data.Value\" [min]=\"minValue\" [max]=\"maxValue\"\r\n      [spinners]=\"data.ShowSpinners\" [step]=\"data.StepValue\"\r\n      [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n      (valueChange)=\"onChange(null, $event)\" style=\"width: 30%;\">\r\n    </kendo-numerictextbox>\r\n  </div>\r\n</div>", styles: [".has-error-with-tick{padding-bottom:25px}\n"] }]
+            args: [{ selector: 'app-zslider', template: "<div [formGroup]=\"form\" class=\"zslider-container e1tag-style\" [style]=\"componentProperties.style.style\"\r\n     [class.has-error-with-tick]=\"tickPlacement !== 'none' && hasError\">\r\n  <div style=\"display: flex;  width: 100%;\">\r\n    <kendo-slider #orientation [id]=\"data.Name\" [formControlName]=\"data.Value\" [vertical]=\"sliderData?.IsVertical\"\r\n                  [min]=\"minValue\" [max]=\"maxValue\" [smallStep]=\"smallStep\" [largeStep]=\"largeStep\" [tickPlacement]=\"tickPlacement\"\r\n                  [showButtons]=\"sliderData?.ShowButtons\"\r\n                  (valueChange)=\"onChange(null, $event)\" [style]=\"componentProperties?.style?.style1\" class=\"e1tag-style1\">\r\n    </kendo-slider>&nbsp;\r\n\r\n    <kendo-numerictextbox [formControlName]=\"data.Value\" [min]=\"minValue\" [max]=\"maxValue\"\r\n                          [spinners]=\"data.ShowSpinners\" [step]=\"data.StepValue\"\r\n                          (valueChange)=\"onChange(null, $event)\" style=\"width: 30%;\">\r\n    </kendo-numerictextbox>\r\n  </div>\r\n</div>\r\n", styles: [".has-error-with-tick{padding-bottom:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { data: [{
                 type: Input
             }], group: [{
@@ -10522,107 +10869,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
             args: [{ selector: "app-error", template: "<div class=\"inputfield-error-msg\" *ngIf=\"IsShow()\">\r\n  <div *ngFor=\"let errMsg of errMsgList\">\r\n    <span #warning class=\"k-icon k-i-warning validation_icon\"></span>\r\n    <ion-label>{{errMsg}}</ion-label>\r\n  </div>\r\n</div>\r\n", styles: [".inputfield-error-msg{margin-top:5px;font-size:calc(var(--content-font-size) - 1px);color:var(--ion-color-danger)}.inputfield-error-msg span{margin:0 4px 0 2px;font-size:calc(var(--content-font-size) + 1px);top:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.ComponentErrorHandlerService }, { type: i2.TranslationService }]; } });
 
-/********** Angular **********/
-class InputFieldAddOnsComponent extends InputFieldBase {
-    constructor(componentService, fontAweSomeService, translationService) {
-        super(componentService);
-        this.fontAweSomeService = fontAweSomeService;
-        this.translationService = translationService;
-    }
-    ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        if (this.addOn) {
-            this.position = this.position || 'top';
-            this.setupIconList();
-            this.setupButtonList();
-            this.setupTextList();
-            this.setupChipList();
-        }
-    }
-    setupIconList() {
-        // this.addOn.IconList = [{ Icon: "user", Click: null, Style: "color:blue;", ToolTipText: "text" }]; // For Testing
-        if (this.addOn.IconList) {
-            this.addOn.IconList = this.addOn.IconList.filter(x => x);
-            this.addOn.IconList.forEach((i) => {
-                if (!i.ToolTipText) {
-                    i.ToolTipText = "";
-                }
-                else if (i.ToolTipText.indexOf("group.") !== -1) {
-                    i.ToolTipText = ZComponentHelper.getGroupEvalValue.call(this, i.ToolTipText);
-                }
-                this.translationService.$translateText(i.ToolTipText, { elementName: this.group.fieldName, group: this.group }).subscribe();
-                // Default position top. right | bottom | top | left
-                i.Position = i.Position || "top";
-            });
-            this.translationService.$translateItemList(this.addOn.IconList, "ToolTipText", { elementName: this.group.fieldName, group: this.group }).subscribe();
-        }
-    }
-    setupButtonList() {
-        // this.addOn.ButtonList = [{ Text: 'test', Icon: 'user', Style: '', Click: null }];  // For Testing
-        if (this.addOn.ButtonList) {
-            this.addOn.ButtonList = this.addOn.ButtonList.filter(x => x);
-            this.addOn.ButtonList.forEach(button => {
-                const isUseCustomClass = button.Color ? false : true;
-                button['color'] = isUseCustomClass ? '' : (button.Color || 'primary');
-                button['fill'] = isUseCustomClass ? '' : (button.Fill || 'solid');
-                button['class'] = isUseCustomClass ? `${button.Class} useCustomClass` : button.Class;
-                button.Visible = ZComponentHelper.isNullUndefinedEmpty(button.Visible) ? 'true' : button.Visible;
-            });
-            this.translationService.$translateItemList(this.addOn.ButtonList, "Text", { elementName: this.group.fieldName, group: this.group }).subscribe();
-        }
-    }
-    setupTextList() {
-        // this.addOn.TextList = [{ Text: 'test', Style: '', TooltipText: 'test' }];  // For Testing
-        if (this.addOn.TextList) {
-            this.addOn.TextList = this.addOn.TextList.filter(x => x);
-            this.addOn.TextList.forEach((i) => {
-                if (!i.ToolTipText) {
-                    i.ToolTipText = "";
-                }
-                else if (i.ToolTipText.indexOf("group.") !== -1) {
-                    i.ToolTipText = ZComponentHelper.getGroupEvalValue.call(this, i.ToolTipText);
-                }
-                // Default position top. right | bottom | top | left
-                i.Position = i.Position || "top";
-            });
-            this.translationService.$translateItemList(this.addOn.TextList, "Text", { elementName: this.group.fieldName, group: this.group }).subscribe();
-            this.translationService.$translateItemList(this.addOn.TextList, "ToolTipText", { elementName: this.group.fieldName, group: this.group }).subscribe();
-        }
-    }
-    setupChipList() {
-        if (this.addOn.ChipList) {
-            this.addOn.ChipList = this.addOn.ChipList.filter(x => x);
-            this.translationService.$translateItemList(this.addOn.ChipList, "Label", { elementName: this.group.fieldName, group: this.group }).subscribe();
-        }
-    }
-    onRemoveChip(chip) {
-        if (this.addOn.ChipList) {
-            const index = this.addOn.ChipList.indexOf(chip);
-            if (index > -1) {
-                this.addOn.ChipList.splice(index, 1);
-            }
-        }
-    }
-    onChipSelectionChange(selectedChipIndexes) {
-        if (this.addOn.ChipList) {
-            this.addOn.ChipList.forEach((chip, i) => {
-                chip.Selected = Array.isArray(selectedChipIndexes) ? selectedChipIndexes.includes(i) : selectedChipIndexes === i;
-            });
-        }
-    }
-}
-InputFieldAddOnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-InputFieldAddOnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: { position: "position", addOn: "addOn" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n  <div class=\"addons-chips\" *ngIf=\"addOn.ChipList && addOn.ChipList.length > 0\">\r\n    <kendo-chip-list [selection]=\"data && data['Multiple'] ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"onChipSelectionChange($event)\">\r\n      <kendo-chip *ngFor=\"let chip of addOn.ChipList\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable && !chip.ReadOnly\"\r\n        [style]=\"chip.Style\" \r\n        [style.pointer-events]=\"chip.ReadOnly ? 'none' : 'auto'\"\r\n        (contentClick)=\"onIconClick(chip.Click)\" (remove)=\"onRemoveChip(chip)\">\r\n        <div class=\"e1-chip-content-container\" style=\"display: flex; align-items: center; gap: 5px;\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\"></div>\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top{margin-bottom:5px}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.bottom{margin-top:5px}.addons-container.left{margin-right:5px}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container.right{margin-left:5px}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"], components: [{ type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i3$3.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i3$3.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: InputFieldAddOnsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "app-input-field-addons", template: "<div [class]=\"'addons-container ' + position\" *ngIf=\"addOn\">\r\n  <div class=\"addons-icon\" *ngIf=\"addOn.IconList && addOn.IconList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.IconList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          <fa-icon [icon]=\"item.Icon\">\r\n          </fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-text\" *ngIf=\"addOn.TextList && addOn.TextList.length > 0\">\r\n    <div *ngFor=\"let item of addOn.TextList\">\r\n      <div kendoTooltip class=\"icon-button\" showOn=\"hover\" [tooltipWidth]=\"item.Width\" [position]=\"item.Position\">\r\n        <span (click)=\"onIconClick(item.Click)\" [title]=\"item.ToolTipText\" [style]=\"item.Style\" [class.clickable]=\"!!item.Click\">\r\n          {{item.Text}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"addons-buttons\" *ngIf=\"addOn.ButtonList && addOn.ButtonList.length > 0\">\r\n    <ion-button *ngFor=\"let button of addOn.ButtonList; let i = button\" [fill]=\"button.fill\" [ngClass]=\"button.class\"\r\n      [color]=\"button.color\" [size]=\"button.Size || 'small'\" strong=\"false\" (click)=\"onIconClick(button.Click)\"\r\n      [hidden]=\"!button.Visible\" [disabled]=\"group.isTriggered || button.Disabled\" [style]=\"button.Style\">\r\n      <fa-icon *ngIf=\"button.Icon\" [icon]=\"getFontAwesome(button.Icon, fontAweSomeService)\"\r\n        [style.padding-right]=\"button.Text ? '5px' : '0px'\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.Text }}</span>\r\n    </ion-button>\r\n  </div>\r\n  <div class=\"addons-chips\" *ngIf=\"addOn.ChipList && addOn.ChipList.length > 0\">\r\n    <kendo-chip-list [selection]=\"data && data['Multiple'] ? 'multiple' : 'single'\"\r\n      (selectedChange)=\"onChipSelectionChange($event)\">\r\n      <kendo-chip *ngFor=\"let chip of addOn.ChipList\" [selected]=\"chip.Selected\" [ngClass]=\"chip.Class\"\r\n        [removable]=\"chip.Removable && !chip.ReadOnly\"\r\n        [style]=\"chip.Style\" \r\n        [style.pointer-events]=\"chip.ReadOnly ? 'none' : 'auto'\"\r\n        (contentClick)=\"onIconClick(chip.Click)\" (remove)=\"onRemoveChip(chip)\">\r\n        <div class=\"e1-chip-content-container\" style=\"display: flex; align-items: center; gap: 5px;\">\r\n          <div *ngIf=\"chip.Label\" [innerHTML]=\"chip.Label | htmlSanitize\"></div>\r\n          <fa-icon *ngIf=\"chip.Icon\" [icon]=\"getFontAwesome(chip.Icon, fontAweSomeService)\"></fa-icon>\r\n        </div>\r\n      </kendo-chip>\r\n    </kendo-chip-list>\r\n  </div>\r\n</div>\r\n", styles: [".addons-container{display:flex}.addons-container .addons-icon{display:flex;flex-direction:row}.addons-container .addons-icon fa-icon{padding:4px 6px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-buttons>ion-button{margin:0 0 0 5px;font-size:calc(var(--content-font-size) - 2px)}.addons-container .addons-text{padding-left:6px;padding-top:3px;font-size:calc(var(--content-font-size) - 2px)}.addons-container.top{margin-bottom:5px}.addons-container.top .addons-buttons>ion-button{top:-3px;position:relative}.addons-container.bottom{margin-top:5px}.addons-container.left{margin-right:5px}.addons-container.left .addons-buttons>ion-button{margin:0 5px 0 0}.addons-container.right{margin-left:5px}.addons-container span.clickable{cursor:pointer}.addons-buttons ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}.addons-buttons ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}.addons-buttons ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}.addons-buttons ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}.addons-buttons ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}.addons-buttons ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}.addons-buttons ion-button.no-shadow{--box-shadow: none}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.TranslationService }]; }, propDecorators: { position: [{
-                type: Input
-            }], addOn: [{
-                type: Input
-            }] } });
-
 /********** Angular **********/
 class ZInputContainerComponent extends FieldBase {
     constructor(componentService) {
@@ -10677,7 +10923,7 @@ class ZInputContainerComponent extends FieldBase {
     }
 }
 ZInputContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputContainerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n\r\n    <!-- Structural Fix: Moved addon-top here from inside the main field label so it stacks correctly above the input controls and readonly label, rather than pushing the label text sideways. -->\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n\r\n    <!-- Structural Fix: Expanded input-value-field to wrap BOTH the edit-mode inputs (*ngIf=\"EditMode\") and the readonly label (*ngIf=\"!EditMode\"). This ensures addon-left and addon-right are displayed in both states instead of disappearing when readonly. -->\r\n    <div class=\"input-value-field e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\"\r\n      style=\"align-items: center;\">\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div *ngIf=\"data['_EditMode'].value\" class=\"input-fields-options e1tag-container-style4\"\r\n        [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime> \r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\" \r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n\r\n      <!-- Structural Fix: Moved the readonly kendo-label inside the flex-wrapped input-value-field to keep it sandwiched between addon-left and addon-right when in readonly mode. -->\r\n      <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\" style=\"flex-grow: 10; margin-top: 0;\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px;height:15px;position:relative;top:-1px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:calc(var(--content-font-size) - 1px);display:flex;padding-left:20px}.desktop-input-container.editMode>.input-label{font-size:var(--content-font-size)}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:500;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.medium-padding.desktop-input-container .input-label{padding-left:10px}.medium-padding.desktop-input-container.style2 .input-value-container{padding:0 10px}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: ZtextComponent, selector: "app-ztext" }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: ZdatetimeComponent, selector: "app-zdatetime" }, { type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker" }, { type: ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: ZcheckboxComponent, selector: "app-zcheckbox" }, { type: ZnumericComponent, selector: "app-znumeric" }, { type: ZtextareaComponent, selector: "app-ztextarea" }, { type: ZuploadComponent, selector: "app-zupload" }, { type: ZimgComponent, selector: "app-zimg" }, { type: ZtexteditorComponent, selector: "app-ztexteditor" }, { type: ZcolorpickerComponent, selector: "app-zcolorpicker" }, { type: ZradiobuttonComponent, selector: "app-zradiobutton", inputs: ["data", "group", "form"] }, { type: ZsliderComponent, selector: "app-zslider", inputs: ["data", "group", "form"] }, { type: InputErrorMessageComponent, selector: "app-error" }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i4.AsyncPipe, "inputText": ZInputParser } });
+ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n\r\n    <!-- Structural Fix: Moved addon-top here from inside the main field label so it stacks correctly above the input controls and readonly label, rather than pushing the label text sideways. -->\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n\r\n    <!-- Structural Fix: Expanded input-value-field to wrap BOTH the edit-mode inputs (*ngIf=\"EditMode\") and the readonly label (*ngIf=\"!EditMode\"). This ensures addon-left and addon-right are displayed in both states instead of disappearing when readonly. -->\r\n    <div class=\"input-value-field e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\"\r\n      style=\"align-items: center;\">\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div *ngIf=\"data['_EditMode'].value\" class=\"input-fields-options e1tag-container-style4\"\r\n        [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime> \r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\" \r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n\r\n      <!-- Structural Fix: Moved the readonly kendo-label inside the flex-wrapped input-value-field to keep it sandwiched between addon-left and addon-right when in readonly mode. -->\r\n      <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\" style=\"flex-grow: 10; margin-top: 0;\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px;height:15px;position:relative;top:-1px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:calc(var(--content-font-size) - 1px);display:flex;padding-left:20px}.desktop-input-container.editMode>.input-label{font-size:var(--content-font-size)}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:500;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.medium-padding.desktop-input-container .input-label{padding-left:10px}.medium-padding.desktop-input-container.style2 .input-value-container{padding:0 10px}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: ZtextComponent, selector: "app-ztext" }, { type: ZselectmultipleComponent, selector: "app-zselectmultiple" }, { type: ZdatetimeComponent, selector: "app-zdatetime" }, { type: SfdatetimepickerComponent, selector: "app-sfdatetimepicker" }, { type: ZpostselectinputComponent, selector: "app-zpostselectinput" }, { type: ZcheckboxComponent, selector: "app-zcheckbox" }, { type: ZnumericComponent, selector: "app-znumeric" }, { type: ZtextareaComponent, selector: "app-ztextarea" }, { type: ZuploadComponent, selector: "app-zupload" }, { type: ZimgComponent, selector: "app-zimg" }, { type: ZtexteditorComponent, selector: "app-ztexteditor" }, { type: ZcolorpickerComponent, selector: "app-zcolorpicker" }, { type: ZradiobuttonComponent, selector: "app-zradiobutton", inputs: ["data", "group", "form"] }, { type: ZsliderComponent, selector: "app-zslider", inputs: ["data", "group", "form"] }, { type: InputErrorMessageComponent, selector: "app-error" }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i4.AsyncPipe, "inputText": ZInputParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZInputContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zinput-container", template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n            *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n            [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n    <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n               *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n               [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n               [style]=\"componentProperties.containerStyle.style2\">\r\n      {{componentProperties.label}}\r\n      <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                color=\"danger\" class=\"required-icon\">*</ion-text>\r\n    </ion-label>\r\n    <div class=\"input-value-field\">\r\n      <div class=\"input-fields-options\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime>\r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n      <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n      <!-- <app-field-suffix-element [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\"></app-field-suffix-element> -->\r\n    </div>\r\n  </ion-item>\r\n</div>\r\n\r\n<div class=\"desktop-input-container e1tag-container-style\" [formGroup]=\"form\"\r\n     [style]=\"componentProperties.containerStyle.style\"\r\n     *ngIf=\"!isMobileScreen() && !isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"getClass(form, data)\" [fxLayout]=\"data.FieldLayoutType !== 1 ? 'column' : 'row'\"\r\n     fxLayoutAlign=\"space-between stretch\" [class.editMode]=\"(data['_EditMode'].value)\"\r\n     #zinputcontainer>\r\n  <kendo-label class=\"input-label e1tag-container-style1\" [for]=\"data.Name\" [text]=\"componentProperties.label\"\r\n               *ngIf=\"data.ShowLabel\" [style]=\"componentProperties.containerStyle.style1\"\r\n               [fxFlex]=\"componentProperties.labelFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.labelFlexLayoutSize.xs\"\r\n               [fxFlex.sm]=\"componentProperties.labelFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.labelFlexLayoutSize.md\"\r\n               [fxFlex.lg]=\"componentProperties.labelFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.labelFlexLayoutSize.xl\">\r\n    <kendo-label *ngIf=\"data['_EditMode'].value && (!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n                 text=\"*\" class=\"required-icon\">\r\n    </kendo-label>\r\n  </kendo-label>\r\n  <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n       [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n       [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n       [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n\r\n    <!-- Structural Fix: Moved addon-top here from inside the main field label so it stacks correctly above the input controls and readonly label, rather than pushing the label text sideways. -->\r\n    <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n                            [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n\r\n    <!-- Structural Fix: Expanded input-value-field to wrap BOTH the edit-mode inputs (*ngIf=\"EditMode\") and the readonly label (*ngIf=\"!EditMode\"). This ensures addon-left and addon-right are displayed in both states instead of disappearing when readonly. -->\r\n    <div class=\"input-value-field e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\"\r\n      style=\"align-items: center;\">\r\n      <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n                              [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n      <div *ngIf=\"data['_EditMode'].value\" class=\"input-fields-options e1tag-container-style4\"\r\n        [style]=\"componentProperties.containerStyle.style4\">\r\n        <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztext>\r\n        <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                             [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                             [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zselectmultiple>\r\n        <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zdatetime> \r\n        <app-sfdatetimepicker *ngIf=\"sfdatetimepicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-sfdatetimepicker>\r\n        <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n                              [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n                              class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n                              (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zpostselectinput>\r\n        <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcheckbox>\r\n        <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                      [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                      [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-znumeric>\r\n        <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                       [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                       [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztextarea>\r\n        <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                     [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                     [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zupload>\r\n        <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                  [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                  [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zimg>\r\n        <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                         [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                         [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-ztexteditor>\r\n        <app-zcolorpicker *ngIf=\"zcolorpicker_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n                   [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n                   [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zcolorpicker>\r\n        <app-zradiobutton *ngIf=\"zradiobutton_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\" \r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zradiobutton>\r\n        <app-zslider *ngIf=\"zslider_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n          [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n          [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n        </app-zslider>\r\n      </div>\r\n\r\n      <!-- Structural Fix: Moved the readonly kendo-label inside the flex-wrapped input-value-field to keep it sandwiched between addon-left and addon-right when in readonly mode. -->\r\n      <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n                 [style]=\"componentProperties.containerStyle.style6\" style=\"flex-grow: 10; margin-top: 0;\"\r\n                 [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n\r\n      <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n                              [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                              [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n      </app-input-field-addons>\r\n    </div>\r\n    <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n                            [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n                            [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n    </app-input-field-addons>\r\n    <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zinputcontainer\"></app-context-menu>\r\n</div>\r\n", styles: [".required-icon{color:var(--ion-color-danger);padding-left:3px;height:15px;position:relative;top:-1px}.desktop-input-container{padding:8px 0;min-height:calc(var(--input-field-height) + 5px)!important;margin:1px 0;display:inline-flex}.desktop-input-container .input-label{font-size:calc(var(--content-font-size) - 1px);display:flex;padding-left:20px}.desktop-input-container.editMode>.input-label{font-size:var(--content-font-size)}.desktop-input-container>.input-value-container{margin:auto}.desktop-input-container>.input-value-container .input-value-field{display:flex}.desktop-input-container>.input-value-container .input-value-field .input-fields-options{flex-grow:10}.desktop-input-container>.input-value-container .input-value-field app-field-suffix-icon{margin:auto}.desktop-input-container>.input-value-container .input-value{font-size:calc(var(--content-font-size) + 2px);font-weight:500;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.medium-padding.desktop-input-container .input-label{padding-left:10px}.medium-padding.desktop-input-container.style2 .input-value-container{padding:0 10px}.mobile-input-container .input-value-field{width:100%}.tooltipsinfo-icon{padding-left:10px;color:var(--ion-color-primary-tint)}\n"] }]
@@ -11850,7 +12096,7 @@ class ZgridComponent extends DataListingFieldBase {
     ;
 }
 ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i4$2.FormBuilder }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }, { token: ZGridService }, { token: i2.StateSettingService }, { token: i2.ResourceApiService }, { token: i2.AuthService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n  <!-- Tooltip Template -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ truncateText(anchor.nativeElement.innerText) }}</span>\r\n  </ng-template>\r\n\r\n  <!-- Popover Component -->\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\"\r\n           class=\"popoverbody\"\r\n           *ngIf=\"data && data.Body\"\r\n           [innerHTML]=\"data.Body | htmlSanitize\"\r\n           [ngClass]=\"data.BodyClass\"\r\n           (mouseleave)=\"closePopOver.call(this, $event)\">\r\n      </div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <!-- Main Grid Container -->\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       [style]=\"componentProperties.style.style1\"\r\n       class=\"e1tag-style1\">\r\n\r\n    <div kendoPopoverContainer\r\n         [popover]=\"gridPopOver\"\r\n         filter=\"div.gridCell.withPopoverInGrid\"\r\n         showOn=\"none\"\r\n         kendoPopoverContainer\r\n         #popovercontainer=\"kendoPopoverContainer\">\r\n\r\n      <!-- Kendo Grid -->\r\n      <kendo-grid [zgridbinding]=\"{\r\n          data: data,\r\n          group: group,\r\n          params: params,\r\n          gridSubject: gridSubject,\r\n          gridSetting: gridSetting\r\n        }\"\r\n                  [ngClass]=\"data.Class\"\r\n                  class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true, mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\"\r\n                  (detailExpand)=\"detailExpand($event)\" \r\n                  (detailCollapse)=\"detailCollapse($event)\"\r\n                  (group)=\"gridSetting.gridState.group\"\r\n                  [groupable]=\"data.GroupSetting?.EnableGrouping\"\r\n                  (groupChange)=\"groupChange($event)\">\r\n\r\n        <!-- Toolbar Template -->\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton ||\r\n                          data.AllowExport ||\r\n                          data.CacheInfo?.EnableSaveState ||\r\n                          data.Title ||\r\n                          data.GridButtonFieldName_WF ||\r\n                          data.GridButtonFieldName ||\r\n                          data.EnableGridCommand ||\r\n                          data.EnableCustomAddCommand ||\r\n                          data.EnableCustomResetCommand\">\r\n\r\n          <!-- Left Toolbar Items -->\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n\r\n            <button title=\"Refresh\"\r\n                    type=\"button\"\r\n                    class=\"left-buttons refresh-button\"\r\n                    kendoButton\r\n                    (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n\r\n            <div class=\"toolbar-left-item-second-container\"\r\n                 *ngIf=\"data.AllowExport\"\r\n                 [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\"\r\n                      class=\"left-buttons export-button\"\r\n                      kendoGridExcelCommand\r\n                      *ngIf=\"data.AllowExport\">\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">\r\n                  {{ getToolBarItemLabelName('Download as Excel') }}\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Toolbar Items -->\r\n          <div class=\"toolbar-right-item\"\r\n               *ngIf=\"gridBtn ||\r\n                     data.CacheInfo?.EnableSaveState ||\r\n                     gridDefaultStateExist ||\r\n                     data.EnableGridCommand ||\r\n                     data.EnableCustomAddCommand ||\r\n                     data.EnableCustomResetCommand\">\r\n\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\"\r\n                                  [data]=\"gridBtn\"\r\n                                  [group]=\"group\"\r\n                                  [form]=\"form\">\r\n            </app-zworkflowbuttons>\r\n\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\"\r\n                          [data]=\"gridBtn\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\">\r\n            </app-zbuttons>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"saveGridSettings($event)\"\r\n                    *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>\r\n              {{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"restoreGridSettings($event)\"\r\n                    *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>\r\n              {{ getToolBarItemLabelName('Reset to Default') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoGridAddCommand\r\n                    *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>\r\n              {{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName : 'Add') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomAddCommand(group)\"\r\n                    *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>\r\n              {{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName : 'Add') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomResetCommand(group)\"\r\n                    *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>\r\n              {{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName : 'Reset') }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Filter Container -->\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\"\r\n                         [group]=\"filterGroup\"\r\n                         [fieldName]=\"data.GridFilterBarField\">\r\n              </app-zform>\r\n\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            color=\"primary\"\r\n                            (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">\r\n                    {{ getToolBarItemLabelName('Search') }}\r\n                  </span>\r\n                </ion-button>\r\n\r\n                <ion-button fill=\"outline\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            color=\"primary\"\r\n                            (click)=\"cancelEdit()\"\r\n                            *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n\r\n                <ion-button fill=\"solid\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\"\r\n                            (click)=\"advancedSearch()\"\r\n                            *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Advanced Filter -->\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\"\r\n                       class=\"to-preload-the-fields\"\r\n                       [group]=\"advfilterGroup\"\r\n                       [fieldName]=\"data.GridAdvFilterBarField\"\r\n                       style=\"display:none;\">\r\n            </app-zform>\r\n\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>{{ getToolBarItemLabelName('Advanced Search') }}</span>\r\n              </div>\r\n\r\n              <app-zform class=\"advfilter-fields\"\r\n                         [group]=\"advfilterGroup\"\r\n                         [fieldName]=\"data.GridAdvFilterBarField\">\r\n              </app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Checkbox Column -->\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\"\r\n                                    [width]=\"40\"\r\n                                    showSelectAll=\"true\"\r\n                                    [columnMenu]=\"true\"\r\n                                    [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n\r\n        <!-- Dynamic Columns -->\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\"\r\n                           class=\"e1tag-style3\"\r\n                           *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]=\"getGridHeaderStyle()\"\r\n                           headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\"\r\n                           footerClass=\"e1tag-style9\"\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                           [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [includeInChooser]=\"col.includeInChooser\"\r\n                           [editor]=\"col.editorType\">\r\n\r\n          <!-- Filter Templates -->\r\n          <div [ngSwitch]=\"true\">\r\n            <!-- Numeric Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType === 'number' ||\r\n                              col.fieldType === 'currency' ||\r\n                              col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                                [column]=\"column\"\r\n                                                [filter]=\"filter\"\r\n                                                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\r\n            <!-- Date Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate' ||\r\n                              col.fieldType === 'ztime' ||\r\n                              col.fieldType === 'zdatetime' ||\r\n                              col.fieldType === 'zuidatetime'\">\r\n              <!-- Date Range Filter -->\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                          class=\"date-range-filter\"\r\n                                          [filter]=\"filter\"\r\n                                          [field]=\"col.field\"\r\n                                          [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n\r\n              <!-- Regular Date Filter -->\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                               [column]=\"column\"\r\n                                               [filter]=\"filter\"\r\n                                               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\r\n            <!-- Boolean Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\"\r\n                                                [filter]=\"filter\"\r\n                                                operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <!-- Default String Filter -->\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                               [column]=\"column\"\r\n                                               [filter]=\"filter\"\r\n                                               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\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate\r\n                       *ngIf=\"data.EnableGridCommand\"\r\n                       let-dataItem=\"dataItem\"\r\n                       let-column=\"col\"\r\n                       let-formGroup=\"formGroup\"\r\n                       let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <!-- Number Editor -->\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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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\r\n              <!-- Default Text Editor -->\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;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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\r\n          <!-- Cell Templates -->\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <!-- Regular Cell Display -->\r\n            <div style=\"margin: 1px 0;\"\r\n                 *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getClass(dataItem, col)\"\r\n                 [style]=\"getCellStyle(col, dataItem)\"\r\n                 [attr.data-id]=\"dataItem.Id\"\r\n                 [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\"\r\n                 (mouseleave)=\"closePopOver($event)\">\r\n\r\n              <!-- Date Cell -->\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n\r\n              <!-- Time Cell -->\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n\r\n              <!-- Short Date Cell -->\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n\r\n              <!-- DateTime Cell -->\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <!-- UI DateTime Cell -->\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <!-- Number Cell -->\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n\r\n              <!-- Currency Cell -->\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n\r\n              <!-- Numeric Cell -->\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n\r\n              <!-- URL Cell -->\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n\r\n              <!-- Default Cell -->\r\n              <span *ngSwitchDefault>\r\n                <!-- Icon Display -->\r\n                <div style=\"margin: 5px 0;\"\r\n                     *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n\r\n                <!-- Text Display with Conditional Styling -->\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- Inline Editable Cell -->\r\n            <div style=\"margin: 5px 0;\"\r\n                 *ngIf=\"col.isEditableInGrid === true &&\r\n                      isInlineFormGroupHasValue() &&\r\n                      !isInlineEditInputFieldLoading &&\r\n                      !col.gridCellReplaceValue\"\r\n                 [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\"\r\n                 class=\"e1tag-style5\"\r\n                 [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\"\r\n                                    [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\"\r\n                                    [containerField]=\"containerField\"\r\n                                    [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n\r\n            <!-- Clickable Icons -->\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\"\r\n                    *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n                        ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n                        : true;\r\n                      else disabledButton\"\r\n                    (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}}\r\n                <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\"></fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton></ng-template>\r\n            </span>\r\n          </ng-template>\r\n\r\n          <!-- Footer Template -->\r\n          <ng-template kendoGridFooterTemplate\r\n                       let-column\r\n                       let-columnIndex=\"columnIndex\"\r\n                       *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\"\r\n                 [ngSwitch]=\"col.fieldType\"\r\n                 [style]=\"componentProperties.style.style7\"\r\n                 class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n\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\r\n        <!-- Command Column -->\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\"\r\n                                   width=\"180\"\r\n                                   [columnMenu]=\"false\"\r\n                                   [style]=\"componentProperties.style.style8\"\r\n                                   class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n\r\n        <!-- Custom Remove Command Column -->\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\"\r\n                                   width=\"180\"\r\n                                   [columnMenu]=\"false\"\r\n                                   [style]=\"componentProperties.style.style8\"\r\n                                   class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\"\r\n                    *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n\r\n        <!--detail grid-->\r\n        <ng-template kendoGridDetailTemplate *ngIf=\"data.DetailGrid === undefined ? false : data.DetailGrid.Visible\">\r\n          <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" \r\n            [data]=\"data.DetailGrid\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" \r\n            [componentProperties]=\"componentProperties\">\r\n          </app-zgrid>\r\n        </ng-template>\r\n\r\n      </kendo-grid>\r\n\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ZgridComponent, selector: "app-zgrid" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { type: i8.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i4.DatePipe, "number": i4.DecimalPipe }, animations: [
+ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n  <!-- Tooltip Template -->\r\n  <ng-template #template let-anchor>\r\n    <span>{{ truncateText(anchor.nativeElement.innerText) }}</span>\r\n  </ng-template>\r\n\r\n  <!-- Popover Component -->\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\"\r\n           class=\"popoverbody\"\r\n           *ngIf=\"data && data.Body\"\r\n           [innerHTML]=\"data.Body | htmlSanitize\"\r\n           [ngClass]=\"data.BodyClass\"\r\n           (mouseleave)=\"closePopOver.call(this, $event)\">\r\n      </div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n\r\n  <!-- Main Grid Container -->\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       [style]=\"componentProperties.style.style1\"\r\n       class=\"e1tag-style1\">\r\n\r\n    <div kendoPopoverContainer\r\n         [popover]=\"gridPopOver\"\r\n         filter=\"div.gridCell.withPopoverInGrid\"\r\n         showOn=\"none\"\r\n         kendoPopoverContainer\r\n         #popovercontainer=\"kendoPopoverContainer\">\r\n\r\n      <!-- Kendo Grid -->\r\n      <kendo-grid [zgridbinding]=\"{\r\n          data: data,\r\n          group: group,\r\n          params: params,\r\n          gridSubject: gridSubject,\r\n          gridSetting: gridSetting\r\n        }\"\r\n                  [ngClass]=\"data.Class\"\r\n                  class=\"desktop-grid e1tag-style2\"\r\n                  [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n                  [pageable]=\"pageable\"\r\n                  [class.hiden-pager]=\"!pageable\"\r\n                  [pageSize]=\"gridSetting.gridState.take\"\r\n                  [skip]=\"gridSetting.gridState.skip\"\r\n                  [sort]=\"gridSetting.gridState.sort\"\r\n                  [sortable]=\"{allowUnsort: true, mode: 'multiple'}\"\r\n                  [filter]=\"gridSetting.gridState.filter\"\r\n                  [filterable]=\"data.enableFiltering !== false\"\r\n                  [resizable]=\"true\"\r\n                  [reorderable]=\"true\"\r\n                  [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                  [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                  (cellClick)=\"cellClickHandler($event)\"\r\n                  (cellClose)=\"editCellCloseHandler($event)\"\r\n                  (dataStateChange)=\"dataStateChange($event)\"\r\n                  (pageChange)=\"pageChange($event)\"\r\n                  (sortChange)=\"sortChange($event)\"\r\n                  (filterChange)=\"filterChange($event)\"\r\n                  [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                  [selectable]=\"selectableSettings\"\r\n                  [(selectedKeys)]=\"rowSelection\"\r\n                  [style]=\"componentProperties.style.style2\"\r\n                  [trackBy]=\"trackBy\"\r\n                  (cancel)=\"cancelHandler($event)\"\r\n                  (save)=\"saveHandler($event)\"\r\n                  (remove)=\"removeHandler($event)\"\r\n                  (edit)=\"editHandler($event)\"\r\n                  (add)=\"addHandler($event)\"\r\n                  (columnResize)=\"adjustWidthUponResize()\"\r\n                  (excelExport)=\"onExcelExport($event)\"\r\n                  [rowClass]=\"rowCallback.bind(this)\"\r\n                  (detailExpand)=\"detailExpand($event)\" \r\n                  (detailCollapse)=\"detailCollapse($event)\"\r\n                  (group)=\"gridSetting.gridState.group\"\r\n                  [groupable]=\"data.GroupSetting?.EnableGrouping\"\r\n                  (groupChange)=\"groupChange($event)\">\r\n\r\n        <!-- Toolbar Template -->\r\n        <ng-template kendoGridToolbarTemplate\r\n                     *ngIf=\"data.AllowRefreshButton ||\r\n                          data.AllowExport ||\r\n                          data.CacheInfo?.EnableSaveState ||\r\n                          data.Title ||\r\n                          data.GridButtonFieldName_WF ||\r\n                          data.GridButtonFieldName ||\r\n                          data.EnableGridCommand ||\r\n                          data.EnableCustomAddCommand ||\r\n                          data.EnableCustomResetCommand\">\r\n\r\n          <!-- Left Toolbar Items -->\r\n          <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n            <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n\r\n            <button title=\"Refresh\"\r\n                    type=\"button\"\r\n                    class=\"left-buttons refresh-button\"\r\n                    kendoButton\r\n                    (click)=\"refreshData()\"\r\n                    *ngIf=\"data.AllowRefreshButton\">\r\n              <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n            </button>\r\n\r\n            <div class=\"toolbar-left-item-second-container\"\r\n                 *ngIf=\"data.AllowExport\"\r\n                 [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n              <button type=\"button\"\r\n                      class=\"left-buttons export-button\"\r\n                      kendoGridExcelCommand\r\n                      *ngIf=\"data.AllowExport\">\r\n                <fa-icon icon=\"download\"></fa-icon>\r\n                <span class=\"export-to-excel-button-text\">\r\n                  {{ getToolBarItemLabelName('Download as Excel') }}\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Toolbar Items -->\r\n          <div class=\"toolbar-right-item\"\r\n               *ngIf=\"gridBtn ||\r\n                     data.CacheInfo?.EnableSaveState ||\r\n                     gridDefaultStateExist ||\r\n                     data.EnableGridCommand ||\r\n                     data.EnableCustomAddCommand ||\r\n                     data.EnableCustomResetCommand\">\r\n\r\n            <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\"\r\n                                  [data]=\"gridBtn\"\r\n                                  [group]=\"group\"\r\n                                  [form]=\"form\">\r\n            </app-zworkflowbuttons>\r\n\r\n            <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\"\r\n                          [data]=\"gridBtn\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\">\r\n            </app-zbuttons>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"saveGridSettings($event)\"\r\n                    *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star\"></span>\r\n              {{ getToolBarItemLabelName('Save Settings') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"restoreGridSettings($event)\"\r\n                    *ngIf=\"showRestoreGridSettingButton\">\r\n              <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>\r\n              {{ getToolBarItemLabelName('Reset to Default') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoGridAddCommand\r\n                    *ngIf=\"data.EnableGridCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>\r\n              {{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName : 'Add') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomAddCommand(group)\"\r\n                    *ngIf=\"data.EnableCustomAddCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-add\"></span>\r\n              {{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName : 'Add') }}\r\n            </button>\r\n\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomResetCommand(group)\"\r\n                    *ngIf=\"data.EnableCustomResetCommand\">\r\n              <span class=\"k-icon k-icon-with-text k-i-trash\"></span>\r\n              {{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName : 'Reset') }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Filter Container -->\r\n          <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n            <div class=\"normal-filter-container\">\r\n              <app-zform class=\"filter-fields\"\r\n                         [group]=\"filterGroup\"\r\n                         [fieldName]=\"data.GridFilterBarField\">\r\n              </app-zform>\r\n\r\n              <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n                <ion-button fill=\"solid\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            color=\"primary\"\r\n                            (click)=\"search()\">\r\n                  <fa-icon icon=\"search\"></fa-icon>\r\n                  <span class=\"btn-label ion-text-capitalize\">\r\n                    {{ getToolBarItemLabelName('Search') }}\r\n                  </span>\r\n                </ion-button>\r\n\r\n                <ion-button fill=\"outline\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            color=\"primary\"\r\n                            (click)=\"cancelEdit()\"\r\n                            *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n                  <fa-icon icon=\"times\"></fa-icon>\r\n                </ion-button>\r\n\r\n                <ion-button fill=\"solid\"\r\n                            size=\"default\"\r\n                            strong=\"true\"\r\n                            [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\"\r\n                            (click)=\"advancedSearch()\"\r\n                            *ngIf=\"data.GridAdvFilterBarField\">\r\n                  <fa-icon icon=\"sliders-h\"></fa-icon>\r\n                </ion-button>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Advanced Filter -->\r\n            <app-zform *ngIf=\"data.GridAdvFilterBarField\"\r\n                       class=\"to-preload-the-fields\"\r\n                       [group]=\"advfilterGroup\"\r\n                       [fieldName]=\"data.GridAdvFilterBarField\"\r\n                       style=\"display:none;\">\r\n            </app-zform>\r\n\r\n            <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n              <div class=\"adv-filter-seperator\">\r\n                <span>{{ getToolBarItemLabelName('Advanced Search') }}</span>\r\n              </div>\r\n\r\n              <app-zform class=\"advfilter-fields\"\r\n                         [group]=\"advfilterGroup\"\r\n                         [fieldName]=\"data.GridAdvFilterBarField\">\r\n              </app-zform>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <!-- Checkbox Column -->\r\n        <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\"\r\n                                    [width]=\"40\"\r\n                                    showSelectAll=\"true\"\r\n                                    [columnMenu]=\"true\"\r\n                                    [locked]=\"checkboxColumnPinned\">\r\n        </kendo-grid-checkbox-column>\r\n\r\n        <!-- Dynamic Columns -->\r\n        <kendo-grid-column [style]=\"getGridColumnStyle()\"\r\n                           class=\"e1tag-style3\"\r\n                           *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]=\"getGridHeaderStyle()\"\r\n                           headerClass=\"e1tag-style4\"\r\n                           [footerStyle]=\"getGridFooterStyle()\"\r\n                           footerClass=\"e1tag-style9\"\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                           [columnMenu]=\"!col.disableColumnMenu\"\r\n                           [includeInChooser]=\"col.includeInChooser\"\r\n                           [editor]=\"col.editorType\">\r\n\r\n          <!-- Filter Templates -->\r\n          <div [ngSwitch]=\"true\">\r\n            <!-- Numeric Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType === 'number' ||\r\n                              col.fieldType === 'currency' ||\r\n                              col.fieldType === 'znumeric'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                                [column]=\"column\"\r\n                                                [filter]=\"filter\"\r\n                                                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\r\n            <!-- Date Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate' ||\r\n                              col.fieldType === 'ztime' ||\r\n                              col.fieldType === 'zdatetime' ||\r\n                              col.fieldType === 'zuidatetime'\">\r\n              <!-- Date Range Filter -->\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                          class=\"date-range-filter\"\r\n                                          [filter]=\"filter\"\r\n                                          [field]=\"col.field\"\r\n                                          [data]=\"data\">\r\n                    <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                    <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                    <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                    <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                    <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                    <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n\r\n              <!-- Regular Date Filter -->\r\n              <div *ngIf=\"col.filterByDateRange === false\">\r\n                <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                               [column]=\"column\"\r\n                                               [filter]=\"filter\"\r\n                                               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\r\n            <!-- Boolean Filter -->\r\n            <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-boolean-filter-cell [column]=\"column\"\r\n                                                [filter]=\"filter\"\r\n                                                operator=\"eq\">\r\n                </kendo-grid-boolean-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <!-- Default String Filter -->\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\"\r\n                                               [column]=\"column\"\r\n                                               [filter]=\"filter\"\r\n                                               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\r\n          <!-- Grid Edit Template -->\r\n          <ng-template kendoGridEditTemplate\r\n                       *ngIf=\"data.EnableGridCommand\"\r\n                       let-dataItem=\"dataItem\"\r\n                       let-column=\"col\"\r\n                       let-formGroup=\"formGroup\"\r\n                       let-isNew=\"isNew\">\r\n            <div [ngSwitch]=\"col.fieldType\">\r\n              <!-- Number Editor -->\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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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\r\n              <!-- Default Text Editor -->\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;\"\r\n                             *ngIf=\"formGroup.get(col.field).invalid &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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 &&\r\n                          !formGroup.get(col.field).untouched &&\r\n                          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\r\n          <!-- Cell Templates -->\r\n          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n            <!-- Regular Cell Display -->\r\n            <div style=\"margin: 1px 0;\"\r\n                 *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n                 [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getClass(dataItem, col)\"\r\n                 [style]=\"getCellStyle(col, dataItem)\"\r\n                 [attr.data-id]=\"dataItem.Id\"\r\n                 [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\"\r\n                 (mouseleave)=\"closePopOver($event)\">\r\n\r\n              <!-- Date Cell -->\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n\r\n              <!-- Time Cell -->\r\n              <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n\r\n              <!-- Short Date Cell -->\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n\r\n              <!-- DateTime Cell -->\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <!-- UI DateTime Cell -->\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <!-- Number Cell -->\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number }}\r\n              </span>\r\n\r\n              <!-- Currency Cell -->\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n              </span>\r\n\r\n              <!-- Numeric Cell -->\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | number: getFormat(col) }}\r\n              </span>\r\n\r\n              <!-- URL Cell -->\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n\r\n              <!-- Default Cell -->\r\n              <span *ngSwitchDefault>\r\n                <!-- Icon Display -->\r\n                <div style=\"margin: 5px 0;\"\r\n                     *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n                  <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n                </div>\r\n\r\n                <!-- Text Display with Conditional Styling -->\r\n                <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                  <span *ngSwitchCase=true>\r\n                    <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                    </div>\r\n                  </span>\r\n                  <span *ngSwitchDefault>\r\n                    <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                  </span>\r\n                </div>\r\n              </span>\r\n            </div>\r\n\r\n            <!-- Inline Editable Cell -->\r\n            <div style=\"margin: 5px 0;\"\r\n                 *ngIf=\"col.isEditableInGrid === true &&\r\n                      isInlineFormGroupHasValue() &&\r\n                      !isInlineEditInputFieldLoading &&\r\n                      !col.gridCellReplaceValue\"\r\n                 [style]=\"componentProperties.style.style5\"\r\n                 [ngClass]=\"getClass(dataItem, col)\"\r\n                 class=\"e1tag-style5\"\r\n                 [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\"\r\n                                    [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\"\r\n                                    [containerField]=\"containerField\"\r\n                                    [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n\r\n            <!-- Clickable Icons -->\r\n            <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n              <span [ngClass]=\"icon.Class ? icon.Class : ''\"\r\n                    *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n                        ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n                        : true;\r\n                      else disabledButton\"\r\n                    (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n                {{icon.Name || dataItem[col.field]}}\r\n                <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\"></fa-icon>\r\n              </span>\r\n              <ng-template #disabledButton></ng-template>\r\n            </span>\r\n          </ng-template>\r\n\r\n          <!-- Footer Template -->\r\n          <ng-template kendoGridFooterTemplate\r\n                       let-column\r\n                       let-columnIndex=\"columnIndex\"\r\n                       *ngIf=\"data.EnableAggregate\">\r\n            <div style=\"margin: 5px 0;\"\r\n                 [ngSwitch]=\"col.fieldType\"\r\n                 [style]=\"componentProperties.style.style7\"\r\n                 class=\"e1tag-style7\">\r\n              {{col.aggregateType}}\r\n\r\n              <span *ngSwitchCase=\"'zdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'ztime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zshortdate'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zdatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'zuidatetime'\">\r\n                {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'number'\">\r\n                {{ col.aggregateValue | number }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'znumeric'\">\r\n                {{ col.aggregateValue | number: getFormat(col) }}\r\n              </span>\r\n\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n                {{ col.aggregateValue }}\r\n              </span>\r\n\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\r\n        <!-- Command Column -->\r\n        <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\"\r\n                                   width=\"180\"\r\n                                   [columnMenu]=\"false\"\r\n                                   [style]=\"componentProperties.style.style8\"\r\n                                   class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n            <button kendoGridSaveCommand>\r\n              {{ isNew ? 'Save' : 'Update' }}\r\n            </button>\r\n            <button kendoGridCancelCommand [primary]=\"true\">\r\n              {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n            </button>\r\n            <button kendoGridEditCommand>\r\n              {{ \"Edit\" }}\r\n            </button>\r\n            <button kendoGridRemoveCommand>\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n\r\n        <!-- Custom Remove Command Column -->\r\n        <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\"\r\n                                   width=\"180\"\r\n                                   [columnMenu]=\"false\"\r\n                                   [style]=\"componentProperties.style.style8\"\r\n                                   class=\"e1tag-style8\">\r\n          <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n            <button type=\"button\"\r\n                    kendoButton\r\n                    (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\"\r\n                    *ngIf=\"data.EnableCustomRemoveCommand\">\r\n              {{ \"Remove\" }}\r\n            </button>\r\n          </ng-template>\r\n        </kendo-grid-command-column>\r\n\r\n        <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n\r\n        <!--detail grid-->\r\n        <ng-template kendoGridDetailTemplate *ngIf=\"data.DetailGrid === undefined ? false : data.DetailGrid.Visible\">\r\n          <app-zgrid [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\" \r\n            [data]=\"data.DetailGrid\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\" \r\n            [componentProperties]=\"componentProperties\">\r\n          </app-zgrid>\r\n        </ng-template>\r\n\r\n      </kendo-grid>\r\n\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- for DEC auto scrolling -->\r\n  <div id=\"end-of-grid\"></div>\r\n</div>\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ZgridComponent, selector: "app-zgrid" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { type: i8.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i4.DatePipe, "number": i4.DecimalPipe }, animations: [
         hideAndShowVerticalAnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZgridComponent, decorators: [{
@@ -11981,7 +12227,7 @@ class ZlabelComponent extends InputFieldBase {
     }
 }
 ZlabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZlabelComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n  [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n  (click)=\"onItemClick($event, data)\">\r\n  <div #zlabelDiv class=\"main-container\">\r\n    <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\"\r\n      *ngIf=\"!data.InputFieldAddOns || data.InputFieldAddOns.length <= 0\">\r\n      <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n        *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n      <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n        [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n        {{componentProperties.label}}\r\n      </ion-label>\r\n      <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n        class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n    </div>\r\n    <div class=\"label-div-container e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n      *ngIf=\"data.InputFieldAddOns && data.InputFieldAddOns.length > 0\">\r\n      <app-input-field-addons class=\"addon-top e1tag-style4\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n      <div class=\"content-withaddon-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n        <app-input-field-addons class=\"addon-left e1tag-style4\" [position]=\"'left'\" [addOn]=\"inputFieldAddOn.left\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n        <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n          *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n        <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n          [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n          {{componentProperties.label}}\r\n        </ion-label>\r\n        <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n          class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n        <app-input-field-addons class=\"addon-right e1tag-style4\" [position]=\"'right'\" [addOn]=\"inputFieldAddOn.right\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-bottom e1tag-style4\" [position]=\"'bottom'\" [addOn]=\"inputFieldAddOn.bottom\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.main-container,.content-container{width:100%}.content-withaddon-container{width:100%;display:flex;gap:5px;justify-content:space-between}.label-div-container{display:flex;flex-direction:column;width:100%}.label-div-container>.addon-top,.label-div-container>.addon-bottom{margin:auto}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZlabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZlabelComponent, selector: "app-zlabel", usesInheritance: true, ngImport: i0, template: "<ion-item [formGroup]=\"form\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n  [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n  (click)=\"onItemClick($event, data)\">\r\n  <div #zlabelDiv class=\"main-container\">\r\n    <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\"\r\n      *ngIf=\"!data.InputFieldAddOns || data.InputFieldAddOns.length <= 0\">\r\n      <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n        *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n      <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n        [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n        {{componentProperties.label}}\r\n      </ion-label>\r\n      <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n        class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n    </div>\r\n    <div class=\"label-div-container e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n      *ngIf=\"data.InputFieldAddOns && data.InputFieldAddOns.length > 0\">\r\n      <app-input-field-addons class=\"addon-top e1tag-style4\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n      <div class=\"content-withaddon-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n        <app-input-field-addons class=\"addon-left e1tag-style4\" [position]=\"'left'\" [addOn]=\"inputFieldAddOn.left\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n        <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n          *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n        <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n          [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n          {{componentProperties.label}}\r\n        </ion-label>\r\n        <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n          class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n        <app-input-field-addons class=\"addon-right e1tag-style4\" [position]=\"'right'\" [addOn]=\"inputFieldAddOn.right\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-bottom e1tag-style4\" [position]=\"'bottom'\" [addOn]=\"inputFieldAddOn.bottom\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.main-container,.content-container{width:100%}.content-withaddon-container{width:100%;display:flex;gap:5px;justify-content:space-between}.label-div-container{display:flex;flex-direction:column;width:100%}.label-div-container>.addon-top,.label-div-container>.addon-bottom{margin:auto}\n"], components: [{ type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: InputFieldAddOnsComponent, selector: "app-input-field-addons", inputs: ["position", "addOn"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZlabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zlabel', template: "<ion-item [formGroup]=\"form\"\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"getClass(form, data)\" [style.--min-height]=\"data.Height\"\r\n  [style.cursor]=\"data.OnItemClick ? 'pointer' : 'auto'\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n  (click)=\"onItemClick($event, data)\">\r\n  <div #zlabelDiv class=\"main-container\">\r\n    <div class=\"content-container e1tag-style1\" [style]=\"componentProperties.style.style1\"\r\n      *ngIf=\"!data.InputFieldAddOns || data.InputFieldAddOns.length <= 0\">\r\n      <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n        *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n      <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n        [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n        {{componentProperties.label}}\r\n      </ion-label>\r\n      <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n        class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n    </div>\r\n    <div class=\"label-div-container e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n      *ngIf=\"data.InputFieldAddOns && data.InputFieldAddOns.length > 0\">\r\n      <app-input-field-addons class=\"addon-top e1tag-style4\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n      <div class=\"content-withaddon-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n        <app-input-field-addons class=\"addon-left e1tag-style4\" [position]=\"'left'\" [addOn]=\"inputFieldAddOn.left\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n        <fa-icon class=\"e1tag-style2\" [icon]=\"getFontAwesome(componentProperties.icon, fontAweSomeService)\"\r\n          *ngIf=\"componentProperties.icon\" [style]=\"componentProperties.style.style2\"></fa-icon>\r\n        <ion-label *ngIf=\"componentProperties.label && !data.IsHtml\" class=\"ion-text-wrap e1tag-style3\" Position=\"Fixed\"\r\n          [color]=\"data.Color\" [style]=\"componentProperties.style.style3\">\r\n          {{componentProperties.label}}\r\n        </ion-label>\r\n        <div *ngIf=\"componentProperties.label && data.IsHtml\" [innerHTML]=\"componentProperties.label  | htmlSanitize\"\r\n          class=\"e1tag-style3\" [style]=\"componentProperties.style.style3\"></div>\r\n        <app-input-field-addons class=\"addon-right e1tag-style4\" [position]=\"'right'\" [addOn]=\"inputFieldAddOn.right\"\r\n          [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n          [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n        </app-input-field-addons>\r\n      </div>\r\n      <app-input-field-addons class=\"addon-bottom e1tag-style4\" [position]=\"'bottom'\" [addOn]=\"inputFieldAddOn.bottom\"\r\n        [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n        [componentProperties]=\"componentProperties\" [style]=\"componentProperties.style.style4\">\r\n      </app-input-field-addons>\r\n    </div>\r\n  </div>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"zlabelDiv\"></app-context-menu>\r\n</ion-item>\r\n", styles: [".subtitle{font-weight:700;text-decoration:underline}.subtitle .label,.mediumFont .label{font-size:15px}.label{font-size:12px;white-space:pre-wrap!important}.boldFont .label{font-weight:700}.underlineFont .label{text-decoration:underline}.medium-list{--min-height: 20px;padding:5px 0}ion-item{font-size:var(--content-font-size)}.main-container,.content-container{width:100%}.content-withaddon-container{width:100%;display:flex;gap:5px;justify-content:space-between}.label-div-container{display:flex;flex-direction:column;width:100%}.label-div-container>.addon-top,.label-div-container>.addon-bottom{margin:auto}\n"] }]
@@ -12288,7 +12534,7 @@ class ZmodalComponent extends DialogContentBase {
     }
 }
 ZmodalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, deps: [{ token: i6.DialogRef }, { token: i2$1.ModalController }, { token: i2.ZCoreService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }, { token: i2$1.Platform }, { token: i2.AlertService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i4.JsonPipe } });
+ZmodalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i4.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zmodal', template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
@@ -12396,7 +12642,7 @@ class ZmodalMobileComponent {
     }
 }
 ZmodalMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, deps: [{ token: i2.WebApiService }, { token: i2.ZCoreService }, { token: i2.ComponentErrorHandlerService }, { token: i2.FieldService }, { token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i4.JsonPipe } });
+ZmodalMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZmodalMobileComponent, selector: "app-zmodal", inputs: { modalParams: "modalParams" }, ngImport: i0, template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""], components: [{ type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: UiactionbuttonComponent, selector: "app-uiactionbutton" }, { type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { type: i2$1.IonRow, selector: "ion-row" }, { type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ScrollbarThemeDirective, selector: "[appScrollbarTheme]" }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "json": i4.JsonPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZmodalMobileComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-zmodal", template: "<ion-header *ngIf=\"isMobileScreen()\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-button (click)=\"onCancel()\">\r\n        <!-- <ion-icon name=\"close\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'times'\" size=\"lg\"></fa-icon>\r\n      </ion-button>\r\n    </ion-buttons>\r\n    <ion-title>\r\n      {{ modalParams.formHeader }}\r\n    </ion-title>\r\n    <ion-buttons slot=\"primary\" *ngIf=\"!group.isLoading\">\r\n      <app-uiactionbutton [group]=\"group\"></app-uiactionbutton>\r\n    </ion-buttons>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content appScrollbarTheme [ngStyle]=\"getGridStyle()\">\r\n  <ion-grid>\r\n    <ion-row *ngIf=\"group.isLoading\" class=\"ion-text-center\">\r\n      <ion-col class=\"ion-margin ion-padding\">\r\n        <ion-spinner></ion-spinner>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"!group.isLoading\">\r\n      <ion-col>\r\n        <app-zform [group]=\"group\"></app-zform>\r\n      </ion-col>\r\n    </ion-row>\r\n    <ion-row *ngIf=\"isSITEnvironment() && !group.isLoading\">\r\n      <ion-col>\r\n        <pre style=\"font-size: x-small;\">{{group.zModel | json}}</pre>\r\n      </ion-col>\r\n    </ion-row>\r\n  </ion-grid>\r\n</ion-content>\r\n\r\n", styles: [""] }]
@@ -13030,7 +13276,7 @@ class ZtabComponent extends ContainerFieldBase {
     }
 }
 ZtabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtabComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.TranslationService }, { token: i2.StorageSessionService }, { token: MainService }], target: i0.ɵɵFactoryTarget.Component });
-ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtabComponent, selector: "app-ztab", viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\" [ngClass]=\"data.Class\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\" [ngClass]=\"data.Class\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{font-weight:500;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important;border:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8);background:rgba(var(--ion-color-primary-rgb),.1)!important}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:0;border-bottom:3px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:5px 15px 0;margin:0 5px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"], components: [{ type: i2$5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i2$5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i2$5.TabContentDirective, selector: "[kendoTabContent]" }], pipes: { "tabfilter": TabFilter } });
+ZtabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtabComponent, selector: "app-ztab", viewQueries: [{ propertyName: "tabstrip", first: true, predicate: ["kendoTabStripInstance"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\" [ngClass]=\"data.Class\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\" [ngClass]=\"data.Class\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{font-weight:500;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important;border:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8);background:rgba(var(--ion-color-primary-rgb),.1)!important}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:0;border-bottom:3px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:5px 15px 0;margin:0 5px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"], components: [{ type: i2$5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { type: i2$5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon"], exportAs: ["kendoTabStripTab"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$5.TabTitleDirective, selector: "[kendoTabTitle]" }, { type: i2$5.TabContentDirective, selector: "[kendoTabContent]" }], pipes: { "tabfilter": TabFilter } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztab', template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"container e1tag-container-style\" [ngClass]=\"data.Class\"\r\n     [style]=\"componentProperties.containerStyle.style\">\r\n  <kendo-tabstrip class=\"ztab e1tag-container-style1\" #kendoTabStripInstance [keepTabContent]=\"true\" (tabSelect)=\"onTabSelect($event)\"\r\n                  [style]=\"componentProperties.containerStyle.style1\" [class]=\"data.ComponentStyleType\" [ngClass]=\"data.Class\">\r\n    <kendo-tabstrip-tab *ngFor=\"let tab of state.currentTabs; let i = index\" [selected]=\"getSelectedTab(i)\" [disabled]=\"!tab.Visible\"\r\n                        [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\">\r\n      <ng-template kendoTabTitle *ngIf=\"tab.Visible\">\r\n        <div class=\"tab-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n          <fa-icon *ngIf=\"!!tab.Icon\" [icon]=\"getFontAwesome(tab.Icon, fontAweSomeService)\" [style]=\"componentProperties.containerStyle.style4\" class=\"e1tag-container-style4\"></fa-icon>\r\n          {{tab.Label}}\r\n          <ion-badge class=\"tab-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!tab.Counter\" [style]=\"componentProperties.containerStyle.style5\">{{tab.Counter}}</ion-badge>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template kendoTabContent>\r\n        <app-zdiv [style]=\"componentProperties.containerStyle.style6\" class=\"e1tag-container-style6\" [data]=\"data | tabfilter: tab.Index + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n        </app-zdiv>\r\n      </ng-template>\r\n    </kendo-tabstrip-tab>\r\n  </kendo-tabstrip>\r\n</div>\r\n", styles: [".container{margin:var(--container-margin-top) 0px 6px 0px}.tab-item-counter{margin-left:4px;position:relative;top:4px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper{border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{box-shadow:none;font-weight:600;color:gray;font-size:calc(var(--content-subtitle1-font-size) - 1px);background:rgba(var(--ion-color-primary-rgb),.1);border:1px solid rgba(var(--ion-color-primary-rgb),.2);padding:5px 1px 3px;margin-right:2px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8)}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{color:var(--ion-color-primary);background:white;border:1px solid rgba(var(--ion-color-primary-rgb),.5);border-bottom:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:6px 20px}:host ::ng-deep kendo-tabstrip.ztab>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content{padding:5px;background:white;border-color:rgba(var(--ion-color-primary-rgb),.5)}:host ::ng-deep kendo-tabstrip.ztab>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-focused,:host ::ng-deep kendo-tabstrip.ztab.style1>.k-content.k-state-focused{outline:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items{background:transparent;padding-left:10px;border-bottom:2px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item{font-weight:500;color:rgba(var(--ion-color-dark-rgb),.6);font-size:calc(var(--content-subtitle1-font-size) - 1px);padding-bottom:5px;box-shadow:none!important;background:transparent!important;border:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item:hover{color:rgba(var(--ion-color-dark-rgb),.8);background:rgba(var(--ion-color-primary-rgb),.1)!important}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected{padding:0;color:var(--ion-color-dark);font-size:var(--content-subtitle1-font-size);border:none;border-radius:0;border-bottom:3px solid var(--ion-color-primary);background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-active>.k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-selected>.k-link{cursor:default}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-disabled,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-item.k-state-disabled{display:none}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link{padding:5px 15px 0;margin:0 5px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-tabstrip-items-wrapper>.k-tabstrip-items .k-link fa-icon{padding-right:10px}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content{padding:0;border:none;background:transparent}:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.header-without-border>.k-content.k-state-focused,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content:focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-focus,:host ::ng-deep kendo-tabstrip.ztab.style2>.k-content.k-state-focused{outline:none}\n"] }]
@@ -13552,7 +13798,7 @@ class ZtreeComponent extends DataListingFieldBase {
     }
 }
 ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }, { propertyName: "zinput_textboxList", predicate: ["zinput_textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$a.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$a.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$a.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$a.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$a.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$a.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$a.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$a.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$a.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
+ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }, { propertyName: "zinput_textboxList", predicate: ["zinput_textbox"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$a.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$a.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$a.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$a.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$a.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$a.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$a.CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { type: i2$a.DisableDirective, selector: "[kendoTreeViewDisable]", inputs: ["isDisabled", "kendoTreeViewDisable", "disabledKeys"] }, { type: i2$a.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "htmlSanitize": HtmlSanitizePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreeComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [(selectedKeys)]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [kendoTreeViewCheckable]=\"checkableSettings\"\r\n                  [checkBy]=\"data.SelectOptions\"\r\n                  [(checkedKeys)]=\"checkedKeys\"\r\n                  (checkedChange)=\"onCheckedChange($event)\"\r\n                  [kendoTreeViewDisable]=\"data.SelectOptions\"\r\n                  [isChecked]=\"isChecked\"\r\n                  [(disabledKeys)]=\"disabledCheckBoxKeys\"\r\n                  [disableParentNodesOnly]=\"data.DisableParentNodesOnly\"\r\n                  [expandDisabledNodes]=\"data.ExpandDisabledNodes\"\r\n                  (nodeClick)=\"onNodeClick($event)\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\r\n                    (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 2px;\"\r\n                    mat-raised-button\r\n                    color=\"primary\"\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnAddNodeVisible\"\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\"\r\n                    (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                    style=\"zoom: 0.6; margin: 0 0 0 10px;\"\r\n                    color=\"danger\"\r\n                    mat-raised-button\r\n                    size=\"medium\"\r\n                    [hidden]=\"!!dataItem.OnRemoveNodeVisible\"\r\n                    [style]=\"componentProperties.style.style3\"\r\n                    class=\"e1tag-style3\">\r\n          <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator e1tag-style7\" [style]=\"componentProperties.style.style7\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!dataItem.z_inputType\">\r\n          <div [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\" [innerHTML]=\"getTemplate(dataItem, data, group) | htmlSanitize\"></div>\r\n        </ion-label>\r\n        <div [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\" *ngIf=\"!!dataItem.z_inputType\">\r\n          <kendo-textbox\r\n                  #zinput_textbox\r\n                  *ngIf=\"dataItem.z_inputType == 'text'\"\r\n                  class=\"input-field e1tag-style8\"\r\n                  [id]=\"data.Name + '_' + dataItem.z_inputType + '_' + dataItem.Id\"\r\n                  [style]=\"componentProperties.style.style8\"\r\n                  [(ngModel)]=\"dataItem.z_inputValue\">\r\n          </kendo-textbox>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n  <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.5);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"] }]
@@ -14098,7 +14344,7 @@ class ZtreelistComponent extends DataListingFieldBase {
     }
 }
 ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.WebApiService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreelistComponent, selector: "app-ztreelist", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"!col.filterByDateRange\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\" format=\"dd-MM-yyyy\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n               <ng-container *ngIf=\"!col.gridCellReplaceValue\">\r\n                <span *ngSwitchDefault>\r\n                  <ng-container [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                    <ng-container *ngSwitchCase=\"true\">\r\n                      <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                        <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </span>\r\n              </ng-container>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\"  [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n      </kendo-treelist>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}.cellStyleConditionDefault{border-radius:5px;text-align:center}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i5$2.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i5$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i5$2.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i5$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i5$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i5$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i5$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i5$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i5$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i5$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i5$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i5$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i5$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i5$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i5$2.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: i5$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i5$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i5$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { 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$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i5$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i5$2.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i5$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i4.DatePipe, "number": i4.DecimalPipe, "titlecase": i4.TitleCasePipe } });
+ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZtreelistComponent, selector: "app-ztreelist", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"!col.filterByDateRange\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\" format=\"dd-MM-yyyy\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n               <ng-container *ngIf=\"!col.gridCellReplaceValue\">\r\n                <span *ngSwitchDefault>\r\n                  <ng-container [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                    <ng-container *ngSwitchCase=\"true\">\r\n                      <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                        <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </span>\r\n              </ng-container>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\"  [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n      </kendo-treelist>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}.cellStyleConditionDefault{border-radius:5px;text-align:center}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$1.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i5$2.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i3$8.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i5$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i5$2.NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i5$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i5$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i5$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i5$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i5$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i5$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i5$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i5$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i5$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i5$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i5$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i5$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i5$2.EndsWithFilterOperatorComponent, selector: "kendo-treelist-filter-endswith-operator" }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$1.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i7$1.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$1.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: i5$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i5$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i5$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { 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$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i5$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i5$2.FocusableDirective, selector: "[kendoTreeListFocusable],        [kendoTreeListAddCommand],        [kendoTreeListEditCommand],        [kendoTreeListRemoveCommand],        [kendoTreeListSaveCommand],        [kendoTreeListCancelCommand]    ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i5$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i4.DatePipe, "number": i4.DecimalPipe, "titlecase": i4.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZtreelistComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-ztreelist', template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n    <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n      <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n    </ng-template>\r\n  </kendo-popover>\r\n  <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n    <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n      <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\r\n                    kendoTreeListExpandable\r\n                    [style]=\"componentProperties.style.style2\"\r\n                    class=\"desktop-grid e1tag-style2\"\r\n                    [idField]=\"options.idField\"\r\n                    [parentIdField]=\"options.parentIdField\"\r\n                    [sortable]=\"options.sortable\"\r\n                    [resizable]=\"options.resizable\"\r\n                    [filterable]=\"options.filterable\"\r\n                    [reorderable]=\"false\"\r\n                    [columnMenu]=\"options.columnMenu\"\r\n                    [scrollable]=\"options.scrollable\"\r\n                    [aggregate]=\"options.aggregate\"\r\n                    [isExpanded]=\"isExpanded\"\r\n                    [class.hiden-pager]=\"!options.pageAble\"\r\n                    (cellClick)=\"cellClickHandler($event)\"\r\n                    (filterChange)=\"onFilterChange($event)\"\r\n                    (expand)=\"onExpand($event)\"\r\n                    (collapse)=\"onCollapse($event)\"\r\n                    [rowClass]=\"rowCallback.bind(this)\"\r\n                    [pageable]=\"options.pageAble\"\r\n                    [pageSize]=\"options.pageSize\">\r\n      <ng-template kendoTreeListToolbarTemplate\r\n                   *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName\">\r\n        <div class=\"toobar-left-item\">\r\n          <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon>\r\n          <kendo-label class=\"gridTitle\">{{data.Title}}</kendo-label>\r\n          <button class=\"ion-activatable ripple-parent k-button refresh-btn\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\">\r\n            <span class=\"k-icon k-i-refresh-sm\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n        <div class=\"toolbar-right-item\">\r\n          <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n          <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n          <button class=\"ion-activatable ripple-parent k-button\" kendoTreeListExcelCommand\r\n                  *ngIf=\"data.AllowExport\">\r\n            <span class=\"k-icon k-i-download\"></span>\r\n            <ion-ripple-effect></ion-ripple-effect>\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <!--\r\n        [filterable]=\"options.filterable\"\r\n      [reorderable]=\"options.resizable\"\r\n        -->\r\n      <ng-container *ngFor=\"let col of options.columns; index as i\">\r\n        <kendo-treelist-column *ngIf=\"!col.command\" [class]=\"col.class\" [expandable]=\"i===0\" [field]=\"col.field\"\r\n                               [title]=\"col.title || col.field\" [width]=\"col.width || 250\" [filterable]=\"filterable(col.enableFiltering)\"\r\n                               [sortable]=\"sortable(col.enableSorting)\" [hidden]=\"!isColumnsVisible(col.visible)\" [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\"\r\n                               [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\" [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\">\r\n          <div [ngSwitch]=\"true\">\r\n            <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                  <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                  <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-treelist-numeric-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n              <div *ngIf=\"col.filterByDateRange === true\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                  <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\" [filter]=\"filter\" [field]=\"col.field\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </date-range-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n              <div *ngIf=\"!col.filterByDateRange\">\r\n                <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                  <kendo-treelist-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"lte\" format=\"dd-MM-yyyy\">\r\n                    <kendo-treelist-filter-lt-operator></kendo-treelist-filter-lt-operator>\r\n                    <kendo-treelist-filter-lte-operator></kendo-treelist-filter-lte-operator>\r\n                    <kendo-treelist-filter-gt-operator></kendo-treelist-filter-gt-operator>\r\n                    <kendo-treelist-filter-gte-operator></kendo-treelist-filter-gte-operator>\r\n                    <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                    <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                  </kendo-treelist-date-filter-cell>\r\n                </ng-template>\r\n              </div>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <ng-template kendoTreeListFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-treelist-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                  <kendo-treelist-filter-contains-operator></kendo-treelist-filter-contains-operator>\r\n                  <kendo-treelist-filter-eq-operator></kendo-treelist-filter-eq-operator>\r\n                  <kendo-treelist-filter-neq-operator></kendo-treelist-filter-neq-operator>\r\n                  <kendo-treelist-filter-startswith-operator></kendo-treelist-filter-startswith-operator>\r\n                  <kendo-treelist-filter-endswith-operator></kendo-treelist-filter-endswith-operator>\r\n                  <kendo-treelist-filter-isnull-operator></kendo-treelist-filter-isnull-operator>\r\n                  <kendo-treelist-filter-isnotnull-operator></kendo-treelist-filter-isnotnull-operator>\r\n                </kendo-treelist-string-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <ng-template kendoTreeListCellTemplate let-dataItem let-rowIndex=\"rowIndex\" let-cellContext=\"cellContext\">\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n                 (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n              <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'sfdatetimepicker'\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n                <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n              </span>\r\n              <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n                {{ dataItem[col.field] }}\r\n              </span>\r\n              <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n                <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n              </span>\r\n               <ng-container *ngIf=\"!col.gridCellReplaceValue\">\r\n                <span *ngSwitchDefault>\r\n                  <ng-container [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n                    <ng-container *ngSwitchCase=\"true\">\r\n                      <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n                        <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchDefault>\r\n                      <span class=\"grid-cell-data\">{{ dataItem[col.field] }}</span>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </span>\r\n              </ng-container>\r\n            </div>\r\n            <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n                 *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n                 [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\"  [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n              <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n                                    [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n                                    class=\"e1tag-style6\">\r\n              </app-zinput-container>\r\n            </div>\r\n            <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n              <ion-button color=\"light\" size=\"small\">\r\n                {{ dataItem[col.field] }}\r\n                <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n                <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n              </ion-button>\r\n            </span>\r\n          </ng-template>\r\n          <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n            <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n                 [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n              <span *ngSwitchCase=\"'number'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n                </b>\r\n              </span>\r\n              <span *ngSwitchCase=\"'currency'\">\r\n                <b>\r\n                  {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n                </b>\r\n              </span>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-column>\r\n        <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n                                       [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n          <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n            <div [ngClass]=\"col.class\">\r\n              <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n                      [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n                      [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n                <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n                </fa-icon>\r\n                <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n              </button>\r\n            </div>\r\n          </ng-template>\r\n        </kendo-treelist-command-column>\r\n      </ng-container>\r\n\r\n      <!-- <kendo-treelist-command-column width=\"140\">\r\n          <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n              <button [kendoTreeListAddCommand]=\"cellContext\"\r\n                      icon=\"filter-add-expression\" title=\"Add Child\">\r\n              </button>\r\n              <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n                      icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n              </button>\r\n          </ng-template>\r\n      </kendo-treelist-command-column> -->\r\n      </kendo-treelist>\r\n      <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".grid-container{margin-top:10px}.grid-container.style1{margin:10px;border:1px solid rgba(0,0,0,.08);border-radius:var(--ion-container-border-radius);padding:8px 20px 20px;background:#ffffff}.grid-container.align-with-input{margin:0 25px 0 10px}.rightAligned{text-align:right;display:table!important;margin:0 0 0 auto!important}.centerAligned{text-align:center;display:table!important;margin:0 auto!important}.ztree-inline-block{display:inline-block}.cellStyleConditionDefault{border-radius:5px;text-align:center}\n", ".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
@@ -15299,7 +15545,7 @@ class KcardComponent extends ContainerFieldBase {
     }
 }
 KcardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, deps: [{ token: ZComponentService }, { token: MainService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:var(--container-title-padding-top-and-bottom);padding-bottom:var(--container-title-padding-top-and-bottom)}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
+KcardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KcardComponent, selector: "app-kcard", usesInheritance: true, ngImport: i0, template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:var(--container-title-padding-top-and-bottom);padding-bottom:var(--container-title-padding-top-and-bottom)}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"], components: [{ type: i2$5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { type: i2$5.CardHeaderComponent, selector: "kendo-card-header" }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i2$5.CardBodyComponent, selector: "kendo-card-body" }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$5.CardTitleDirective, selector: "[kendoCardTitle]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KcardComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kcard", template: "<div class=\"kcard-container e1tag-container-style\"\r\n     *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-card [ngClass]=\"getClass(null, data)\" [style]=\"componentProperties.containerStyle.style1\"\r\n              [class]=\"data.ComponentStyleType\" class=\"e1tag-container-style1\">\r\n    <kendo-card-header class=\"k-hstack card-header e1tag-container-style2\" *ngIf=\"data.Icon || data.Title\"\r\n                       [style]=\"componentProperties.containerStyle.style2\">\r\n      <div kendoCardTitle class=\"card-header-content e1tag-container-style3\" [style]=\"componentProperties.containerStyle.style3\">\r\n        <div class=\"left-panel e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n          <fa-icon *ngIf=\"componentProperties.icon\" class=\"card-icon e1tag-container-style6\"\r\n                   [icon]=\"getFontAwesome(componentProperties.icon.toString(), fontAweSomeService)\"\r\n                   [style]=\"componentProperties.containerStyle.style6\"></fa-icon>\r\n          <ion-label *ngIf=\"componentProperties.title\" class=\"card-title e1tag-container-style7\"\r\n                     [style]=\"componentProperties.containerStyle.style7\">{{componentProperties.title}}</ion-label>\r\n        </div>\r\n        <div class=\"right-panel e1tag-container-style5\" *ngIf=\"data.EditButtonVisible\" [style]=\"componentProperties.containerStyle.style5\">\r\n          <div class=\"read-mode-btns\" *ngIf=\"!data['_EditMode'].value\">\r\n            <ion-button fill=\"outline\" size=\"default\" strong=\"true\" (click)=\"toggleEditMode()\">\r\n              <fa-icon icon=\"edit\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Edit')}}</span>\r\n            </ion-button>\r\n          </div>\r\n          <div class=\"edit-mode-btns\" *ngIf=\"data['_EditMode'].value\">\r\n            <ion-button fill=\"solid\" size=\"default\" strong=\"true\" (click)=\"saveData()\">\r\n              <fa-icon icon=\"check\"></fa-icon>\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Save')}}</span>\r\n            </ion-button>\r\n            <ion-button fill=\"clear\" size=\"small\" strong=\"false\" (click)=\"cancelEdit()\">\r\n              <span class=\"btn-label ion-text-capitalize\">{{getToolBarItemLabelName('Cancel')}}</span>\r\n            </ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <app-zdiv class=\"e1tag-container-style8\" [style]=\"componentProperties.containerStyle.style8\" [data]=\"data\"\r\n                [form]=\"myFormGroup ? myFormGroup : form\" [group]=\"group\">\r\n      </app-zdiv>\r\n\r\n      <!-- <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass :\r\n        ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n        *ngFor=\"let field of data.Value | divzlayout: data.zlayout\" [field]=\"field\" [group]=\"group\" [form]=\"form\"\r\n        id=\"{{field.Type}}-{{field.Name}}\">\r\n      </app-zformcontrol> -->\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-card{width:100%!important;margin:auto auto 10px;border-radius:var(--ion-container-border-radius);margin-top:var(--container-margin-top)}:host ::ng-deep kendo-card.left-border-primary{border-left:5px solid var(--ion-color-primary)}:host ::ng-deep kendo-card>.card-header{color:var(--ion-color-primary-shade);padding:0;padding-top:var(--container-title-padding-top-and-bottom);padding-bottom:var(--container-title-padding-top-and-bottom)}:host ::ng-deep kendo-card>.card-header>.card-header-content{display:flex;width:100%;font-size:var(--content-title-font-size)}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel{padding:12px 16px;flex-grow:1}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-icon{margin-right:15px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.left-panel>.card-title{font-weight:600}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel{margin:auto 5px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button{height:30px}:host ::ng-deep kendo-card>.card-header>.card-header-content>.right-panel ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-card .k-card-body{padding:5px 10px var(--container-padding-bottom) 5px}:host ::ng-deep kendo-card.body-padding-0 .k-card-body{padding:0}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel{padding:2px 10px}:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.left-panel>.card-title,:host ::ng-deep kendo-card.small-header>.card-header>.card-header-content>.right-panel>.card-title{font-size:.8em}.kcard-container{margin-left:5px}\n"] }]
@@ -15952,7 +16198,7 @@ class ZloopComponent extends ContainerFieldBase {
     }
 }
 ZloopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZloopComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZloopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZloopComponent, selector: "app-zloop", usesInheritance: true, ngImport: i0, template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+ZloopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ZloopComponent, selector: "app-zloop", usesInheritance: true, ngImport: i0, template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ZloopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-zloop', template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style zloop-container\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".zloop-container{display:flex}@media (min-width: 357px){.zloop-container>app-zformcontrol.col-xs-1{width:8.333%}.zloop-container>app-zformcontrol.col-xs-2{width:16.666%}.zloop-container>app-zformcontrol.col-xs-3{width:25%}.zloop-container>app-zformcontrol.col-xs-4{width:33.333%}.zloop-container>app-zformcontrol.col-xs-5{width:41.666%}.zloop-container>app-zformcontrol.col-xs-6{width:50%}.zloop-container>app-zformcontrol.col-xs-8{width:66.666%}.zloop-container>app-zformcontrol.col-xs-9{width:75%}.zloop-container>app-zformcontrol.col-xs-10{width:83.333%}.zloop-container>app-zformcontrol.col-xs-11{width:91.667%}.zloop-container>app-zformcontrol.col-xs-12{width:100%}}@media (min-width: 576px){.zloop-container>app-zformcontrol.col-sm-1{width:8.333%}.zloop-container>app-zformcontrol.col-sm-2{width:16.666%}.zloop-container>app-zformcontrol.col-sm-3{width:25%}.zloop-container>app-zformcontrol.col-sm-4{width:33.333%}.zloop-container>app-zformcontrol.col-sm-5{width:41.666%}.zloop-container>app-zformcontrol.col-sm-6{width:50%}.zloop-container>app-zformcontrol.col-sm-7{width:58.333%}.zloop-container>app-zformcontrol.col-sm-8{width:66.666%}.zloop-container>app-zformcontrol.col-sm-9{width:75%}.zloop-container>app-zformcontrol.col-sm-10{width:83.333%}.zloop-container>app-zformcontrol.col-sm-11{width:91.667%}.zloop-container>app-zformcontrol.col-sm-12{width:100%}}@media (min-width: 768px){.zloop-container>app-zformcontrol.col-1,.zloop-container>app-zformcontrol.col-md-1{width:8.333%}.zloop-container>app-zformcontrol.col-2,.zloop-container>app-zformcontrol.col-md-2{width:16.666%}.zloop-container>app-zformcontrol.col-3,.zloop-container>app-zformcontrol.col-md-3{width:25%}.zloop-container>app-zformcontrol.col-4,.zloop-container>app-zformcontrol.col-md-4{width:33.333%}.zloop-container>app-zformcontrol.col-5,.zloop-container>app-zformcontrol.col-md-5{width:41.666%}.zloop-container>app-zformcontrol.col-6,.zloop-container>app-zformcontrol.col-md-6{width:50%}.zloop-container>app-zformcontrol.col-7,.zloop-container>app-zformcontrol.col-md-7{width:58.333%}.zloop-container>app-zformcontrol.col-8,.zloop-container>app-zformcontrol.col-md-8{width:66.666%}.zloop-container>app-zformcontrol.col-9,.zloop-container>app-zformcontrol.col-md-9{width:75%}.zloop-container>app-zformcontrol.col-10,.zloop-container>app-zformcontrol.col-md-10{width:83.333%}.zloop-container>app-zformcontrol.col-11,.zloop-container>app-zformcontrol.col-md-11{width:91.667%}.zloop-container>app-zformcontrol.col-12,.zloop-container>app-zformcontrol.col-md-12{width:100%}}@media (min-width: 992px){.zloop-container>app-zformcontrol.col-lg-1{width:8.333%}.zloop-container>app-zformcontrol.col-lg-2{width:16.666%}.zloop-container>app-zformcontrol.col-lg-3{width:25%}.zloop-container>app-zformcontrol.col-lg-4{width:33.333%}.zloop-container>app-zformcontrol.col-lg-5{width:41.666%}.zloop-container>app-zformcontrol.col-lg-6{width:50%}.zloop-container>app-zformcontrol.col-lg-7{width:58.333%}.zloop-container>app-zformcontrol.col-lg-8{width:66.666%}.zloop-container>app-zformcontrol.col-lg-9{width:75%}.zloop-container>app-zformcontrol.col-lg-10{width:83.333%}.zloop-container>app-zformcontrol.col-lg-11{width:91.667%}.zloop-container>app-zformcontrol.col-lg-12{width:100%}}@media (min-width: 1200px){.zloop-container>app-zformcontrol.col-xl-1{width:8.333%}.zloop-container>app-zformcontrol.col-xl-2{width:16.666%}.zloop-container>app-zformcontrol.col-xl-3{width:25%}.zloop-container>app-zformcontrol.col-xl-4{width:33.333%}.zloop-container>app-zformcontrol.col-xl-5{width:41.666%}.zloop-container>app-zformcontrol.col-xl-6{width:50%}.zloop-container>app-zformcontrol.col-xl-7{width:58.333%}.zloop-container>app-zformcontrol.col-xl-8{width:66.666%}.zloop-container>app-zformcontrol.col-xl-9{width:75%}.zloop-container>app-zformcontrol.col-xl-10{width:83.333%}.zloop-container>app-zformcontrol.col-xl-11{width:91.667%}.zloop-container>app-zformcontrol.col-xl-12{width:100%}}\n"] }]
@@ -16005,7 +16251,7 @@ class KsplitterComponent extends ContainerFieldBase {
     }
 }
 KsplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KsplitterComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KsplitterComponent, selector: "app-ksplitter", viewQueries: [{ propertyName: "splitter", first: true, predicate: SplitterComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\" [collapsed]=\"item.isCollapse ?? false\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2$5.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2$5.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "panelAreaFilter": PanelAreaFilter } });
+KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KsplitterComponent, selector: "app-ksplitter", viewQueries: [{ propertyName: "splitter", first: true, predicate: SplitterComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\" [collapsed]=\"item.isCollapse ?? false\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i2$5.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i2$5.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "panelAreaFilter": PanelAreaFilter } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KsplitterComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-ksplitter", template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter #splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane  *ngFor=\"let item of data.PanelItems; let i = index\"\r\n      [resizable]=\"item.Resizable != undefined ? item.Resizable : true\"\r\n      [collapsible]=\"item.AllowCollapse != undefined ? item.AllowCollapse : true\" [size]=\"item.Size\"\r\n      class=\"e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2 + item.Style\"\r\n      [min]=\"item.MinWidth\" [max]=\"item.MaxWidth\" [collapsed]=\"item.isCollapse ?? false\"\r\n      (collapsedChange)=\"OnCollapse($event, item)\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | panelAreaFilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""] }]
@@ -16230,7 +16476,7 @@ class VirtualScrollComponent extends ContainerFieldBase {
     }
 }
 VirtualScrollComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: VirtualScrollComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: VirtualScrollComponent, selector: "app-virtual-scroll", viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && options.groupBy && (!dataItems[i-1] || dataItem[options.groupBy] !== dataItems[i-1][options.groupBy])\"\r\n          (click)=\"groupByOnClick(dataItem[options.groupBy])\" [class.groupby-collapsible]=\"options.isGroupByCollapsible\">\r\n          <fa-icon class=\"virtual-scroll-groupby-arrow-icon e1tag-container-style5\"\r\n            [style]=\"componentProperties.containerStyle.style5\" *ngIf=\"!!options.isGroupByCollapsible\"\r\n            [icon]=\"getFontAwesome('caret-down', fontAweSomeService)\"\r\n            [@rotateAnimation]=\"{value: collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'rotate' : 'default', params: {degree: -90}}\">\r\n          </fa-icon>\r\n          <span class=\"virtual-scroll-groupby-label e1tag-container-style6\"\r\n            [style]=\"componentProperties.containerStyle.style6\">\r\n            {{options.groupByLabelTemplate ? getGroupByLabelTemplate(dataItem, options) : dataItem[options.groupBy]}}\r\n          </span>\r\n        </div>\r\n        <div *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n          [class.virtual-scroll-item-selected]=\"!!dataItem.IsSelected\">\r\n          <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n          <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n        </div>\r\n        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n          [@collapseAnimation]=\"{value: !!options.groupBy && collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'collapse' : 'default'}\"\r\n          [class.groupby-value-expand]=\"groupByValueToExpand == (dataItem[options.groupBy])\"\r\n          [class.virtual-scroll-item-selected]=\"!!dataItem.IsSelected\">\r\n          <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n          <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n        </div>\r\n      </div>\r\n      <app-context-menu *ngIf=\"data.ContextMenuSettings\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerFields\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}.virtual-scroll-viewport .virtual-scroll-groupby{background:rgba(var(--ion-color-secondary-rgb),.1);font-weight:500;padding:12px 0 4px 12px;margin:1px}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible{cursor:pointer;display:grid;grid-template-columns:20px auto}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible:hover{background:rgba(var(--ion-color-secondary-rgb),.05)}.virtual-scroll-viewport .virtual-scroll-groupby>.virtual-scroll-groupby-arrow-icon{width:fit-content}.virtual-scroll-viewport .virtual-scroll-dataitem.groupby-value-expand{transform:translateY(-10%);opacity:.2}.virtual-scroll-dataitem.virtual-scroll-item-selected{background:var(--ion-color-primary-background)}\n"], components: [{ type: i3$b.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$b.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$b.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe }, animations: [
+VirtualScrollComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: VirtualScrollComponent, selector: "app-virtual-scroll", viewQueries: [{ propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"container e1tag-container-style\" [style]=\"componentProperties.containerStyle.style\"\r\n  [ngClass]=\"(data.ComponentStyleType || '') + ' ' + (data.Class || '')\">\r\n  <cdk-virtual-scroll-viewport\r\n        [itemSize]=\"options.itemSize\"\r\n        [style]=\"componentProperties.containerStyle.style1\"\r\n        class=\"virtual-scroll-viewport e1tag-container-style1\"\r\n        [minBufferPx]=\"options.minBufferPx\"\r\n        [maxBufferPx]=\"options.maxBufferPx\">\r\n    <ng-container *cdkVirtualFor=\"let dataItem of dataItems; let i = index\">\r\n      <div #virtualscrollcontent>\r\n        <div class=\"virtual-scroll-groupby e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\"\r\n          *ngIf=\"options.isGroupByEnabled && options.groupBy && (!dataItems[i-1] || dataItem[options.groupBy] !== dataItems[i-1][options.groupBy])\"\r\n          (click)=\"groupByOnClick(dataItem[options.groupBy])\" [class.groupby-collapsible]=\"options.isGroupByCollapsible\">\r\n          <fa-icon class=\"virtual-scroll-groupby-arrow-icon e1tag-container-style5\"\r\n            [style]=\"componentProperties.containerStyle.style5\" *ngIf=\"!!options.isGroupByCollapsible\"\r\n            [icon]=\"getFontAwesome('caret-down', fontAweSomeService)\"\r\n            [@rotateAnimation]=\"{value: collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'rotate' : 'default', params: {degree: -90}}\">\r\n          </fa-icon>\r\n          <span class=\"virtual-scroll-groupby-label e1tag-container-style6\"\r\n            [style]=\"componentProperties.containerStyle.style6\">\r\n            {{options.groupByLabelTemplate ? getGroupByLabelTemplate(dataItem, options) : dataItem[options.groupBy]}}\r\n          </span>\r\n        </div>\r\n        <div *ngIf=\"!options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n          [class.virtual-scroll-item-selected]=\"!!dataItem.IsSelected\">\r\n          <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n          <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n        </div>\r\n        <div *ngIf=\"options.isGroupByEnabled\" [style.height.px]=\"options.itemSize\"\r\n          [style.min-height.px]=\"options.itemSize\" [style.max-height.px]=\"options.itemSize\"\r\n          [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2 virtual-scroll-dataitem\"\r\n          (click)=\"onClick($event, dataItem)\" [id]=\"data.Name + '_' + dataItem?.Value?.Id || ''\"\r\n          [@collapseAnimation]=\"{value: !!options.groupBy && collapsedGroupBy.includes(dataItem[options.groupBy]) ? 'collapse' : 'default'}\"\r\n          [class.groupby-value-expand]=\"groupByValueToExpand == (dataItem[options.groupBy])\"\r\n          [class.virtual-scroll-item-selected]=\"!!dataItem.IsSelected\">\r\n          <div *ngIf=\"!dataItem\" [innerHTML]=\"options.loadingLabel | htmlSanitize\"></div>\r\n          <div *ngIf=\"dataItem.Label\" [innerHTML]=\"dataItem.Label | htmlSanitize\"></div>\r\n        </div>\r\n      </div>\r\n      <app-context-menu *ngIf=\"data.ContextMenuSettings\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [target]=\"virtualscrollcontent\" [selectedData]=\"dataItem\"></app-context-menu>\r\n    </ng-container>\r\n    <app-zformcontrol *ngFor=\"let field of footerFields\" [field]=\"field\" [containerField]=\"data\" [group]=\"group\"\r\n      [form]=\"form\" [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\">\r\n    </app-zformcontrol>\r\n  </cdk-virtual-scroll-viewport>\r\n</div>\r\n", styles: [".virtual-scroll-viewport{height:500px}.virtual-scroll-viewport .virtual-scroll-groupby{background:rgba(var(--ion-color-secondary-rgb),.1);font-weight:500;padding:12px 0 4px 12px;margin:1px}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible{cursor:pointer;display:grid;grid-template-columns:20px auto}.virtual-scroll-viewport .virtual-scroll-groupby.groupby-collapsible:hover{background:rgba(var(--ion-color-secondary-rgb),.05)}.virtual-scroll-viewport .virtual-scroll-groupby>.virtual-scroll-groupby-arrow-icon{width:fit-content}.virtual-scroll-viewport .virtual-scroll-dataitem.groupby-value-expand{transform:translateY(-10%);opacity:.2}.virtual-scroll-dataitem.virtual-scroll-item-selected{background:var(--ion-color-primary-background)}\n"], components: [{ type: i3$b.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$b.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$b.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "htmlSanitize": HtmlSanitizePipe }, animations: [
         collapseAnimation,
         rotateAnimation
     ] });
@@ -16259,7 +16505,7 @@ class SpinnerComponent extends FieldBase {
     }
 }
 SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SpinnerComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SpinnerComponent, selector: "app-spinner", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SpinnerComponent, selector: "app-spinner", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-spinner", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  class=\"loader e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\"></div>\r\n", styles: [".loader{animation:rotate 1s infinite;height:50px;width:50px;margin:auto;margin-top:10vh}.loader:before,.loader:after{border-radius:50%;content:\"\";display:block;height:20px;width:20px}.loader:before{animation:ball1 1s infinite;background-color:#38c22e;box-shadow:30px 0 #f37932;margin-bottom:10px}.loader:after{animation:ball2 1s infinite;background-color:#f26a1b;box-shadow:30px 0 #3db93d}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(.8);-moz-transform:rotate(0deg) scale(.8)}50%{-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2)}to{-webkit-transform:rotate(720deg) scale(.8);-moz-transform:rotate(720deg) scale(.8)}}@keyframes ball1{0%{box-shadow:30px 0 #f37932}50%{box-shadow:0 0 #f37932;margin-bottom:0;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #f37932;margin-bottom:10px}}@keyframes ball2{0%{box-shadow:30px 0 #3db93d}50%{box-shadow:0 0 #3db93d;margin-top:-20px;-webkit-transform:translate(15px,15px);-moz-transform:translate(15px,15px)}to{box-shadow:30px 0 #3db93d;margin-top:0}}\n", ".loader{margin-top:0}\n"] }]
@@ -16293,7 +16539,7 @@ class KmenuComponent extends ContainerFieldBase {
     }
 }
 KmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KmenuComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-KmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KmenuComponent, selector: "app-kmenu", usesInheritance: true, ngImport: i0, template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"], components: [{ type: i3$4.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$4.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }] });
+KmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KmenuComponent, selector: "app-kmenu", usesInheritance: true, ngImport: i0, template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"], components: [{ type: i3$4.MenuComponent, selector: "kendo-menu", inputs: ["menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$4.ItemTemplateDirective, selector: "[kendoMenuItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KmenuComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kmenu", template: "<div class=\"kmenu-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-menu [items]=\"menuItems\" class=\"menu-item-container e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\" (select)=\"onItemClick($event)\"\r\n    [vertical]=\"data['IsVertical'] ?? false\">\r\n    <ng-template kendoMenuItemTemplate let-item=\"item\">\r\n      <div class=\"menu-item-content e1tag-container-style2\"\r\n        [style]=\"componentProperties.containerStyle.style2 + ' ' + item.style2\">\r\n        <fa-icon *ngIf=\"!!item.faIcon\" [icon]=\"getFontAwesome(item.faIcon, fontAweSomeService)\"\r\n          [style]=\"componentProperties.containerStyle.style3 + ' ' + item.style3\"\r\n          class=\"e1tag-container-style3\"></fa-icon>\r\n        <span class=\"menu-item-label e1tag-container-style4\"\r\n          [style]=\"componentProperties.containerStyle.style4 + ' ' + item.style4\">{{item.label}}</span>\r\n        <ion-badge class=\"menu-item-counter e1tag-container-style5\" color=\"danger\" *ngIf=\"!!item.counter\"\r\n          [style]=\"componentProperties.containerStyle.style5 + ' ' + item.style5\">{{item.counter}}</ion-badge>\r\n      </div>\r\n    </ng-template>\r\n  </kendo-menu>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-menu .menu-item-content{gap:8px;display:flex}:host ::ng-deep kendo-menu .k-menu{font-size:16px}:host ::ng-deep kendo-menu .k-menu:not(.k-context-menu)>.k-item{color:var(--ion-color-primary)}\n"] }]
@@ -16361,7 +16607,7 @@ class KScrollViewComponent extends ContainerFieldBase {
     }
 }
 KScrollViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KScrollViewComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-KScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KScrollViewComponent, selector: "app-kscrollview", usesInheritance: true, ngImport: i0, template: "<div class=\"kscrollview-container\" [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n  *ngIf=\"!isLoading\">\r\n  <kendo-scrollview [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1 scrollview\"\r\n    [ngClass]=\"data.Class\" [data]=\"panelItems\" [arrows]=\"options.arrows\" [pageable]=\"options.pageAble\"\r\n    [endless]=\"options.endless\">\r\n    <ng-template let-item=\"item\">\r\n      <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\" (click)=\"onItemClick($event, item)\">\r\n        <div [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3 kscrollview-title\">\r\n          {{item.Label}}\r\n        </div>\r\n        <img [src]='item.SourceUrl' [alt]='item.Label' [style]=\"componentProperties.containerStyle.style4\"\r\n          class=\"e1tag-container-style4\" draggable=\"true\" />\r\n      </div>\r\n    </ng-template>\r\n  </kendo-scrollview>\r\n</div>\r\n", styles: [".k-scrollview-wrap{margin:0 auto}.kscrollview-title{position:absolute;top:0;left:0;right:0;margin:0;padding:8px 8px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.8),#cacaca78);text-align:center;font-size:16px}.scrollview{height:400px}.title-bottom .kscrollview-title{top:unset;bottom:0;background:linear-gradient(#cacaca78,rgba(0,0,0,.8));padding-bottom:15px;padding-top:10px}.show-title-when-hover .kscrollview-title{opacity:0;transition:opacity .5s}.show-title-when-hover:hover .kscrollview-title{opacity:1;transition:opacity .5s}\n"], components: [{ type: i2$c.ScrollViewComponent, selector: "kendo-scrollview", inputs: ["data", "activeIndex", "width", "height", "endless", "pagerOverlay", "animate", "pageable", "arrows"], outputs: ["itemChanged", "activeIndexChange"], exportAs: ["kendoScrollView"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+KScrollViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: KScrollViewComponent, selector: "app-kscrollview", usesInheritance: true, ngImport: i0, template: "<div class=\"kscrollview-container\" [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n  *ngIf=\"!isLoading\">\r\n  <kendo-scrollview [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1 scrollview\"\r\n    [ngClass]=\"data.Class\" [data]=\"panelItems\" [arrows]=\"options.arrows\" [pageable]=\"options.pageAble\"\r\n    [endless]=\"options.endless\">\r\n    <ng-template let-item=\"item\">\r\n      <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\" (click)=\"onItemClick($event, item)\">\r\n        <div [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3 kscrollview-title\">\r\n          {{item.Label}}\r\n        </div>\r\n        <img [src]='item.SourceUrl' [alt]='item.Label' [style]=\"componentProperties.containerStyle.style4\"\r\n          class=\"e1tag-container-style4\" draggable=\"true\" />\r\n      </div>\r\n    </ng-template>\r\n  </kendo-scrollview>\r\n</div>\r\n", styles: [".k-scrollview-wrap{margin:0 auto}.kscrollview-title{position:absolute;top:0;left:0;right:0;margin:0;padding:8px 8px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.8),#cacaca78);text-align:center;font-size:16px}.scrollview{height:400px}.title-bottom .kscrollview-title{top:unset;bottom:0;background:linear-gradient(#cacaca78,rgba(0,0,0,.8));padding-bottom:15px;padding-top:10px}.show-title-when-hover .kscrollview-title{opacity:0;transition:opacity .5s}.show-title-when-hover:hover .kscrollview-title{opacity:1;transition:opacity .5s}\n"], components: [{ type: i2$c.ScrollViewComponent, selector: "kendo-scrollview", inputs: ["data", "activeIndex", "width", "height", "endless", "pagerOverlay", "animate", "pageable", "arrows"], outputs: ["itemChanged", "activeIndexChange"], exportAs: ["kendoScrollView"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: KScrollViewComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-kscrollview", template: "<div class=\"kscrollview-container\" [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n  *ngIf=\"!isLoading\">\r\n  <kendo-scrollview [style]=\"componentProperties.containerStyle.style1\" class=\"e1tag-container-style1 scrollview\"\r\n    [ngClass]=\"data.Class\" [data]=\"panelItems\" [arrows]=\"options.arrows\" [pageable]=\"options.pageAble\"\r\n    [endless]=\"options.endless\">\r\n    <ng-template let-item=\"item\">\r\n      <div [style]=\"componentProperties.containerStyle.style2\" class=\"e1tag-container-style2\" (click)=\"onItemClick($event, item)\">\r\n        <div [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3 kscrollview-title\">\r\n          {{item.Label}}\r\n        </div>\r\n        <img [src]='item.SourceUrl' [alt]='item.Label' [style]=\"componentProperties.containerStyle.style4\"\r\n          class=\"e1tag-container-style4\" draggable=\"true\" />\r\n      </div>\r\n    </ng-template>\r\n  </kendo-scrollview>\r\n</div>\r\n", styles: [".k-scrollview-wrap{margin:0 auto}.kscrollview-title{position:absolute;top:0;left:0;right:0;margin:0;padding:8px 8px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.8),#cacaca78);text-align:center;font-size:16px}.scrollview{height:400px}.title-bottom .kscrollview-title{top:unset;bottom:0;background:linear-gradient(#cacaca78,rgba(0,0,0,.8));padding-bottom:15px;padding-top:10px}.show-title-when-hover .kscrollview-title{opacity:0;transition:opacity .5s}.show-title-when-hover:hover .kscrollview-title{opacity:1;transition:opacity .5s}\n"] }]
@@ -16648,7 +16894,7 @@ class DropDownButtonsComponent extends ButtonFieldBase {
     }
 }
 DropDownButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DropDownButtonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: DropDownButtonsComponent, selector: "app-dropdown_buttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\" [ngClass]=\"data.Class\">\r\n  <div class=\"dropdown-button-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" [size]=\"data.Size ?? 'medium'\" [fillMode]=\"data['Fill'] ?? 'solid'\" [ngClass]=\"data.Class\"\r\n      (itemClick)=\"buttonClick($event)\"\r\n      class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <div class=\"button-label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n        <fa-icon class=\"btn-icon e1tag-style4\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.Icon\"\r\n          [icon]=\"getFontAwesome(data.Icon, fontAweSomeService)\"></fa-icon>\r\n        <span class=\"ion-text-capitalize e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          *ngIf=\"data.Label && data.ShowLabel\">{{data.Label}}</span>\r\n      </div>\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <div class=\"button-content-container e1tag-style6\" [style]=\"componentProperties.style.style6 + ' ' + dataItem.style\">\r\n          <fa-icon class=\"btn-icon e1tag-style7\" [style]=\"componentProperties.style.style7\" *ngIf=\"dataItem.icon\" [icon]=\"dataItem.icon\"></fa-icon>\r\n          <span class=\"ion-text-capitalize e1tag-style8\" [style]=\"componentProperties.style.style8\"\r\n            *ngIf=\"dataItem.text && dataItem.showLabel\">{{dataItem.text}}</span>\r\n        </div>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n</div>\r\n", styles: [".button-content-container{display:flex;gap:5px}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-solid{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-primary);border-color:var(--ion-color-primary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-solid{background:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-secondary);border-color:var(--ion-color-secondary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-solid{background:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-tertiary);border-color:var(--ion-color-tertiary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-solid{background:var(--ion-color-success);color:var(--ion-color-success-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-success);border-color:var(--ion-color-success)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-solid{background:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-warning);border-color:var(--ion-color-warning)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-solid{background:var(--ion-color-danger);color:var(--ion-color-danger-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-danger);border-color:var(--ion-color-danger)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-solid{background:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-dark);border-color:var(--ion-color-dark)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-solid{background:var(--ion-color-medium);color:var(--ion-color-medium-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-medium);border-color:var(--ion-color-medium)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-solid{background:var(--ion-color-light);color:var(--ion-color-light-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-light);border-color:var(--ion-color-light)}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }] });
+DropDownButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: DropDownButtonsComponent, selector: "app-dropdown_buttons", usesInheritance: true, ngImport: i0, template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\" [ngClass]=\"data.Class\">\r\n  <div class=\"dropdown-button-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" [size]=\"data.Size ?? 'medium'\" [fillMode]=\"data['Fill'] ?? 'solid'\" [ngClass]=\"data.Class\"\r\n      (itemClick)=\"buttonClick($event)\"\r\n      class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <div class=\"button-label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n        <fa-icon class=\"btn-icon e1tag-style4\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.Icon\"\r\n          [icon]=\"getFontAwesome(data.Icon, fontAweSomeService)\"></fa-icon>\r\n        <span class=\"ion-text-capitalize e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          *ngIf=\"data.Label && data.ShowLabel\">{{data.Label}}</span>\r\n      </div>\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <div class=\"button-content-container e1tag-style6\" [style]=\"componentProperties.style.style6 + ' ' + dataItem.style\">\r\n          <fa-icon class=\"btn-icon e1tag-style7\" [style]=\"componentProperties.style.style7\" *ngIf=\"dataItem.icon\" [icon]=\"dataItem.icon\"></fa-icon>\r\n          <span class=\"ion-text-capitalize e1tag-style8\" [style]=\"componentProperties.style.style8\"\r\n            *ngIf=\"dataItem.text && dataItem.showLabel\">{{dataItem.text}}</span>\r\n        </div>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n</div>\r\n", styles: [".button-content-container{display:flex;gap:5px}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-solid{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-primary);border-color:var(--ion-color-primary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-solid{background:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-secondary);border-color:var(--ion-color-secondary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-solid{background:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-tertiary);border-color:var(--ion-color-tertiary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-solid{background:var(--ion-color-success);color:var(--ion-color-success-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-success);border-color:var(--ion-color-success)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-solid{background:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-warning);border-color:var(--ion-color-warning)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-solid{background:var(--ion-color-danger);color:var(--ion-color-danger-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-danger);border-color:var(--ion-color-danger)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-solid{background:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-dark);border-color:var(--ion-color-dark)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-solid{background:var(--ion-color-medium);color:var(--ion-color-medium-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-medium);border-color:var(--ion-color-medium)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-solid{background:var(--ion-color-light);color:var(--ion-color-light-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-light);border-color:var(--ion-color-light)}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: DropDownButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-dropdown_buttons", template: "<div\r\n  *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n  [style]=\"componentProperties.style.style\" class=\"e1tag-style\" [ngClass]=\"data.Class\">\r\n  <div class=\"dropdown-button-container e1tag-style1\" [style]=\"componentProperties.style.style1\">\r\n    <kendo-dropdownbutton [data]=\"items\" [size]=\"data.Size ?? 'medium'\" [fillMode]=\"data['Fill'] ?? 'solid'\" [ngClass]=\"data.Class\"\r\n      (itemClick)=\"buttonClick($event)\"\r\n      class=\"e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n      <div class=\"button-label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n        <fa-icon class=\"btn-icon e1tag-style4\" [style]=\"componentProperties.style.style4\" *ngIf=\"data.Icon\"\r\n          [icon]=\"getFontAwesome(data.Icon, fontAweSomeService)\"></fa-icon>\r\n        <span class=\"ion-text-capitalize e1tag-style5\" [style]=\"componentProperties.style.style5\"\r\n          *ngIf=\"data.Label && data.ShowLabel\">{{data.Label}}</span>\r\n      </div>\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <div class=\"button-content-container e1tag-style6\" [style]=\"componentProperties.style.style6 + ' ' + dataItem.style\">\r\n          <fa-icon class=\"btn-icon e1tag-style7\" [style]=\"componentProperties.style.style7\" *ngIf=\"dataItem.icon\" [icon]=\"dataItem.icon\"></fa-icon>\r\n          <span class=\"ion-text-capitalize e1tag-style8\" [style]=\"componentProperties.style.style8\"\r\n            *ngIf=\"dataItem.text && dataItem.showLabel\">{{dataItem.text}}</span>\r\n        </div>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n</div>\r\n", styles: [".button-content-container{display:flex;gap:5px}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-solid{background:var(--ion-color-primary);color:var(--ion-color-primary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-primary);border-color:var(--ion-color-primary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-solid{background:var(--ion-color-secondary);color:var(--ion-color-secondary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.secondary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-secondary);border-color:var(--ion-color-secondary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-solid{background:var(--ion-color-tertiary);color:var(--ion-color-tertiary-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.tertiary>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-tertiary);border-color:var(--ion-color-tertiary)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-solid{background:var(--ion-color-success);color:var(--ion-color-success-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.success>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-success);border-color:var(--ion-color-success)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-solid{background:var(--ion-color-warning);color:var(--ion-color-warning-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.warning>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-warning);border-color:var(--ion-color-warning)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-solid{background:var(--ion-color-danger);color:var(--ion-color-danger-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.danger>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-danger);border-color:var(--ion-color-danger)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-solid{background:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.dark>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-dark);border-color:var(--ion-color-dark)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-solid{background:var(--ion-color-medium);color:var(--ion-color-medium-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.medium>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-medium);border-color:var(--ion-color-medium)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-solid{background:var(--ion-color-light);color:var(--ion-color-light-contrast)}:host ::ng-deep kendo-dropdownbutton.k-dropdown-button.light>.k-button.k-button-outline{background:#ffffff;color:var(--ion-color-light);border-color:var(--ion-color-light)}\n"] }]