mmhglobal-dynamicform 2.28.0 → 2.28.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -0
- package/esm2020/lib/ficon/ficon.component.mjs +1 -1
- package/esm2020/lib/zbuttons/zbuttons.component.mjs +4 -3
- package/esm2020/lib/zgrid/zgrid.component.mjs +3 -3
- package/esm2020/lib/zinput-container/zinput-container.component.mjs +2 -2
- package/esm2020/lib/zselectmultiple/zselectmultiple.component.mjs +6 -1
- package/esm2020/lib/ztreelist/ztreelist.component.mjs +2 -2
- package/esm2020/lib/zworkflowbuttons/zworkflowbuttons.component.mjs +4 -3
- package/fesm2015/mmhglobal-dynamicform.mjs +19 -10
- package/fesm2015/mmhglobal-dynamicform.mjs.map +1 -1
- package/fesm2020/mmhglobal-dynamicform.mjs +17 -10
- package/fesm2020/mmhglobal-dynamicform.mjs.map +1 -1
- package/lib/zselectmultiple/zselectmultiple.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -5340,6 +5340,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
|
|
|
5340
5340
|
}
|
|
5341
5341
|
}
|
|
5342
5342
|
setupButtonAttributes(button) {
|
|
5343
|
+
var _a;
|
|
5343
5344
|
let comp = button;
|
|
5344
5345
|
if (button.Type == 'a') {
|
|
5345
5346
|
if (this.data.SubType) {
|
|
@@ -5354,6 +5355,7 @@ class ZbuttonsComponent extends ButtonFieldBase {
|
|
|
5354
5355
|
comp = {
|
|
5355
5356
|
name: button.Name,
|
|
5356
5357
|
text: label,
|
|
5358
|
+
showLabel: (_a = button.ShowLabel) !== null && _a !== void 0 ? _a : true,
|
|
5357
5359
|
style: button.Style,
|
|
5358
5360
|
icon: ZComponentHelper.getIcon(button.Icon),
|
|
5359
5361
|
visible: button.Visible,
|
|
@@ -5410,10 +5412,10 @@ class ZbuttonsComponent extends ButtonFieldBase {
|
|
|
5410
5412
|
}
|
|
5411
5413
|
}
|
|
5412
5414
|
ZbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.FontAweSomeService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5413
|
-
ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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\" [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\" [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", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5415
|
+
ZbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5414
5416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZbuttonsComponent, decorators: [{
|
|
5415
5417
|
type: Component,
|
|
5416
|
-
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\" [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\" [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"] }]
|
|
5418
|
+
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"] }]
|
|
5417
5419
|
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.FontAweSomeService }]; } });
|
|
5418
5420
|
|
|
5419
5421
|
/********** Angular **********/
|
|
@@ -6900,6 +6902,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
|
|
|
6900
6902
|
}), tap(resultData => {
|
|
6901
6903
|
if (resultData) {
|
|
6902
6904
|
resultData.forEach((button) => {
|
|
6905
|
+
var _a;
|
|
6903
6906
|
if (!button.Label) {
|
|
6904
6907
|
button.Label = button.Name;
|
|
6905
6908
|
}
|
|
@@ -6910,6 +6913,7 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
|
|
|
6910
6913
|
const btn = {
|
|
6911
6914
|
name: button.Name,
|
|
6912
6915
|
text: label,
|
|
6916
|
+
showLabel: (_a = button.ShowLabel) !== null && _a !== void 0 ? _a : true,
|
|
6913
6917
|
icon: ZComponentHelper.getIcon(attributes.Icon),
|
|
6914
6918
|
visible: attributes.Visible,
|
|
6915
6919
|
color: isUseCustomClass ? '' : (attributes.Color || 'primary'),
|
|
@@ -7034,10 +7038,10 @@ class ZworkflowbuttonsComponent extends ButtonFieldBase {
|
|
|
7034
7038
|
}
|
|
7035
7039
|
}
|
|
7036
7040
|
ZworkflowbuttonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZworkflowbuttonsComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i2.WebApiService }, { token: i2.ResourceApiService }, { token: i2.ComponentErrorHandlerService }, { token: i2.WorkflowService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7037
|
-
ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n [style]=\"componentProperties.style.style\">\r\n <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n Actions\r\n <ion-ripple-effect></ion-ripple-effect>\r\n </kendo-dropdownbutton>\r\n </div>\r\n\r\n <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n style=\"margin-right: 5px;\">\r\n {{item.text}}\r\n </button> -->\r\n <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n </ion-button>\r\n </div>\r\n <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n </ion-button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"], components: [{ type: i3$3.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7041
|
+
ZworkflowbuttonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons", usesInheritance: true, ngImport: i0, template: "<div class=\"e1tag-style\"\r\n *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n [style]=\"componentProperties.style.style\">\r\n <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n Actions\r\n <ion-ripple-effect></ion-ripple-effect>\r\n </kendo-dropdownbutton>\r\n </div>\r\n\r\n <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n style=\"margin-right: 5px;\">\r\n {{item.text}}\r\n </button> -->\r\n <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n <span *ngIf=\"item.text && 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", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7038
7042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZworkflowbuttonsComponent, decorators: [{
|
|
7039
7043
|
type: Component,
|
|
7040
|
-
args: [{ selector: 'app-zworkflowbuttons', template: "<div class=\"e1tag-style\"\r\n *ngIf=\"!group.isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\"\r\n [style]=\"componentProperties.style.style\">\r\n <div class=\"ion-margin-vertical e1tag-style1\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\" [style]=\"componentProperties.style.style1\">\r\n <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent e1tag-style2\" [style]=\"componentProperties.style.style2\">\r\n Actions\r\n <ion-ripple-effect></ion-ripple-effect>\r\n </kendo-dropdownbutton>\r\n </div>\r\n\r\n <div *ngIf=\"!isMobileScreen() || items.length === 1\" [ngClass]=\"data.DivClass\" class=\"btn-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"buttonClick(item.fieldAttribute)\"\r\n kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n style=\"margin-right: 5px;\">\r\n {{item.text}}\r\n </button> -->\r\n <div class=\"btn-left e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of leftBtns; let i = index\"\r\n [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n </ion-button>\r\n </div>\r\n <div class=\"btn-right e1tag-style6\" [style]=\"componentProperties.style.style6\">\r\n <ion-button [fill]=\"item.fill\" [size]=\"item.size\" [color]=\"item.color\" strong=\"true\" *ngFor=\"let item of rightBtns; let i = index\"\r\n [ngClass]=\"item.class\" (click)=\"buttonClick(item.fieldAttribute)\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n [disabled]=\"group.isTriggered\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n <fa-icon class=\"btn-icon\" *ngIf=\"item.icon\" [icon]=\"getFontAwesome(item.icon, fontAweSomeService)\"></fa-icon>\r\n <span *ngIf=\"item.text\" [class.btn-label]=\"item.icon\" class=\"ion-text-capitalize\">{{item.text}}</span>\r\n </ion-button>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".ripple-parent{position:relative;overflow:hidden}.btn-container{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}ion-button{font-size:var(--button-font-size);margin-left:10px;--border-radius: var(--button-border-radius);--box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, .25)}ion-button.useCustomClass{--background-hover-opacity: 1;--border-width: 2px;--border-style: solid;--background: #fff;--background-hover: rgba(var(--ion-color-primary-rgb), .05);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary-light{--background: rgba(var(--ion-color-primary-rgb), .05);--background-hover: #fff;--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}ion-button.primary{--background: var(--ion-color-primary);--background-hover: var(--ion-color-primary-tint);--color: var(--ion-color-primary-contrast);--border-color: var(--ion-color-primary-shade)}ion-button.success{--background: var(--ion-color-success);--background-hover: var(--ion-color-success-tint);--color: var(--ion-color-success-contrast);--border-color: var(--ion-color-success-shade)}ion-button.danger{--background: var(--ion-color-danger);--background-hover: var(--ion-color-danger-tint2);--color: var(--ion-color-danger-contrast);--border-color: var(--ion-color-danger-shade)}ion-button.warning{--background: var(--ion-color-warning);--background-hover: var(--ion-color-warning-tint);--color: #000;--border-color: var(--ion-color-warning-shade)}ion-button.no-shadow{--box-shadow: none}.btn-label{padding-left:8px}\n"] }]
|
|
7044
|
+
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"] }]
|
|
7041
7045
|
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i2.WebApiService }, { type: i2.ResourceApiService }, { type: i2.ComponentErrorHandlerService }, { type: i2.WorkflowService }]; } });
|
|
7042
7046
|
|
|
7043
7047
|
/********** Angular **********/
|
|
@@ -7546,6 +7550,11 @@ class ZselectmultipleComponent extends InputFieldBase {
|
|
|
7546
7550
|
return; // Early return to avoid unnecessary checks
|
|
7547
7551
|
}
|
|
7548
7552
|
}
|
|
7553
|
+
resetInfiniteData() {
|
|
7554
|
+
ZComponentHelper.cancelGetInfiniteData;
|
|
7555
|
+
this.infiniteDataLoaded = false;
|
|
7556
|
+
this.infinitezData = [];
|
|
7557
|
+
}
|
|
7549
7558
|
handleClose(event) {
|
|
7550
7559
|
}
|
|
7551
7560
|
handleBlur() {
|
|
@@ -8957,10 +8966,10 @@ class ZInputContainerComponent extends FieldBase {
|
|
|
8957
8966
|
}
|
|
8958
8967
|
}
|
|
8959
8968
|
ZInputContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8960
|
-
ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n [style]=\"componentProperties.containerStyle.style\">\r\n <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [style]=\"componentProperties.containerStyle.style2\">\r\n {{componentProperties.label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\" class=\"required-icon\">*</ion-text>\r\n </ion-label>\r\n <div class=\"input-value-field\">\r\n <div class=\"input-fields-options\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </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 <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </kendo-label>\r\n <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n [style]=\"componentProperties.containerStyle.style3\">\r\n <!-- TODO: Add 1 more layer for this switch case-->\r\n <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </div>\r\n <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </div>\r\n <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n [style]=\"componentProperties.containerStyle.style6\"\r\n [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n </div>\r\n <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}.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:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.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: 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: InputErrorMessageComponent, selector: "app-error" }, { type: i15.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i5.AsyncPipe, "inputText": ZInputParser } });
|
|
8969
|
+
ZInputContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZInputContainerComponent, selector: "app-zinput-container", usesInheritance: true, ngImport: i0, template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n [style]=\"componentProperties.containerStyle.style\">\r\n <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [style]=\"componentProperties.containerStyle.style2\">\r\n {{componentProperties.label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\" class=\"required-icon\">*</ion-text>\r\n </ion-label>\r\n <div class=\"input-value-field\">\r\n <div class=\"input-fields-options\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </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 <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </kendo-label>\r\n <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n [style]=\"componentProperties.containerStyle.style3\">\r\n <!-- TODO: Add 1 more layer for this switch case-->\r\n <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </div>\r\n <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </div>\r\n <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n [style]=\"componentProperties.containerStyle.style6\"\r\n [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n </div>\r\n <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:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.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: 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: InputErrorMessageComponent, selector: "app-error" }, { type: i15.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i5$2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i5.AsyncPipe, "inputText": ZInputParser } });
|
|
8961
8970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZInputContainerComponent, decorators: [{
|
|
8962
8971
|
type: Component,
|
|
8963
|
-
args: [{ selector: "app-zinput-container", template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n [style]=\"componentProperties.containerStyle.style\">\r\n <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [style]=\"componentProperties.containerStyle.style2\">\r\n {{componentProperties.label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\" class=\"required-icon\">*</ion-text>\r\n </ion-label>\r\n <div class=\"input-value-field\">\r\n <div class=\"input-fields-options\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </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 <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </kendo-label>\r\n <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n [style]=\"componentProperties.containerStyle.style3\">\r\n <!-- TODO: Add 1 more layer for this switch case-->\r\n <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </div>\r\n <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </div>\r\n <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n [style]=\"componentProperties.containerStyle.style6\"\r\n [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n </div>\r\n <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}.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:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.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"] }]
|
|
8972
|
+
args: [{ selector: "app-zinput-container", template: "<div class=\"mobile-input-container e1tag-container-style\" *ngIf=\"isMobileScreen() && !isLoading\"\r\n [style]=\"componentProperties.containerStyle.style\">\r\n <ion-item [formGroup]=\"form\" class=\"e1tag-container-style1\"\r\n *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n [ngClass]=\"getIon_InvalidClass(form, data)\" [style]=\"componentProperties.containerStyle.style1\">\r\n <ion-label [attr.for]=\"data.Value\" class=\"input-label e1tag-container-style2\"\r\n *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n [style]=\"componentProperties.containerStyle.style2\">\r\n {{componentProperties.label}}\r\n <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n color=\"danger\" class=\"required-icon\">*</ion-text>\r\n </ion-label>\r\n <div class=\"input-value-field\">\r\n <div class=\"input-fields-options\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </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 <app-input-field-addons class=\"addon-top e1tag-container-style7\" [position]=\"'top'\" [addOn]=\"inputFieldAddOn.top\"\r\n [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </kendo-label>\r\n <div class=\"input-value-container e1tag-container-style2\" [style]=\"componentProperties.containerStyle.style2\"\r\n [fxFlex]=\"componentProperties.fieldFlexLayoutSize.all\" [fxFlex.xs]=\"componentProperties.fieldFlexLayoutSize.xs\"\r\n [fxFlex.sm]=\"componentProperties.fieldFlexLayoutSize.sm\" [fxFlex.md]=\"componentProperties.fieldFlexLayoutSize.md\"\r\n [fxFlex.lg]=\"componentProperties.fieldFlexLayoutSize.lg\" [fxFlex.xl]=\"componentProperties.fieldFlexLayoutSize.xl\">\r\n <div *ngIf=\"data['_EditMode'].value\" class=\"input-value-field e1tag-container-style3\"\r\n [style]=\"componentProperties.containerStyle.style3\">\r\n <!-- TODO: Add 1 more layer for this switch case-->\r\n <app-input-field-addons class=\"addon-left e1tag-container-style7\" [position]=\"'left'\"\r\n [addOn]=\"inputFieldAddOn.left\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <div class=\"input-fields-options e1tag-container-style4\" [style]=\"componentProperties.containerStyle.style4\">\r\n <app-ztext *ngIf=\"ztext_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztext>\r\n <app-zselectmultiple *ngIf=\"zselect_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zselectmultiple>\r\n <app-zdatetime *ngIf=\"zdate_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zdatetime>\r\n <app-zpostselectinput *ngIf=\"zpostselectinput_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\"\r\n [form]=\"form\" [containerField]=\"containerField\" [componentProperties]=\"componentProperties\"\r\n class=\"e1tag-container-style5\" [style]=\"componentProperties.containerStyle.style5\"\r\n (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zpostselectinput>\r\n <app-zcheckbox *ngIf=\"zcheckbox_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zcheckbox>\r\n <app-znumeric *ngIf=\"znumeric_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-znumeric>\r\n <app-ztextarea *ngIf=\"textarea_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztextarea>\r\n <app-zupload *ngIf=\"zupload_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zupload>\r\n <app-zimg *ngIf=\"zimg_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-zimg>\r\n <app-ztexteditor *ngIf=\"ztexteditor_type.includes(data.Type)\" [data]=\"data\" [group]=\"group\" [form]=\"form\"\r\n [containerField]=\"containerField\" [componentProperties]=\"componentProperties\" class=\"e1tag-container-style5\"\r\n [style]=\"componentProperties.containerStyle.style5\" (triggerContainerEvent)=\"triggerContainerEvent($event)\">\r\n </app-ztexteditor>\r\n <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 </div>\r\n <app-input-field-addons class=\"addon-right e1tag-container-style7\" [position]=\"'right'\"\r\n [addOn]=\"inputFieldAddOn.right\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n </div>\r\n <app-input-field-addons class=\"addon-bottom e1tag-container-style7\" [position]=\"'bottom'\"\r\n [addOn]=\"inputFieldAddOn.bottom\" [data]=\"data\" [group]=\"group\" [form]=\"form\" [containerField]=\"containerField\"\r\n [componentProperties]=\"componentProperties\" [style]=\"componentProperties.containerStyle.style7\">\r\n </app-input-field-addons>\r\n <app-error [data]=\"data\" [group]=\"group\" [form]=\"form\"></app-error>\r\n <kendo-label class=\"input-value e1tag-container-style6\" *ngIf=\"!(data['_EditMode'].value)\"\r\n [style]=\"componentProperties.containerStyle.style6\"\r\n [text]=\"group.zModel[data.Value] | inputText : data: group | async\"></kendo-label>\r\n </div>\r\n <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:600;margin-top:3px}.desktop-input-container.style1 .input-value-container{margin-left:0;padding-right:25px}.desktop-input-container.style1 .input-label{margin:3px 0}.desktop-input-container.style2 .input-value-container{width:100%;margin-top:3px;padding:0 25px 0 20px}.desktop-input-container.style2 .input-label{margin-top:0}.desktop-input-container .addon-right{margin:auto 0;padding-bottom:4px}.desktop-input-container.editMode.style1 .input-label{margin:6px 0 0}.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"] }]
|
|
8964
8973
|
}], ctorParameters: function () { return [{ type: ZComponentService }]; } });
|
|
8965
8974
|
|
|
8966
8975
|
/********** Angular **********/
|
|
@@ -9948,14 +9957,14 @@ class ZgridComponent extends DataListingFieldBase {
|
|
|
9948
9957
|
}
|
|
9949
9958
|
}
|
|
9950
9959
|
ZgridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridComponent, deps: [{ token: ZComponentService }, { token: i2.FontAweSomeService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i4$1.FormBuilder }, { token: i2.WebApiService }, { token: i2.ToastService }, { token: i2.ZCoreService }, { token: i2.StorageSessionService }, { token: MainService }, { token: i0.ChangeDetectorRef }, { token: ZGridService }, { token: i2.OfflineDatabaseService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9951
|
-
ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n <div class=\"card\">\r\n <div class=\"card-block k-form\">\r\n <fieldset>\r\n <legend>Binding types</legend>\r\n <div class=\"k-form-field\">\r\n <span>Bind the data to:</span>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n </div>\r\n </fieldset>\r\n </div>\r\n </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n </ng-template> -->\r\n <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n </ng-template>\r\n </kendo-popover>\r\n\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n [pageable]=\"pageable\"\r\n [class.hiden-pager]=\"!pageable\"\r\n [pageSize]=\"gridSetting.gridState.take\"\r\n [skip]=\"gridSetting.gridState.skip\"\r\n [sort]=\"gridSetting.gridState.sort\"\r\n [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n [filter]=\"gridSetting.gridState.filter\"\r\n [filterable]=\"data.enableFiltering !== false\"\r\n [resizable]=\"true\"\r\n [reorderable]=\"true\"\r\n [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n (cellClose)=\"editCellCloseHandler($event)\"\r\n (dataStateChange)=\"dataStateChange($event)\"\r\n (pageChange)=\"pageChange($event)\"\r\n (sortChange)=\"sortChange($event)\"\r\n (filterChange)=\"filterChange($event)\"\r\n [kendoGridSelectBy]=\"rowSelectionKey\"\r\n [selectable]=\"selectableSettings\"\r\n [(selectedKeys)]=\"mySelection\"\r\n [style]=\"componentProperties.style.style2\"\r\n [trackBy]=\"trackBy\"\r\n (cancel)=\"cancelHandler($event)\"\r\n (save)=\"saveHandler($event)\"\r\n (remove)=\"removeHandler($event)\"\r\n (edit)=\"editHandler($event)\"\r\n (add)=\"addHandler($event)\"\r\n (columnResize)=\"adjustWidthUponResize()\"\r\n [rowClass]=\"rowCallback.bind(this)\">\r\n <ng-template kendoGridToolbarTemplate\r\n *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n *ngIf=\"data.AllowRefreshButton\">\r\n <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n </button>\r\n <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\">\r\n <button type=\"button\" class=\"left-buttons\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n <fa-icon icon=\"download\"></fa-icon>\r\n <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n </button>\r\n <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n </button>\r\n </div>\r\n <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n <div class=\"normal-filter-container\">\r\n <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n <fa-icon icon=\"search\"></fa-icon>\r\n <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n </ion-button>\r\n <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </ion-button>\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n <fa-icon icon=\"sliders-h\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n <div class=\"adv-filter-seperator\">\r\n <span>\r\n {{ getToolBarItemLabelName('Advanced Search') }}\r\n </span>\r\n </div>\r\n <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n </kendo-grid-checkbox-column>\r\n <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n [editor]=\"col.editorType\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'ztime'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"lte\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n </kendo-grid-boolean-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"contains\">\r\n <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- Grid Edit Template -->\r\n <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n <div [ngSwitch]=\"col.fieldType\">\r\n <div *ngSwitchCase=\"'number'\">\r\n <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n <kendo-popup [anchor]=\"cellAnchor.input\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n -l\r\n\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n </div>\r\n <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n <span *ngSwitchCase=true>\r\n <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </div>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </span>\r\n </div>\r\n </span>\r\n </div>\r\n <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ col.ClickableIcons }}\r\n <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n </ion-button>\r\n </span> -->\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n : true;\r\n else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n </fa-icon>\r\n </span>\r\n <ng-template #disabledButton>\r\n </ng-template>\r\n </span>\r\n <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n </span> -->\r\n </ng-template>\r\n <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n {{col.aggregateType}}\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\">\r\n {{ col.aggregateValue | date: 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n {{ col.aggregateValue | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n {{ col.aggregateValue | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ col.aggregateValue }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ col.aggregateValue }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n <button kendoGridSaveCommand>\r\n {{ isNew ? 'Save' : 'Update' }}\r\n </button>\r\n <button kendoGridCancelCommand [primary]=\"true\">\r\n {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n </button>\r\n <button kendoGridEditCommand>\r\n {{ \"Edit\" }}\r\n </button>\r\n <button kendoGridRemoveCommand>\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n </kendo-grid>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n </div>\r\n </div>\r\n <!-- for DEC auto scrolling -->\r\n <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px;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 .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{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>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$2.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$2.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridCancelCommand], [kendoGridSelectionCheckbox] ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5.DatePipe, "number": i5.DecimalPipe }, animations: [
|
|
9960
|
+
ZgridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZgridComponent, selector: "app-zgrid", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }, { propertyName: "elementContainer", first: true, predicate: ElementContainerDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\r\n<div style=\"margin: 10px\">\r\n <div class=\"card\">\r\n <div class=\"card-block k-form\">\r\n <fieldset>\r\n <legend>Binding types</legend>\r\n <div class=\"k-form-field\">\r\n <span>Bind the data to:</span>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n </div>\r\n </fieldset>\r\n </div>\r\n </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n </ng-template> -->\r\n <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n </ng-template>\r\n </kendo-popover>\r\n\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n [pageable]=\"pageable\"\r\n [class.hiden-pager]=\"!pageable\"\r\n [pageSize]=\"gridSetting.gridState.take\"\r\n [skip]=\"gridSetting.gridState.skip\"\r\n [sort]=\"gridSetting.gridState.sort\"\r\n [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n [filter]=\"gridSetting.gridState.filter\"\r\n [filterable]=\"data.enableFiltering !== false\"\r\n [resizable]=\"true\"\r\n [reorderable]=\"true\"\r\n [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n (cellClose)=\"editCellCloseHandler($event)\"\r\n (dataStateChange)=\"dataStateChange($event)\"\r\n (pageChange)=\"pageChange($event)\"\r\n (sortChange)=\"sortChange($event)\"\r\n (filterChange)=\"filterChange($event)\"\r\n [kendoGridSelectBy]=\"rowSelectionKey\"\r\n [selectable]=\"selectableSettings\"\r\n [(selectedKeys)]=\"mySelection\"\r\n [style]=\"componentProperties.style.style2\"\r\n [trackBy]=\"trackBy\"\r\n (cancel)=\"cancelHandler($event)\"\r\n (save)=\"saveHandler($event)\"\r\n (remove)=\"removeHandler($event)\"\r\n (edit)=\"editHandler($event)\"\r\n (add)=\"addHandler($event)\"\r\n (columnResize)=\"adjustWidthUponResize()\"\r\n [rowClass]=\"rowCallback.bind(this)\">\r\n <ng-template kendoGridToolbarTemplate\r\n *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n *ngIf=\"data.AllowRefreshButton\">\r\n <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n </button>\r\n <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n <fa-icon icon=\"download\"></fa-icon>\r\n <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n </button>\r\n <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n </button>\r\n </div>\r\n <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n <div class=\"normal-filter-container\">\r\n <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n <fa-icon icon=\"search\"></fa-icon>\r\n <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n </ion-button>\r\n <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </ion-button>\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n <fa-icon icon=\"sliders-h\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n <div class=\"adv-filter-seperator\">\r\n <span>\r\n {{ getToolBarItemLabelName('Advanced Search') }}\r\n </span>\r\n </div>\r\n <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n </kendo-grid-checkbox-column>\r\n <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n [editor]=\"col.editorType\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'ztime'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"lte\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n </kendo-grid-boolean-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"contains\">\r\n <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- Grid Edit Template -->\r\n <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n <div [ngSwitch]=\"col.fieldType\">\r\n <div *ngSwitchCase=\"'number'\">\r\n <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n <kendo-popup [anchor]=\"cellAnchor.input\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n -l\r\n\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n </div>\r\n <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n <span *ngSwitchCase=true>\r\n <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </div>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </span>\r\n </div>\r\n </span>\r\n </div>\r\n <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ col.ClickableIcons }}\r\n <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n </ion-button>\r\n </span> -->\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n : true;\r\n else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n </fa-icon>\r\n </span>\r\n <ng-template #disabledButton>\r\n </ng-template>\r\n </span>\r\n <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n </span> -->\r\n </ng-template>\r\n <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n {{col.aggregateType}}\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n {{ col.aggregateValue | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n {{ col.aggregateValue | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ col.aggregateValue }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ col.aggregateValue }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n <button kendoGridSaveCommand>\r\n {{ isNew ? 'Save' : 'Update' }}\r\n </button>\r\n <button kendoGridCancelCommand [primary]=\"true\">\r\n {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n </button>\r\n <button kendoGridEditCommand>\r\n {{ \"Edit\" }}\r\n </button>\r\n <button kendoGridRemoveCommand>\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n </kendo-grid>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n </div>\r\n </div>\r\n <!-- for DEC auto scrolling -->\r\n <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"], components: [{ type: i7$2.PopoverComponent, selector: "kendo-popover", inputs: ["position", "offset", "width", "height", "title", "subtitle", "body", "callout", "animation", "templateData"], outputs: ["show", "shown", "hide", "hidden"] }, { type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: ZformComponent, selector: "app-zform", inputs: ["group", "fieldName"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i8.CheckboxColumnComponent, selector: "kendo-grid-checkbox-column", inputs: ["showSelectAll"] }, { type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { type: i8.NumericFilterCellComponent, selector: "kendo-grid-numeric-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.EqualFilterOperatorComponent, selector: "kendo-filter-eq-operator" }, { type: i8.NotEqualFilterOperatorComponent, selector: "kendo-filter-neq-operator" }, { type: i8.LessFilterOperatorComponent, selector: "kendo-filter-lt-operator" }, { type: i8.LessOrEqualToFilterOperatorComponent, selector: "kendo-filter-lte-operator" }, { type: i8.GreaterFilterOperatorComponent, selector: "kendo-filter-gt-operator" }, { type: i8.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-filter-gte-operator" }, { type: i8.IsNullFilterOperatorComponent, selector: "kendo-filter-isnull-operator" }, { type: i8.IsNotNullFilterOperatorComponent, selector: "kendo-filter-isnotnull-operator" }, { type: DateRangeFilterCellComponent, selector: "date-range-filter-cell", inputs: ["filter", "field", "data"] }, { type: i8.DateFilterCellComponent, selector: "kendo-grid-date-filter-cell", inputs: ["showOperators"] }, { type: i8.BooleanFilterCellComponent, selector: "kendo-grid-boolean-filter-cell" }, { type: i8.StringFilterCellComponent, selector: "kendo-grid-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i8.ContainsFilterOperatorComponent, selector: "kendo-filter-contains-operator" }, { type: i8.StartsWithFilterOperatorComponent, selector: "kendo-filter-startswith-operator" }, { type: i8.EndsWithFilterOperatorComponent, selector: "kendo-filter-endswith-operator" }, { type: i3$5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i2$4.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i3$5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: ZInputContainerComponent, selector: "app-zinput-container" }, { type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { type: i8.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.PopoverBodyTemplateDirective, selector: "[kendoPopoverBodyTemplate]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i7$2.PopoverContainerDirective, selector: "[kendoPopoverContainer]", inputs: ["filter"], exportAs: ["kendoPopoverContainer"] }, { type: ZGridBindingDirective, selector: "[zgridbinding]", inputs: ["zgridbinding"] }, { type: i8.SelectionDirective, selector: "[kendoGridSelectBy]" }, { type: i8.ToolbarTemplateDirective, selector: "[kendoGridToolbarTemplate]", inputs: ["position"] }, { type: i3$3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i8.ExcelCommandDirective, selector: "[kendoGridExcelCommand]" }, { type: i8.AddCommandDirective, selector: "[kendoGridAddCommand]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i8.EditTemplateDirective, selector: "[kendoGridEditTemplate]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { type: i8.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable], [kendoGridEditCommand], [kendoGridRemoveCommand], [kendoGridSaveCommand], [kendoGridCancelCommand], [kendoGridSelectionCheckbox] ", inputs: ["kendoGridFocusable"] }, { type: i8.SaveCommandDirective, selector: "[kendoGridSaveCommand]" }, { type: i8.CancelCommandDirective, selector: "[kendoGridCancelCommand]" }, { type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }], pipes: { "htmlSanitize": HtmlSanitizePipe, "date": i5.DatePipe, "number": i5.DecimalPipe }, animations: [
|
|
9952
9961
|
hideAndShowVerticalAnimation
|
|
9953
9962
|
] });
|
|
9954
9963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZgridComponent, decorators: [{
|
|
9955
9964
|
type: Component,
|
|
9956
9965
|
args: [{ selector: "app-zgrid", animations: [
|
|
9957
9966
|
hideAndShowVerticalAnimation
|
|
9958
|
-
], template: "<!--\r\n<div style=\"margin: 10px\">\r\n <div class=\"card\">\r\n <div class=\"card-block k-form\">\r\n <fieldset>\r\n <legend>Binding types</legend>\r\n <div class=\"k-form-field\">\r\n <span>Bind the data to:</span>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n </div>\r\n </fieldset>\r\n </div>\r\n </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n </ng-template> -->\r\n <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n </ng-template>\r\n </kendo-popover>\r\n\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n [pageable]=\"pageable\"\r\n [class.hiden-pager]=\"!pageable\"\r\n [pageSize]=\"gridSetting.gridState.take\"\r\n [skip]=\"gridSetting.gridState.skip\"\r\n [sort]=\"gridSetting.gridState.sort\"\r\n [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n [filter]=\"gridSetting.gridState.filter\"\r\n [filterable]=\"data.enableFiltering !== false\"\r\n [resizable]=\"true\"\r\n [reorderable]=\"true\"\r\n [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n (cellClose)=\"editCellCloseHandler($event)\"\r\n (dataStateChange)=\"dataStateChange($event)\"\r\n (pageChange)=\"pageChange($event)\"\r\n (sortChange)=\"sortChange($event)\"\r\n (filterChange)=\"filterChange($event)\"\r\n [kendoGridSelectBy]=\"rowSelectionKey\"\r\n [selectable]=\"selectableSettings\"\r\n [(selectedKeys)]=\"mySelection\"\r\n [style]=\"componentProperties.style.style2\"\r\n [trackBy]=\"trackBy\"\r\n (cancel)=\"cancelHandler($event)\"\r\n (save)=\"saveHandler($event)\"\r\n (remove)=\"removeHandler($event)\"\r\n (edit)=\"editHandler($event)\"\r\n (add)=\"addHandler($event)\"\r\n (columnResize)=\"adjustWidthUponResize()\"\r\n [rowClass]=\"rowCallback.bind(this)\">\r\n <ng-template kendoGridToolbarTemplate\r\n *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n *ngIf=\"data.AllowRefreshButton\">\r\n <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n </button>\r\n <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\">\r\n <button type=\"button\" class=\"left-buttons\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n <fa-icon icon=\"download\"></fa-icon>\r\n <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n </button>\r\n <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n </button>\r\n </div>\r\n <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n <div class=\"normal-filter-container\">\r\n <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n <fa-icon icon=\"search\"></fa-icon>\r\n <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n </ion-button>\r\n <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </ion-button>\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n <fa-icon icon=\"sliders-h\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n <div class=\"adv-filter-seperator\">\r\n <span>\r\n {{ getToolBarItemLabelName('Advanced Search') }}\r\n </span>\r\n </div>\r\n <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n </kendo-grid-checkbox-column>\r\n <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n [editor]=\"col.editorType\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'ztime'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"lte\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n </kendo-grid-boolean-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"contains\">\r\n <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- Grid Edit Template -->\r\n <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n <div [ngSwitch]=\"col.fieldType\">\r\n <div *ngSwitchCase=\"'number'\">\r\n <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n <kendo-popup [anchor]=\"cellAnchor.input\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n -l\r\n\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n </div>\r\n <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n <span *ngSwitchCase=true>\r\n <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </div>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </span>\r\n </div>\r\n </span>\r\n </div>\r\n <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ col.ClickableIcons }}\r\n <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n </ion-button>\r\n </span> -->\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n : true;\r\n else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n </fa-icon>\r\n </span>\r\n <ng-template #disabledButton>\r\n </ng-template>\r\n </span>\r\n <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n </span> -->\r\n </ng-template>\r\n <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n {{col.aggregateType}}\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\">\r\n {{ col.aggregateValue | date: 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n {{ col.aggregateValue | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n {{ col.aggregateValue | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ col.aggregateValue }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ col.aggregateValue }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n <button kendoGridSaveCommand>\r\n {{ isNew ? 'Save' : 'Update' }}\r\n </button>\r\n <button kendoGridCancelCommand [primary]=\"true\">\r\n {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n </button>\r\n <button kendoGridEditCommand>\r\n {{ \"Edit\" }}\r\n </button>\r\n <button kendoGridRemoveCommand>\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n </kendo-grid>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n </div>\r\n </div>\r\n <!-- for DEC auto scrolling -->\r\n <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px;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 .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{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>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background: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"] }]
|
|
9967
|
+
], template: "<!--\r\n<div style=\"margin: 10px\">\r\n <div class=\"card\">\r\n <div class=\"card-block k-form\">\r\n <fieldset>\r\n <legend>Binding types</legend>\r\n <div class=\"k-form-field\">\r\n <span>Bind the data to:</span>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n (change)=\"changeBindingType($event)\">\r\n <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n </div>\r\n </fieldset>\r\n </div>\r\n </div>\r\n</div> -->\r\n<div class=\"grid-container e1tag-style\" [ngClass]=\"data.Class\" [style]=\"componentProperties.style.style\">\r\n\r\n <!-- <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div> -->\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <kendo-popover #gridPopOver [position]=\"data.PopOverPosition || 'bottom'\" [templateData]=\"getContextData.bind(this)\">\r\n <!-- <ng-template kendoPopoverTitleTemplate let-data=\"data\" >\r\n <div [style]=\"data.TitleStyle\" *ngIf=\"data && data.Title\" [innerHTML]=\"data.Title\"></div>\r\n </ng-template> -->\r\n <ng-template kendoPopoverBodyTemplate let-data=\"data\">\r\n <div [style]=\"data.BodyStyle\" class=\"popoverbody\" *ngIf=\"data && data.Body\" [innerHTML]=\"data.Body | htmlSanitize\" [ngClass]=\"data.BodyClass\" (mouseleave)=\"closePopOver.call(this, $event)\"></div>\r\n </ng-template>\r\n </kendo-popover>\r\n\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <div kendoPopoverContainer [popover]=\"gridPopOver\" filter=\"div.gridCell.withPopoverInGrid\" showOn=\"none\" kendoPopoverContainer #popovercontainer=\"kendoPopoverContainer\">\r\n <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject, gridSetting: gridSetting}\" [ngClass]=\"data.Class\" class=\"desktop-grid e1tag-style2\"\r\n [scrollable]=\"data.scrollAble === false ? 'none' : 'scrollable'\"\r\n [pageable]=\"pageable\"\r\n [class.hiden-pager]=\"!pageable\"\r\n [pageSize]=\"gridSetting.gridState.take\"\r\n [skip]=\"gridSetting.gridState.skip\"\r\n [sort]=\"gridSetting.gridState.sort\"\r\n [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n [filter]=\"gridSetting.gridState.filter\"\r\n [filterable]=\"data.enableFiltering !== false\"\r\n [resizable]=\"true\"\r\n [reorderable]=\"true\"\r\n [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n (cellClick)=\"cellClickHandler($event)\"\r\n (cellClose)=\"editCellCloseHandler($event)\"\r\n (dataStateChange)=\"dataStateChange($event)\"\r\n (pageChange)=\"pageChange($event)\"\r\n (sortChange)=\"sortChange($event)\"\r\n (filterChange)=\"filterChange($event)\"\r\n [kendoGridSelectBy]=\"rowSelectionKey\"\r\n [selectable]=\"selectableSettings\"\r\n [(selectedKeys)]=\"mySelection\"\r\n [style]=\"componentProperties.style.style2\"\r\n [trackBy]=\"trackBy\"\r\n (cancel)=\"cancelHandler($event)\"\r\n (save)=\"saveHandler($event)\"\r\n (remove)=\"removeHandler($event)\"\r\n (edit)=\"editHandler($event)\"\r\n (add)=\"addHandler($event)\"\r\n (columnResize)=\"adjustWidthUponResize()\"\r\n [rowClass]=\"rowCallback.bind(this)\">\r\n <ng-template kendoGridToolbarTemplate\r\n *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.Title || data.GridButtonFieldName_WF || data.GridButtonFieldName || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <div class=\"toolbar-left-item\" *ngIf=\"gridTitle || data.AllowRefreshButton || data.AllowExport\">\r\n <!-- <fa-icon *ngIf=\"data.Icon\" class=\"gridTitleIcon\" [icon]=\"data.Icon\"></fa-icon> -->\r\n <kendo-label class=\"gridTitle\" *ngIf=\"gridTitle\">{{ gridTitle }}</kendo-label>\r\n <button title=\"Refresh\" type=\"button\" class=\"left-buttons refresh-button\" kendoButton (click)=\"refreshData()\"\r\n *ngIf=\"data.AllowRefreshButton\">\r\n <span class=\"k-icon k-grid-button k-i-refresh-sm\"></span>\r\n </button>\r\n <div class=\"toolbar-left-item-second-container\" *ngIf=\"data.AllowExport\" [class.with-grid-title]=\"gridTitle || data.AllowRefreshButton\">\r\n <button type=\"button\" class=\"left-buttons export-button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\">\r\n <!-- <span class=\"k-icon k-i-file-excel\"></span> -->\r\n <fa-icon icon=\"download\"></fa-icon>\r\n <span class=\"export-to-excel-button-text\">{{ getToolBarItemLabelName('Download as Excel') }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"toolbar-right-item\" *ngIf=\"gridBtn || data.CacheInfo?.EnableSaveState || gridDefaultStateExist || data.EnableGridCommand || data.EnableCustomAddCommand || data.EnableCustomResetCommand\">\r\n <app-zworkflowbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zworkflowbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zworkflowbuttons>\r\n <app-zbuttons *ngIf=\"gridBtn && gridBtn.Type === 'zbuttons'\" [data]=\"gridBtn\" [group]=\"group\" [form]=\"form\"></app-zbuttons>\r\n <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.CacheInfo?.EnableSaveState\">\r\n <span class=\"k-icon k-icon-with-text k-i-star\"></span>{{ getToolBarItemLabelName('Save Settings') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"showRestoreGridSettingButton\">\r\n <span class=\"k-icon k-icon-with-text k-i-star-outline\"></span>{{ getToolBarItemLabelName('Restore Settings') }}\r\n </button>\r\n <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomAddCommand(group)\" *ngIf=\"data.EnableCustomAddCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-add\"></span>{{ getToolBarItemLabelName(data.AddCommandButtonName ? data.AddCommandButtonName: 'Add') }}\r\n </button>\r\n <button type=\"button\" kendoButton (click)=\"gridCustomResetCommand(group)\" *ngIf=\"data.EnableCustomResetCommand\">\r\n <span class=\"k-icon k-icon-with-text k-i-trash\"></span>{{ getToolBarItemLabelName(data.ResetCommandButtonName ? data.ResetCommandButtonName: 'Reset') }}\r\n </button>\r\n </div>\r\n <div class=\"filter-container\" *ngIf=\"data.GridFilterBarField\">\r\n <div class=\"normal-filter-container\">\r\n <app-zform class=\"filter-fields\" [group]=\"filterGroup\" [fieldName]=\"data.GridFilterBarField\"></app-zform>\r\n <div class=\"filter-buttons\" [ngClass]=\"data.Class\">\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"search()\">\r\n <fa-icon icon=\"search\"></fa-icon>\r\n <span class=\"btn-label ion-text-capitalize\">{{ getToolBarItemLabelName('Search') }}</span>\r\n </ion-button>\r\n <ion-button fill=\"outline\" size=\"default\" strong=\"true\" color=\"primary\" (click)=\"cancelEdit()\" *ngIf=\"data.IsShowGridCancelFilterButton\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </ion-button>\r\n <ion-button fill=\"solid\" size=\"default\" strong=\"true\" [ngClass]=\"isShowAdvFilter ? 'toggleOn' : 'toggleOff'\" (click)=\"advancedSearch()\" *ngIf=\"data.GridAdvFilterBarField\">\r\n <fa-icon icon=\"sliders-h\"></fa-icon>\r\n </ion-button>\r\n </div>\r\n </div>\r\n <app-zform *ngIf=\"data.GridAdvFilterBarField\" class=\"to-preload-the-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\" style=\"display:none;\"></app-zform>\r\n <div class=\"adv-filter-container\" *ngIf=\"isShowAdvFilter\" [@hideAndShowAnimation]>\r\n <div class=\"adv-filter-seperator\">\r\n <span>\r\n {{ getToolBarItemLabelName('Advanced Search') }}\r\n </span>\r\n </div>\r\n <app-zform class=\"advfilter-fields\" [group]=\"advfilterGroup\" [fieldName]=\"data.GridAdvFilterBarField\"></app-zform>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\" [locked]=\"checkboxColumnPinned\">\r\n </kendo-grid-checkbox-column>\r\n <kendo-grid-column [style]=\"getGridColumnStyle()\" class=\"e1tag-style3\" *ngFor=\"let col of columns;\" [field]=\"col.field\" [title]=\"col.title\" [width]=\"col.width\"\r\n [minResizableWidth]=\"col.minResizableWidth\" [filter]=\"col.filter\" [filterable]=\"filterable(col.enableFiltering)\"\r\n [sortable]=\"sortable(col.enableSorting)\" [headerStyle]=\"getGridHeaderStyle()\" headerClass=\"e1tag-style4\"\r\n [footerStyle]=\"getGridFooterStyle()\" footerClass=\"e1tag-style9\" [hidden]=\"col.hidden\"\r\n [format]=\"col.format\" [class]=\"col.Class\" [locked]=\"locked(col)\" editor=\"numeric\" [columnMenu]=\"!col.disableColumnMenu\"\r\n [editor]=\"col.editorType\">\r\n <div [ngSwitch]=\"true\">\r\n <div *ngSwitchCase=\"col.fieldType === 'number'\r\n || col.fieldType === 'currency'\r\n || col.fieldType === 'znumeric'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-numeric-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"eq\">\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-numeric-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n || col.fieldType === 'ztime'\r\n || col.fieldType === 'zdatetime'\r\n || col.fieldType === 'zuidatetime'\">\r\n <div *ngIf=\"col.filterByDateRange === true\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n <date-range-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" class=\"date-range-filter\"\r\n [filter]=\"filter\" [field]=\"col.field\" [data]=\"data\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </date-range-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"col.filterByDateRange === false\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-date-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"lte\">\r\n <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-date-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div *ngSwitchCase=\"col.fieldType === 'checkbox'\">\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-boolean-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n </kendo-grid-boolean-filter-cell>\r\n </ng-template>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n <kendo-grid-string-filter-cell [showOperators]=\"data.IsShowGridFilterOperator\" [column]=\"column\"\r\n [filter]=\"filter\" operator=\"contains\">\r\n <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n </kendo-grid-string-filter-cell>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <!-- Grid Edit Template -->\r\n <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n <div [ngSwitch]=\"col.fieldType\">\r\n <div *ngSwitchCase=\"'number'\">\r\n <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n <div *ngSwitchDefault>\r\n <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n <kendo-popup [anchor]=\"cellAnchor.input\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n style=\"padding-left: 2px; opacity: 0.5;\">\r\n <span class=\"k-icon k-i-warning\"></span>\r\n <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n -l\r\n\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n {{ col.Name }} required.\r\n </ion-label>\r\n <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n </ion-label>\r\n </kendo-popup>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\"\r\n [ngSwitch]=\"col.fieldType\" [ngClass]=\"getClass(dataItem, col)\" [style]=\"getCellStyle(col, dataItem)\" [attr.data-id]=\"dataItem.Id\" [attr.column-name]=\"col.field\"\r\n (mouseenter)=\"showPopOver(col, $event)\" (mouseleave)=\"closePopOver($event)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.gridCellReplaceValue && getIconName(col.gridCellReplaceValue, dataItem[col.field]) !== ''\">\r\n <fa-icon [icon]=\"getIconName(col.gridCellReplaceValue, dataItem[col.field])\"></fa-icon>\r\n </div>\r\n <div *ngIf=\"!col.gridCellReplaceValue\" [ngSwitch]=\"cellStyleCondition(col, dataItem[col.field])\">\r\n <span *ngSwitchCase=true>\r\n <div class=\"cellStyleConditionDefault\" [style]=\"setCellStyleCondition(col, dataItem[col.field])\">\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </div>\r\n </span>\r\n <span *ngSwitchDefault>\r\n <span class=\"grid-cell-data\">{{ dataItem[col.field] }} </span>\r\n </span>\r\n </div>\r\n </span>\r\n </div>\r\n <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ col.ClickableIcons }}\r\n <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n </ion-button>\r\n </span> -->\r\n <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && isInlineFormGroupHasValue() && !isInlineEditInputFieldLoading && !col.gridCellReplaceValue\" [style]=\"componentProperties.style.style5\"\r\n [ngClass]=\"getClass(dataItem, col)\" class=\"e1tag-style5\" [style]=\"getCellStyleForInlineEdit(col, dataItem, rowIndex)\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\" class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n : true;\r\n else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n </fa-icon>\r\n </span>\r\n <ng-template #disabledButton>\r\n </ng-template>\r\n </span>\r\n <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n </span> -->\r\n </ng-template>\r\n <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\" class=\"e1tag-style7\">\r\n {{col.aggregateType}}\r\n <span *ngSwitchCase=\"'zdate'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'ztime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'HH:mm' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\">\r\n {{ col.aggregateValue | date: col.FormatOptions ?? 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\">\r\n {{ col.aggregateValue | number }}\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\">\r\n {{ col.aggregateValue | number: getFormat(col) }}\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n {{ col.aggregateValue }}\r\n </span>\r\n <span *ngSwitchDefault>\r\n {{ col.aggregateValue }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n <button kendoGridSaveCommand>\r\n {{ isNew ? 'Save' : 'Update' }}\r\n </button>\r\n <button kendoGridCancelCommand [primary]=\"true\">\r\n {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n </button>\r\n <button kendoGridEditCommand>\r\n {{ \"Edit\" }}\r\n </button>\r\n <button kendoGridRemoveCommand>\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-command-column *ngIf=\"data.EnableCustomRemoveCommand\" width=\"180\" [columnMenu]=\"false\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoGridCellTemplate let-isNew=\"isNew\" let-dataItem let-rowIndex=\"rowIndex\">\r\n <button type=\"button\" kendoButton (click)=\"gridCustomRemoveCommand(dataItem, rowIndex)\" *ngIf=\"data.EnableCustomRemoveCommand\">\r\n {{ \"Remove\" }}\r\n </button>\r\n </ng-template>\r\n </kendo-grid-command-column>\r\n <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n </kendo-grid>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\r\n </div>\r\n </div>\r\n <!-- for DEC auto scrolling -->\r\n <div id=\"end-of-grid\"></div>\r\n</div>\r\n\r\n", styles: [".grid-container.align-with-input{margin:0 25px 0 10px}:host ::ng-deep kendo-treelist.desktop-grid,:host ::ng-deep kendo-grid.desktop-grid{border-width:0px;width:100%;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-content,:host ::ng-deep kendo-grid.desktop-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar{margin-bottom:15px;padding:5px 0 0;display:flex;flex-direction:row;border:none;background:transparent;border-bottom:1px solid var(--ion-app-seperator-line-color)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar .k-picker,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-input,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar .k-picker{width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button{font-size:calc(var(--button-font-size) - 1px);margin-left:8px;margin-right:2px;border-radius:var(--button-border-radius);background:#fff;border:none;box-shadow:none;padding:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button.left-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button.left-buttons{margin:auto 0 auto 5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-grid-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-grid-button{padding:0 6px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button fa-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button fa-icon{color:var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon{font-size:calc(var(--button-font-size) + 8px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button .k-icon-with-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button .k-icon-with-text{margin-right:2px;font-size:calc(var(--button-font-size) + 2px);padding-bottom:3px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item .k-button:hover,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item .k-button:hover{background:rgba(var(--ion-color-primary-rgb),.2)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container{margin-top:auto;padding-bottom:1px;gap:5px;display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container.with-grid-title,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container.with-grid-title{margin-left:10px;border-left:1px solid #c9c9c9;padding-left:8px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text{height:18px;gap:8px;display:flex;margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .k-i-file-excel{margin-top:-1px;font-size:calc(var(--button-font-size) + 6px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-left-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.toolbar-right-item>.toolbar-left-item-second-container .k-button.k-grid-excel>.k-button-text .export-to-excel-button-text{margin:auto}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container{flex:1 1 100%;border:1px solid var(--ion-app-seperator-line-color);display:grid}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container{display:grid;grid-template-columns:80% 20%;width:100%}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons{display:flex;margin:auto 5px auto auto;padding:0 5px;position:relative}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons.filter-field-layout-type2{top:12px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button{font-size:var(--button-font-size);margin-left:10px;height:calc(var(--input-field-height) + 2px)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOn{--background: rgba(var(--ion-color-primary-rgb), 15%);--background-hover: rgba(var(--ion-color-primary-rgb), 10%);--color: var(--ion-color-primary);--border-color: var(--ion-color-primary)}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button.toggleOff{--background: var(--disabled-input-field-backgroundcolor);--border-color: var(--z-placeholder-color);--color: var(--z-placeholder-color);--background-hover: #efefef}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.normal-filter-container>.filter-buttons>ion-button .btn-label{padding-left:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container{margin-top:10px}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator{width:100%;height:calc(var(--content-font-size) - 1px);border-bottom:1px solid var(--ion-color-primary);text-align:center}:host ::ng-deep kendo-treelist.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span,:host ::ng-deep kendo-grid.desktop-grid .k-toolbar>.filter-container>.adv-filter-container>.adv-filter-seperator span{font-size:calc(var(--content-font-size) + 3px);background:#fff;padding:0 20px;color:var(--ion-color-primary);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.toolbar-no-border .k-toolbar,:host ::ng-deep kendo-grid.desktop-grid.toolbar-no-border .k-toolbar{margin-bottom:0;border-width:0px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid .k-grid-aria-root{border:1px solid var(--ion-color-primary);border-radius:5px 5px 0 0}:host ::ng-deep kendo-treelist.desktop-grid.hiden-pager .k-grid-aria-root,:host ::ng-deep kendo-grid.desktop-grid.hiden-pager .k-grid-aria-root{border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header{font-weight:600;font-size:var(--grid-header-font-size);background:rgba(var(--ion-color-primary-rgb),.25);color:#000}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-cell-inner>.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-cell-inner>.k-link{padding:12px 12px 8px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-grid-filter.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-active .k-grid-filter.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-header-column-menu.k-state-active,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-hierarchy-cell .k-icon.k-state-active{color:#000;background:transparent}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-dropdown-wrap{background:var(--ion-color-primary-contrast);color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdown .k-button,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell .k-dropdowntree .k-button{color:var(--ion-color-primary-shade)}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator{display:flex}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible,:host ::ng-deep kendo-grid.desktop-grid .k-grid-header .k-filtercell>.k-filtercell-wrapper>.k-filtercell-operator>.k-button.k-clear-button-visible{margin-left:4px}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr,:host ::ng-deep kendo-grid.desktop-grid tbody>tr{background:rgba(var(--ion-color-primary-rgb),.08);font-size:var(--grid-cell-font-size)}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-alt{background:rgba(var(--ion-color-primary-rgb),.01)}:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected.k-alt>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected.k-alt,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected.k-alt>td{background:rgba(var(--ion-color-secondary-rgb),.8);color:var(--ion-color-secondary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr:hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-hover,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-hover{background-color:rgba(var(--ion-color-secondary-rgb),.15)}:host ::ng-deep kendo-treelist.desktop-grid tbody td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid tbody td>.gridCell>span>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager{background-color:rgba(var(--ion-color-primary-rgb),.25);color:#000;border:1px solid var(--ion-color-primary);border-top:none;border-radius:0 0 5px 5px;font-size:calc(var(--grid-cell-font-size) - 2px);padding:2px 10px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link{color:#000;border-radius:5px}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-hover :host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-hover{color:#fff;background-image:linear-gradient(rgba(var(--ion-color-primary-rgb),.7),rgba(var(--ion-color-primary-rgb),.8))}:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-treelist.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-numbers .k-link.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-refresh.k-state-selected.k-state-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-selected.k-hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected:hover,:host ::ng-deep kendo-grid.desktop-grid .k-grid-pager .k-pager-nav.k-link.k-state-selected.k-state-hover{color:var(--ion-color-primary);background:var(--ion-color-primary-contrast);font-weight:600}:host ::ng-deep kendo-treelist.desktop-grid.cellWrapText td>.gridCell>span>div>span,:host ::ng-deep kendo-grid.desktop-grid.cellWrapText td>.gridCell>span>div>span{white-space:pre-line}:host ::ng-deep kendo-treelist .cellStyleConditionDefault,:host ::ng-deep kendo-grid .cellStyleConditionDefault{border-radius:5px;text-align:center}:host ::ng-deep kendo-treelist .rightAligned,:host ::ng-deep kendo-grid .rightAligned{text-align:right}:host ::ng-deep kendo-treelist .centerAligned,:host ::ng-deep kendo-grid .centerAligned{text-align:center}.gridTitle{font-size:calc(var(--grid-header-font-size) + 8px);font-weight:700;margin:auto 5px;color:var(--ion-color-dark);padding-top:2px;display:inherit}.gridTitleIcon{color:var(--ion-color-dark);font-size:calc(var(--grid-header-font-size) + 2px);display:block;margin:auto 0;padding-top:2px}.refresh-btn{zoom:.8}.refresh-btn>.k-i-refresh-sm{transform:rotate(30deg);font-size:1.4rem}.toolbar-left-item{flex-grow:1;display:flex}.toolbar-right-item{bottom:2px;position:relative}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-dark)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;inset:100px 0 0;font-size:45px;background-color:#ffffff4d;color:#0f4800}\n"] }]
|
|
9959
9968
|
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FontAweSomeService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i4$1.FormBuilder }, { type: i2.WebApiService }, { type: i2.ToastService }, { type: i2.ZCoreService }, { type: i2.StorageSessionService }, { type: MainService }, { type: i0.ChangeDetectorRef }, { type: ZGridService }, { type: i2.OfflineDatabaseService }]; }, propDecorators: { tooltipDir: [{
|
|
9960
9969
|
type: ViewChild,
|
|
9961
9970
|
args: [TooltipDirective]
|
|
@@ -12202,10 +12211,10 @@ class ZtreelistComponent extends DataListingFieldBase {
|
|
|
12202
12211
|
}
|
|
12203
12212
|
}
|
|
12204
12213
|
ZtreelistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }, { token: i2.WebApiService }, { token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.AuthService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12205
|
-
ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\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 === false\">\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\">\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)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n </span>\r\n <span *ngSwitchDefault class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n <span *ngSwitchCase=\"'number'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </b>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </b>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\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}\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-left:10px;border-left:1px solid #c9c9c9;padding-left:8px;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 .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{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>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background: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: i4$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.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$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: i4$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$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", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$2.FocusableDirective, selector: "[kendoTreeListFocusable], [kendoTreeListAddCommand], [kendoTreeListEditCommand], [kendoTreeListRemoveCommand], [kendoTreeListSaveCommand], [kendoTreeListCancelCommand] ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5.DatePipe, "number": i5.DecimalPipe, "htmlSanitize": HtmlSanitizePipe, "titlecase": i5.TitleCasePipe } });
|
|
12214
|
+
ZtreelistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreelistComponent, selector: "app-ztreelist", viewQueries: [{ propertyName: "tooltipDir", first: true, predicate: TooltipDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n class=\"grid-container e1tag-style\" [style]=\"componentProperties.style.style\" [ngClass]=\"data.Class\">\r\n <ng-template #template let-anchor>\r\n <span>{{ anchor.nativeElement.innerText }}</span>\r\n </ng-template>\r\n <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\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 === false\">\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\">\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)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n </span>\r\n <span *ngSwitchDefault class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n <span *ngSwitchCase=\"'number'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </b>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </b>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\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}\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: i4$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.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i15.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i2$1.IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }, { type: ZworkflowbuttonsComponent, selector: "app-zworkflowbuttons" }, { type: ZbuttonsComponent, selector: "app-zbuttons" }, { type: i4$2.ColumnComponent, selector: "kendo-treelist-column", inputs: ["expandable", "field", "format", "sortable", "editor", "filter", "filterable", "editable"] }, { type: i4$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: i4$2.LessFilterOperatorComponent, selector: "kendo-treelist-filter-lt-operator" }, { type: i4$2.LessOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-lte-operator" }, { type: i4$2.GreaterFilterOperatorComponent, selector: "kendo-treelist-filter-gt-operator" }, { type: i4$2.GreaterOrEqualToFilterOperatorComponent, selector: "kendo-treelist-filter-gte-operator" }, { type: i4$2.IsNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnull-operator" }, { type: i4$2.IsNotNullFilterOperatorComponent, selector: "kendo-treelist-filter-isnotnull-operator" }, { type: i4$2.DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: ["showOperators"] }, { type: i4$2.StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: ["filterDelay", "showOperators"] }, { type: i4$2.ContainsFilterOperatorComponent, selector: "kendo-treelist-filter-contains-operator" }, { type: i4$2.EqualFilterOperatorComponent, selector: "kendo-treelist-filter-eq-operator" }, { type: i4$2.NotEqualFilterOperatorComponent, selector: "kendo-treelist-filter-neq-operator" }, { type: i4$2.StartsWithFilterOperatorComponent, selector: "kendo-treelist-filter-startswith-operator" }, { type: i4$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", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i4$2.CommandColumnComponent, selector: "kendo-treelist-command-column" }, { type: ContextMenuComponent, selector: "app-context-menu", inputs: ["target", "selectedData"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i7$2.TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { type: i4$2.ExpandableDirective, selector: "[kendoTreeListExpandable]", inputs: ["expandedKeys", "initiallyExpanded", "expandBy"], outputs: ["expandedKeysChange"], exportAs: ["kendoTreeListExpandable"] }, { type: i4$2.FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: ["parentIdField", "idField", "kendoTreeListFlatBinding"], exportAs: ["kendoTreeListFlatBinding"] }, { type: i4$2.ToolbarTemplateDirective, selector: "[kendoTreeListToolbarTemplate]", inputs: ["position"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$2.FilterCellTemplateDirective, selector: "[kendoTreeListFilterCellTemplate]" }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.CellTemplateDirective, selector: "[kendoTreeListCellTemplate]" }, { type: i4$2.FooterTemplateDirective, selector: "[kendoTreeListFooterTemplate]" }, { type: i4$2.FocusableDirective, selector: "[kendoTreeListFocusable], [kendoTreeListAddCommand], [kendoTreeListEditCommand], [kendoTreeListRemoveCommand], [kendoTreeListSaveCommand], [kendoTreeListCancelCommand] ", inputs: ["kendoTreeListFocusable", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4$2.EditCommandDirective, selector: "[kendoTreeListEditCommand]", inputs: ["kendoTreeListEditCommand"] }], pipes: { "date": i5.DatePipe, "number": i5.DecimalPipe, "htmlSanitize": HtmlSanitizePipe, "titlecase": i5.TitleCasePipe } });
|
|
12206
12215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreelistComponent, decorators: [{
|
|
12207
12216
|
type: Component,
|
|
12208
|
-
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 <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\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 === false\">\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\">\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)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n </span>\r\n <span *ngSwitchDefault class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n <span *ngSwitchCase=\"'number'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </b>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </b>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\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}\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-left:10px;border-left:1px solid #c9c9c9;padding-left:8px;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 .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{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>tr.k-selected>td,:host ::ng-deep kendo-treelist.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-treelist.desktop-grid tbody>tr.k-state-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-selected>td,:host ::ng-deep kendo-grid.desktop-grid tbody>td.k-state-selected,:host ::ng-deep kendo-grid.desktop-grid tbody>tr.k-state-selected>td{background: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"] }]
|
|
12217
|
+
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 <div kendoTooltip showOn=\"none\" [tooltipTemplate]=\"template\" filter=\".k-grid td\" (mouseover)=\"showTooltip($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n <kendo-treelist [kendoTreeListFlatBinding]=\"dataSource\"\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 === false\">\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\">\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)\">\r\n <span *ngSwitchCase=\"'zdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zshortdate'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zdatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'zuidatetime'\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n </span>\r\n <span *ngSwitchCase=\"'number'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number }} </div>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: '1.2-2' }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'znumeric'\" class=\"grid-cell-data\">\r\n <div style=\"text-align:right;\">{{ dataItem[col.field] | number: getFormat(col) }}</div>\r\n </span>\r\n <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\" class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n <span *ngSwitchCase=\"'zlabel'\" class=\"grid-cell-data\">\r\n <div class=\"ztree-inline-block e1tag-style10\" [style]=\"componentProperties.style.style10\" [innerHTML]=\"dataItem[col.field] | htmlSanitize\"></div>\r\n </span>\r\n <span *ngSwitchDefault class=\"grid-cell-data\">\r\n {{ dataItem[col.field] }}\r\n </span>\r\n </div>\r\n <div style=\"margin: 7px 0;display: inline;\" [style.color]=\"(!!dataItem.Color ? [dataItem.Color] : 'black')\"\r\n *ngIf=\"!col.navigateTo && col.isEditableInGrid === true && isInlineEditColVisible(dataItem, col)\"\r\n [ngClass]=\"getColClass(dataItem, col)\" [style]=\"componentProperties.style.style5\" class=\"e1tag-style5\">\r\n <app-zinput-container [data]=\"getInlineField(col.field)\" [group]=\"group\"\r\n [form]=\"getInlineForm(dataItem, rowIndex)\" [containerField]=\"containerField\" [style]=\"componentProperties.style.style6\"\r\n class=\"e1tag-style6\">\r\n </app-zinput-container>\r\n </div>\r\n <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n <ion-button color=\"light\" size=\"small\">\r\n {{ dataItem[col.field] }}\r\n <!-- <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon> -->\r\n <fa-icon slot=\"end\" [icon]=\"'arrow-right'\"></fa-icon>\r\n </ion-button>\r\n </span>\r\n </ng-template>\r\n <ng-template *ngIf=\"col.footerTemplate\" kendoTreeListFooterTemplate let-aggregates=\"aggregates\">\r\n <div *ngIf=\"!col.navigateTo\" [ngSwitch]=\"col.fieldType\" [style]=\"componentProperties.style.style7\"\r\n [ngClass]=\"{'rightAligned': col.fieldType === 'number' || col.fieldType === 'currency'}\" class=\"e1tag-style7\">\r\n <span *ngSwitchCase=\"'number'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number }}\r\n </b>\r\n </span>\r\n <span *ngSwitchCase=\"'currency'\">\r\n <b>\r\n {{ col.aggregateTitle | titlecase }} {{ aggregates[col.field][col.aggregateType] | number: '1.2-2' }}\r\n </b>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-column>\r\n <kendo-treelist-command-column *ngIf=\"!!col.command\" [title]=\"col.title || col.field\"\r\n [width]=\"col.width || 250\" [style]=\"componentProperties.style.style8\" class=\"e1tag-style8\">\r\n <ng-template kendoTreeListCellTemplate let-cellContext=\"cellContext\">\r\n <div [ngClass]=\"col.class\">\r\n <button *ngFor=\"let col2 of col.command; index as i\" type=\"button\"\r\n [kendoTreeListEditCommand]=\"cellContext\" [title]=\"col2.text\" (click)=\"buttonClick(col2, cellContext)\"\r\n [hidden]=\"isButtonHidden(col2, cellContext)\">\r\n <fa-icon [icon]=\"col2.icon\" [style.color]=\"(!!col2.color ? [col2.color] : 'black')\">\r\n </fa-icon>\r\n <div *ngIf=\"col2.ShowLabel === undefined || col2.ShowLabel\">{{col2.text}}</div>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-treelist-command-column>\r\n </ng-container>\r\n\r\n <!-- <kendo-treelist-command-column width=\"140\">\r\n <ng-template kendoTreeListCellTemplate let-isNew=\"isNew\" let-cellContext=\"cellContext\">\r\n <button [kendoTreeListAddCommand]=\"cellContext\"\r\n icon=\"filter-add-expression\" title=\"Add Child\">\r\n </button>\r\n <button [kendoTreeListCancelCommand]=\"cellContext\"\r\n icon=\"cancel\" title=\"{{ isNew ? 'Discard changes' : 'Cancel' }}\">\r\n </button>\r\n </ng-template>\r\n </kendo-treelist-command-column> -->\r\n </kendo-treelist>\r\n <app-context-menu [data]=\"data\" [group]=\"group\" [form]=\"form\" #dataitemcontextmenu></app-context-menu>\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}\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"] }]
|
|
12209
12218
|
}], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }, { type: i2.WebApiService }, { type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.AuthService }]; }, propDecorators: { tooltipDir: [{
|
|
12210
12219
|
type: ViewChild,
|
|
12211
12220
|
args: [TooltipDirective]
|