mmhglobal-dynamicform 1.1.44 → 1.2.2

package/bundles/mmhglobal-dynamicform.umd.js

@@ -752,18 +752,12 @@
                             modalFields = this.fieldService.getFormFieldCode("mvEditFieldNodeForm", "FormField", null, null);
                             initialModel = {
                                 Name: 'Name', DisplayName: 'Name', Value: 'Name', Type: 'text',
-                                enableHiding: true,
                                 gridColVisible: true,
                                 width: 150,
                                 minWidth: 100,
-                                cellFilter: "",
-                                filterCellFiltered: false,
                                 enableFiltering: true,
                                 enableSorting: true,
-                                enablePinning: true,
                                 pinnedLeft: false,
-                                pinnedRight: false,
-                                UpdateOnBlur: true,
                                 PlaceHolder: "Name",
                                 IsRequired: false,
                                 MinLength: 2,
@@ -773,7 +767,6 @@
                                 ReadOnly: false,
                                 ShowLabel: true,
                                 Visible: true,
-                                AppendDivClearFix: false,
                             };
                             zmodel = {
                                 nodeModel: JSON.stringify(initialModel, null, 2)
@@ -2547,6 +2540,22 @@
         zgridbinding: [{ type: i0.Input }]
     };
 
+    var ZGridPopupAnchorDirective = /** @class */ (function () {
+        function ZGridPopupAnchorDirective(element) {
+            this.element = element;
+        }
+        return ZGridPopupAnchorDirective;
+    }());
+    ZGridPopupAnchorDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[popupAnchor]',
+                    exportAs: 'popupAnchor'
+                },] }
+    ];
+    ZGridPopupAnchorDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
     /********** Angular **********/
     /********** Component & Service **********/
     var OpenOnFocusDirective = /** @class */ (function () {
@@ -2577,430 +2586,111 @@
         onBlur: [{ type: i0.HostListener, args: ['blur',] }]
     };
 
-    var ZGridCalendarBindingDirective = /** @class */ (function (_super) {
-        __extends(ZGridCalendarBindingDirective, _super);
-        function ZGridCalendarBindingDirective(grid, webapiService, authService, storageService, zGridStatePersistingService) {
-            var _this = _super.call(this, grid) || this;
-            _this.webapiService = webapiService;
-            _this.authService = authService;
-            _this.storageService = storageService;
-            _this.zGridStatePersistingService = zGridStatePersistingService;
-            _this.state = {
-                skip: 0,
-                take: 10,
-            };
-            _this.gridColumns = [];
-            _this.usableColumns = [];
-            _this.resourceURL = null;
-            _this.paginationApiPostUrl = null;
-            _this.dataSource = null;
-            return _this;
+    var DateParserFilter = /** @class */ (function () {
+        function DateParserFilter() {
         }
-        Object.defineProperty(ZGridCalendarBindingDirective.prototype, "field", {
-            get: function () {
-                return this.zgridcalendarbinding.data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ZGridCalendarBindingDirective.prototype, "grp", {
-            get: function () {
-                return this.zgridcalendarbinding.group;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ZGridCalendarBindingDirective.prototype, "gridSubject", {
-            get: function () {
-                return this.zgridcalendarbinding.gridSubject;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ZGridCalendarBindingDirective.prototype, "params", {
-            get: function () {
-                return this.zgridcalendarbinding.params;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ZGridCalendarBindingDirective.prototype, "getData", {
-            get: function () {
-                return this.grid.data;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ZGridCalendarBindingDirective.prototype.ngOnInit = function () {
-            if (this.field.SkipDirective) {
-                return;
+        DateParserFilter.prototype.transform = function (items) {
+            // debugger;
+            if (!items) {
+                return items;
             }
-            _super.prototype.ngOnInit.call(this);
-            this.grid.loading = true;
-            this.state.take = this.field.PageSize || 20;
-            this.pageSize = this.state.take;
-            this.dataSource = this.field.DataSource ? this.field.DataSource : null;
-            if (!this.dataSource) {
-                this.resourceURL = i3.ZComponentHelper.getGroupValue(this.field.ResourceURL, this.grp);
-                if (!this.resourceURL) {
-                    this.grid.loading = false;
-                    if (this.zgridcalendarbinding.data.Name !== "ActivityLogGrid") {
-                        console.warn("No initialise for Field.ResourceURL: ", this.field.ResourceURL);
-                    }
-                    return;
-                }
-                var array = this.resourceURL.split("/api/");
-                if (!!array[1]) {
-                    array[1] = "Page" + array[1];
-                    this.paginationApiPostUrl = array.join("/api/");
-                }
-                else {
-                    var arr = this.resourceURL.split("/");
-                    arr[arr.length - 2] = "Page" + arr[arr.length - 2];
-                    this.paginationApiPostUrl = arr.join("/");
-                }
+            // filter items array, items which match and return true will be
+            // kept, false will be filtered out
+            try {
+                var d = new Date(items);
+                return d;
             }
-            this.gridSubject.next(this);
-            this.generateGridColumns();
-        };
-        ZGridCalendarBindingDirective.prototype.ngOnDestroy = function () {
-            if (this.serviceSubscription) {
-                this.serviceSubscription.unsubscribe();
+            catch (error) {
+                console.log("DateParserFilter error: ", error);
+                return null;
             }
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        ZGridCalendarBindingDirective.prototype.generateGridColumns = function () {
-            var _this = this;
-            var columnFields$ = i3.ZComponentHelper.getGroupValue(this.field.ColumnFields, this.grp);
-            columnFields$
-                .pipe(operators.tap(function (data) {
-                var gridSetting = _this.getGridSettings();
-                var fieldName = _this.field["FieldElementName"];
-                i3.ZComponentHelper.getGridColumns(data, _this.gridColumns, _this.zgridcalendarbinding.group, _this.authService, fieldName, gridSetting, _this.usableColumns);
-                _this.getFilterParamsColumns();
-                _this.getGrantType();
-                _this.setHiddenColumn(gridSetting);
-            }), operators.switchMap(function () {
-                //Get Session
-                return _this.getGridSessionFilter(_this.grp, _this);
-            }), operators.switchMap(function () {
-                //Before get grid data
-                return _this.beforeGridGetData(_this.grp, _this);
-            }))
-                .subscribe(function () {
-                _this.getDataBinding();
-            });
         };
-        ZGridCalendarBindingDirective.prototype.getDataBinding = function () {
-            var _this = this;
-            this.grid.loading = true;
-            if (!this.dataSource) {
-                this.params.pageSize = this.state.take;
-                if (this.field.ExternalPagination) {
-                    // For POST method Page WebAPI
-                    this.webapiService
-                        .postApi(this.paginationApiPostUrl, this.params, null, null, null, null, true)
-                        .subscribe(function (data) {
-                        _this.grid.data = { data: data.dataSet, total: data.totalCount };
-                        _this.grid.loading = false;
-                        _this.notifyDataChange();
-                    });
+        return DateParserFilter;
+    }());
+    DateParserFilter.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: "dateParser",
+                    pure: true,
+                },] }
+    ];
+
+    /********** Angular **********/
+    /********** Ionic **********/
+    /********** Plugin **********/
+    /********** Component & Service **********/
+    var EditorFilter = /** @class */ (function () {
+        function EditorFilter() {
+        }
+        EditorFilter.prototype.transform = function (source) {
+            if (!source) {
+                return;
+            }
+            if (typeof source === "string") {
+                try {
+                    var jsonValue = JSON.parse(source);
+                    return JSON.stringify(jsonValue, null, 2);
+                    // return this.safeStringify(jsonValue);
                 }
-                else {
-                    // For GET method
-                    this.webapiService
-                        .getApi(this.resourceURL, null, null, null, null, null, true)
-                        .subscribe(function (data) {
-                        var _data = null;
-                        var _totalCount = 0;
-                        if (data.dataSet) {
-                            _data = data.dataSet;
-                            _totalCount = data.totalCount;
-                        }
-                        else {
-                            _data = data;
-                            _totalCount = data.length;
-                        }
-                        _this.grid.data = { data: _data, total: _totalCount };
-                        _this.grid.pageSize = _totalCount;
-                        _this.grid.loading = false;
-                        _this.notifyDataChange();
-                    });
+                catch (_a) {
+                    return source;
                 }
             }
-            else {
-                var ds = i3.ZComponentHelper.getGroupValue(this.field.DataSource, this.grp);
-                if (ds) {
-                    this.grid.data = {
-                        data: ds,
-                        total: ds.length,
-                    };
-                    this.grid.pageSize = ds.length;
+            if (typeof source === "object" || Array.isArray(source)) {
+                try {
+                    return JSON.stringify(source, null, 2);
+                    // return this.safeStringify(source);
+                }
+                catch (_b) {
+                    return "problem - [Circular structure to JSON]";
                 }
-                this.grid.loading = false;
             }
         };
-        ZGridCalendarBindingDirective.prototype.clearData = function () {
-            this.grid.data = { data: [], total: 0 };
-        };
-        ZGridCalendarBindingDirective.prototype.getFilterParamsColumns = function () {
-            var colFields = [];
-            this.gridColumns.forEach(function (field) {
-                if (field.valueExpr) {
-                    colFields.push(field.valueExpr + " as " + field.field);
-                }
-                else {
-                    colFields.push(field.field);
-                }
-            });
-            if (colFields.length > 0) {
-                if (colFields.indexOf("Id") === -1) {
-                    colFields.push("Id");
+        EditorFilter.prototype.safeStringify = function (jsonValue) {
+            // Note: cache should not be re-used by repeated calls to JSON.stringify.
+            var cache = [];
+            return JSON.stringify(jsonValue, function (key, value) {
+                if (typeof value === 'object' && value !== null) {
+                    // Duplicate reference found, discard key
+                    if (cache.includes(value)) {
+                        // debugger;
+                        // return "problem - [Circular structure to JSON]";
+                        return;
+                    }
+                    // Store value in our collection
+                    cache.push(value);
                 }
+                return value;
+            }, 2);
+            // cache = null; // Enable garbage collection
+        };
+        return EditorFilter;
+    }());
+    EditorFilter.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'editorfilter',
+                    pure: false
+                },] }
+    ];
+
+    var DivzLayout = /** @class */ (function () {
+        function DivzLayout() {
+        }
+        DivzLayout.prototype.transform = function (items, zlayout) {
+            if (!items || !zlayout) {
+                return items;
             }
-            var tmpGridColumn = [];
-            tmpGridColumn.push(colFields.join(","));
-            if (this.usableColumns.length > 0) {
-                tmpGridColumn.push(this.usableColumns.join(","));
+            // if got zlayout, in div: 2 = 2 col per row; 3 = 1 col per row; 
+            if (zlayout == "2") {
+                Object.values(items).forEach(function (value) {
+                    value['DivClass'] = "col-sm-6";
+                });
             }
-            this.params.columns = tmpGridColumn.join(",");
-        };
-        ZGridCalendarBindingDirective.prototype.getGrantType = function () {
-            if (this.field.GrantType) {
-                this.params.grantType = i3.ZComponentHelper.getGroupValue(this.field.GrantType.toString(), this.grp);
+            else if (zlayout == '3') {
+                Object.values(items).forEach(function (value) {
+                    value['DivClass'] = "col-sm-12";
+                });
             }
-        };
-        ZGridCalendarBindingDirective.prototype.dataStateChange = function (state) {
-            // this.state = state;
-            this.skip = state.skip;
-            this.pageSize = state.take;
-            this.state.skip = state.skip;
-            this.state.take = state.take;
-            this.grid.loading = true;
-        };
-        ZGridCalendarBindingDirective.prototype.mapFilterOperator = function (operator) {
-            switch (operator) {
-                case "eq":
-                    return "eq";
-                case "neq":
-                    return "neq";
-                case "lt":
-                    return "lt";
-                case "lte":
-                    return "lte";
-                case "gt":
-                    return "gt";
-                case "gte":
-                    return "gte";
-                case "startswith":
-                    return "startswith";
-                case "endswith":
-                    return "endswith";
-                case "isnull":
-                    return "isnull";
-                case "isnotnull":
-                    return "isnotnull";
-                default:
-                    return "==";
-                // eq, neq, isnull, isnotnull, endswith, startswith
-            }
-        };
-        ZGridCalendarBindingDirective.prototype.getGridSettings = function () {
-            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-            var _gridName = this.field.Name + '::' + this.field.Value;
-            // Find any setting from localstorage..
-            var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-            if (_arrGridCaching && _arrGridCaching[0]) {
-                var _gridCaching = _arrGridCaching.find(function (x) { return x['dataFormFields'] === _gridName; });
-                if (_gridCaching) {
-                    return _gridCaching.gridSettings.columnsConfig.sort(function (a, b) { return a.orderIndex - b.orderIndex; });
-                }
-            }
-        };
-        ZGridCalendarBindingDirective.prototype.setHiddenColumn = function (gridSetting) {
-            var _this = this;
-            if (this.gridColumns && gridSetting) {
-                // filter out hidden == false array.
-                var gridSettingHiddenCol = gridSetting.filter(function (item) {
-                    return item['hidden'] == true;
-                });
-                // find and set the hidden to current column setting.
-                Object.values(gridSettingHiddenCol).forEach(function (value) {
-                    if (_this.gridColumns.find(function (c) { return c.field === value.field; })) {
-                        _this.gridColumns.find(function (c) { return c.field === value.field; })['hidden'] = value['hidden'];
-                    }
-                });
-            }
-        };
-        ZGridCalendarBindingDirective.prototype.beforeGridGetData = function (group, me) {
-            console.warn("beforeDataBinding triggered");
-            if (!group.beforeGridGetData) {
-                console.warn("group.beforeDataBinding is undefined");
-                return rxjs.of(true);
-            }
-            return group.beforeGridGetData(group, me);
-        };
-        ZGridCalendarBindingDirective.prototype.getGridSessionFilter = function (group, me) {
-            return __awaiter(this, void 0, void 0, function () {
-                var StorageKey;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!group["GridStorageKey"]) {
-                                return [2 /*return*/, null];
-                            }
-                            StorageKey = group["GridStorageKey"];
-                            if (!this.storageService) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.storageService.get(StorageKey)
-                                    .then(function (data) {
-                                    if (!data || !data.value || data.value === "null") {
-                                        return null;
-                                    }
-                                    else {
-                                        var result = JSON.parse(data.value);
-                                        _this.state.filter = JSON.parse(result["StateFilter"]);
-                                        _this.params.filterParams = JSON.parse(result["FilterParams"]);
-                                        _this.state.filter.filters.forEach(function (d) {
-                                            if (d.field.includes('UTC')) {
-                                                d.value = new Date(d.value);
-                                            }
-                                        });
-                                        return data;
-                                    }
-                                })];
-                        case 1:
-                            _a.sent();
-                            return [3 /*break*/, 3];
-                        case 2: return [2 /*return*/, null];
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            });
-        };
-        return ZGridCalendarBindingDirective;
-    }(kendoAngularGrid.DataBindingDirective));
-    ZGridCalendarBindingDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: "[zgridcalendarbinding]",
-                },] }
-    ];
-    ZGridCalendarBindingDirective.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [kendoAngularGrid.GridComponent,] }] },
-        { type: i3.WebApiService },
-        { type: i3.AuthService },
-        { type: i3.StorageSessionService },
-        { type: i3.ZGridStatePersistingService }
-    ]; };
-    ZGridCalendarBindingDirective.propDecorators = {
-        zgridcalendarbinding: [{ type: i0.Input }]
-    };
-
-    var DateParserFilter = /** @class */ (function () {
-        function DateParserFilter() {
-        }
-        DateParserFilter.prototype.transform = function (items) {
-            // debugger;
-            if (!items) {
-                return items;
-            }
-            // filter items array, items which match and return true will be
-            // kept, false will be filtered out
-            try {
-                var d = new Date(items);
-                return d;
-            }
-            catch (error) {
-                console.log("DateParserFilter error: ", error);
-                return null;
-            }
-        };
-        return DateParserFilter;
-    }());
-    DateParserFilter.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: "dateParser",
-                    pure: true,
-                },] }
-    ];
-
-    /********** Angular **********/
-    /********** Ionic **********/
-    /********** Plugin **********/
-    /********** Component & Service **********/
-    var EditorFilter = /** @class */ (function () {
-        function EditorFilter() {
-        }
-        EditorFilter.prototype.transform = function (source) {
-            if (!source) {
-                return;
-            }
-            if (typeof source === "string") {
-                try {
-                    var jsonValue = JSON.parse(source);
-                    return JSON.stringify(jsonValue, null, 2);
-                    // return this.safeStringify(jsonValue);
-                }
-                catch (_a) {
-                    return source;
-                }
-            }
-            if (typeof source === "object" || Array.isArray(source)) {
-                try {
-                    return JSON.stringify(source, null, 2);
-                    // return this.safeStringify(source);
-                }
-                catch (_b) {
-                    return "problem - [Circular structure to JSON]";
-                }
-            }
-        };
-        EditorFilter.prototype.safeStringify = function (jsonValue) {
-            // Note: cache should not be re-used by repeated calls to JSON.stringify.
-            var cache = [];
-            return JSON.stringify(jsonValue, function (key, value) {
-                if (typeof value === 'object' && value !== null) {
-                    // Duplicate reference found, discard key
-                    if (cache.includes(value)) {
-                        // debugger;
-                        // return "problem - [Circular structure to JSON]";
-                        return;
-                    }
-                    // Store value in our collection
-                    cache.push(value);
-                }
-                return value;
-            }, 2);
-            // cache = null; // Enable garbage collection
-        };
-        return EditorFilter;
-    }());
-    EditorFilter.decorators = [
-        { type: i0.Pipe, args: [{
-                    name: 'editorfilter',
-                    pure: false
-                },] }
-    ];
-
-    var DivzLayout = /** @class */ (function () {
-        function DivzLayout() {
-        }
-        DivzLayout.prototype.transform = function (items, zlayout) {
-            if (!items || !zlayout) {
-                return items;
-            }
-            // if got zlayout, in div: 2 = 2 col per row; 3 = 1 col per row; 
-            if (zlayout == "2") {
-                Object.values(items).forEach(function (value) {
-                    value['DivClass'] = "col-sm-6";
-                });
-            }
-            else if (zlayout == '3') {
-                Object.values(items).forEach(function (value) {
-                    value['DivClass'] = "col-sm-12";
-                });
-            }
-            return items;
+            return items;
         };
         return DivzLayout;
     }());
@@ -5468,817 +5158,91 @@
                 rangeTo: 100,
                 rangeColor: '#ff6358',
                 rangeLineCap: 'round',
-                showLabels: true,
-                rangeSize: 10,
-            };
-        }
-        ZgaugeComponent.prototype.ngOnInit = function () {
-            i3.ZComponentHelper.setComponentProperties(this);
-            i3.ZComponentHelper.registerComponent(this);
-            if (this.data.Options) {
-                var optionType = typeof (this.data.Options);
-                if (optionType === 'object') {
-                    Object.assign(this.options, this.data.Options);
-                }
-                else if (optionType === 'string') {
-                    var optionValue = i3.ZComponentHelper.getGroupEvalValue.call(this, this.data.Options);
-                    if (typeof (optionValue) === 'object') {
-                        Object.assign(this.options, optionValue);
-                    }
-                }
-            }
-            this.getFieldDeclarationForSetup(this.data, this.options);
-            this.isLoading = false;
-        };
-        ZgaugeComponent.prototype.getFieldDeclarationForSetup = function (field, options) {
-            options.value = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Value) || options.value;
-            options.title = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Title) || options.title;
-            options.scaleMax = field.Max || options.scaleMax;
-            options.minValue = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MinValue) || options.minValue;
-            options.maxValue = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MaxValue) || options.maxValue;
-            options.colors = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Color) || options.colors;
-            options.transitions = field.Transitions || options.transitions;
-            options.majorTicks = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MajorTicks) || options.majorTicks;
-            options.showLabels = field.ShowLabels || options.showLabels;
-            options.style = field.Style || options.style;
-            options.minorTicks = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MinorTicks) || options.minorTicks;
-            options.reverse = field.Reverse || options.reverse;
-            options.startAngle = i3.ZComponentHelper.getGroupEvalValue.call(this, field.StartAngle) || options.startAngle;
-            options.endAngle = i3.ZComponentHelper.getGroupEvalValue.call(this, field.EndAngle) || options.endAngle;
-            options.rangePlaceholderColor = field.RangePlaceholderColor || options.rangePlaceholderColor;
-            options.rangeFrom = i3.ZComponentHelper.getGroupEvalValue.call(this, field.RangeFrom) || options.rangeFrom;
-            options.rangeTo = i3.ZComponentHelper.getGroupEvalValue.call(this, field.RangeTo) || options.rangeTo;
-            options.rangeColor = field.RangeColor || options.rangeColor;
-            options.rangeLineCap = field.RangeLineCap || options.rangeLineCap;
-            options.rangeSize = field.RangeSize || options.rangeSize;
-            options.GaugeAlignment = i3.ZComponentHelper.getGroupEvalValue.call(this, field.GaugeAlignment) || options.GaugeAlignment;
-            options.paddingValue = options.value.toString() === 'NaN' ? options.GaugeAlignment : '0%';
-        };
-        ZgaugeComponent.prototype.alignment = function () {
-            var alignmentStyle = {
-                "padding-right": this.options["paddingValue"]
-            };
-            return alignmentStyle;
-        };
-        ZgaugeComponent.prototype.setEnable = function (status) {
-            // const fc = this.group.form.controls[this.data.Value];
-            // status ? fc.enable() : fc.disable();
-            this.componentProperties.isReadOnly = !status;
-        };
-        ZgaugeComponent.prototype.setVisible = function (status) {
-            this.componentProperties.isVisible = status;
-            this.data.Visible = status;
-        };
-        ZgaugeComponent.prototype.setRequire = function (status) {
-            this.componentProperties.isRequired = status;
-        };
-        ZgaugeComponent.prototype.setData = function (gData) {
-            this.getFieldDeclarationForSetup(this.data, this.options);
-        };
-        return ZgaugeComponent;
-    }());
-    ZgaugeComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'app-zgauge',
-                    template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" style=\"margin-top:50px;width:90% ;height:100%; min-width: 330px;\">\r\n      <kendo-arcgauge-scale\r\n            [majorTicks]=\"{ visible: true, color: '#0000ff' }\"\r\n            [minorTicks]=\"{ visible: true, color: '#0000ff' }\"\r\n            [reverse]=\"options.reverse\"\r\n            [startAngle]=\"0\"\r\n            [endAngle]=\"180\"\r\n            [min]=\"options.minValue\"\r\n            [max]=\"options.maxValue\"\r\n            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n            [rangeSize]=\"options.rangeSize\"\r\n            [rangeLineCap]=\"options.rangeLineCap\">\r\n            <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n            </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\">{{ value }}</span>\r\n    </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n",
-                    styles: [""]
-                },] }
-    ];
-    ZgaugeComponent.ctorParameters = function () { return []; };
-    ZgaugeComponent.propDecorators = {
-        data: [{ type: i0.Input }],
-        group: [{ type: i0.Input }],
-        form: [{ type: i0.Input }]
-    };
-
-    var ZgridComponent = /** @class */ (function () {
-        function ZgridComponent(activatedRoute, router, formBuilder, authService, webApiService, zGridStatePersistingService, toastService, zcoreService, storageService, mainService) {
-            var _this = this;
-            this.activatedRoute = activatedRoute;
-            this.router = router;
-            this.formBuilder = formBuilder;
-            this.authService = authService;
-            this.webApiService = webApiService;
-            this.zGridStatePersistingService = zGridStatePersistingService;
-            this.toastService = toastService;
-            this.zcoreService = zcoreService;
-            this.storageService = storageService;
-            this.mainService = mainService;
-            // @ViewChild(ZGridBindingDirective, { static: false }) zgrid: ZGridBindingDirective;
-            this.zgrid = null;
-            this.oauthUrl = null;
-            this.mySelection = [];
-            this.componentProperties = new i3.ZComponentProperties();
-            // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match
-            this._state = {
-                skip: 0,
-                take: 10
-            };
-            this.params = {
-                referId: null,
-                pageNo: 0,
-                pageSize: 20,
-                sortColumnName: "",
-                sortOrder: "",
-                sortColumnNames: [],
-                sortOrders: [],
-                filterParams: [],
-                parameters: "",
-                filters: "",
-                columns: "",
-                grantType: 4
-            };
-            this.gridSubject = new rxjs.Subject();
-            this.gridDefaultStateExist = false;
-            this.setData = function (gData) {
-                _this.gridData = {
-                    data: gData,
-                    total: (gData ? gData.length : 0)
-                };
-                _this.gData = gData;
-                if (!!_this.data.ShowRecordNumber) {
-                    if (_this.gridData.data) {
-                        _this.gridData.data.forEach(function (d, i) {
-                            d.GridNo = i + 1;
-                        });
-                    }
-                }
-                if (_this.gData) {
-                    _this.createFormControls();
-                }
-            };
-            /* Available Functions */
-            this.setEnable = function (status) {
-                _this.componentProperties.isReadOnly = !status;
-            };
-            this.setVisible = function (status) {
-                _this.componentProperties.isVisible = status;
-                _this.data.Visible = status;
-            };
-            this.setRequire = function (status) {
-                _this.componentProperties.isRequired = status;
-                i3.ZComponentHelper.changeValidator(status, _this.group, _this.data.Value, _this.componentProperties, forms.Validators.required);
-            };
-            this.oauthUrl = this.zcoreService.getEnvironment().e1OauthUrl + "/";
-            this.allResults = this.allResults.bind(this);
-            this.refreshData = this.refreshData.bind(this);
-            this.clearData = this.clearData.bind(this);
-            this.saveGridSettings = this.saveGridSettings.bind(this);
-            this.restoreGridSettings = this.restoreGridSettings.bind(this);
-        }
-        ZgridComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            i3.ZComponentHelper.setComponentProperties(this);
-            i3.ZComponentHelper.registerComponent(this);
-            // Grid saved setting key(Used in CookieStore & LocalStorage)
-            this.gridStorageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
-            rxjs.of(true)
-                .pipe(
-            //concatMap(() => {
-            //  // try get gridsetting from cookiestore
-            //  return this.mainService.cookieStoreGet(this.gridStorageKey, this.authService.e1Token.access_token);
-            //}),
-            //switchMap(savedGridCache => {
-            //  if (savedGridCache) {  
-            //    // Keep the gridSetting from cookiestore to localStorage
-            //    this.zGridStatePersistingService.set(this.gridStorageKey, savedGridCache);
-            //    return of(true);
-            //  }
-            //  return of(false);
-            //}),
-            operators.switchMap(function () {
-                // Grid default setting
-                _this.columns = [];
-                _this.widthReduce = _this.data.WidthReduce || 60;
-                _this.heightReduce = _this.data.HeightReduce || 560;
-                _this._state.take = _this.data.PageSize || 20;
-                _this.pageSizes = [20, 50, 100, 200, 500];
-                // [Mobile] Disable PageSize
-                if (_this.data.PageSizes === false || i3.ZComponentHelper.isMobileScreen()) {
-                    _this.pageSizes = false;
-                }
-                // Grid Selection column
-                if (_this.data.SelectOptions) {
-                    _this.selectableSettings = {
-                        // checkboxOnly: this.checkboxOnly,
-                        mode: _this.data.SelectOptions === 'single' ? 'single' : 'multiple'
-                    };
-                }
-                // bind this to group using Grid value
-                if (_this.data.Value.startsWith('group.')) {
-                    var gridValue = _this.data.Value.slice(6);
-                    _this.group[gridValue] = _this;
-                }
-                // clear any Subscription
-                if (_this.subscription) {
-                    _this.subscription.unsubscribe();
-                }
-                // if no ResourceURL, still generate Column first, then insert grid data using DataSource
-                if (!_this.data.ResourceURL) {
-                    _this.generateGridColumns().subscribe(function () {
-                        if (_this.data.DataSource && _this.data.SkipDirective) {
-                            var ds = i3.ZComponentHelper.getGroupValue(_this.data.DataSource, _this.group);
-                            _this.setData(ds);
-                        }
-                    });
-                }
-                // subscribe to set grid setting from directive to component
-                _this.subscription = _this.gridSubject.subscribe(function (grid) {
-                    _this.zgrid = grid;
-                    _this._state = _this.zgrid.state;
-                    _this.columns = _this.zgrid.gridColumns;
-                    if (_this.zgrid && _this.zgrid.grid.data) {
-                        _this.gridData = Object.assign({}, _this.zgrid.grid.data);
-                        _this.createFormControls();
-                    }
-                });
-                // Check Grid setting exist in localstorage
-                _this.stateExist();
-                // Set Filter SessionKey
-                if (_this.data['SaveFilter']) {
-                    _this.setGridSessionKey(_this.group);
-                }
-                return rxjs.of(true);
-            }), operators.tap(function () {
-                _this.gridCallback(_this.group);
-            })).subscribe();
-        };
-        ZgridComponent.prototype.ngOnDestroy = function () {
-            if (this.subscription) {
-                this.subscription.unsubscribe();
-            }
-        };
-        Object.defineProperty(ZgridComponent.prototype, "state", {
-            /* Start Grid State (pagination, sortable, filter, ordering) */
-            get: function () {
-                return this._state;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ZgridComponent.prototype.stateExist = function () {
-            var userGridState = this.zGridStatePersistingService.get(this.gridStorageKey);
-            if (userGridState) {
-                this.gridDefaultStateExist = true;
-            }
-            else {
-                this.gridDefaultStateExist = false;
-            }
-        };
-        ZgridComponent.prototype.dataStateChange = function (state) {
-            if (this.zgrid) {
-                this.zgrid.dataStateChange(state);
-            }
-            else {
-                this.gridData = kendoDataQuery.process(this.gData, state);
-                this.createFormControls();
-            }
-        };
-        ZgridComponent.prototype.filterable = function (value) {
-            if (value === false) {
-                return false;
-            }
-            return true;
-        };
-        ZgridComponent.prototype.sortable = function (value) {
-            if (value === false) {
-                return false;
-            }
-            return true;
-        };
-        ZgridComponent.prototype.locked = function (colSetting) {
-            if (colSetting['enablePinning'] == true) {
-                if (colSetting['pinnedLeft'] == true) {
-                    return true;
-                }
-            }
-            return false;
-        };
-        /* End Grid State (pagination, sortable, filter, ordering) */
-        /* Start Grid Styling, Display */
-        ZgridComponent.prototype.getGridStyle = function () {
-            return {
-                "height.px": this.getGridHeight(),
-                "width.px": window.innerWidth - this.widthReduce
-            }; // "width.px": this.innerWidth - 35
-        };
-        ZgridComponent.prototype.getGridHeight = function () {
-            var gridHeight = window.innerHeight - this.heightReduce;
-            return (gridHeight < 250) ? 250 : gridHeight;
-            // const v = ZComponentHelper.isMobileScreen();
-            // if(v){
-            //   const h = window.innerHeight - this.heightReduce;
-            //   return (h < 250) ? 250 : h;
-            // }else{
-            //   return "auto";
-            // } 
-        };
-        /* End Grid Styling, Display */
-        /* Start Grid Columns */
-        ZgridComponent.prototype.isSelectOption = function () {
-            var selectOptionExist = false;
-            if (this.data.SelectOptions) {
-                this.selectableSettings = {
-                    checkboxOnly: false,
-                    mode: (this.data.SelectOptions == "multiple") ? "multiple" : "single"
-                };
-                selectOptionExist = true;
-            }
-            return selectOptionExist;
-        };
-        ZgridComponent.prototype.setColumns = function (columnName, columns) {
-            this.group[columnName] = this.wrapColumnNamesInFieldElement(columns);
-            this.generateGridColumns().subscribe();
-        };
-        ZgridComponent.prototype.wrapColumnNamesInFieldElement = function (columnList) {
-            return rxjs.of(columnList.map(function (c) {
-                var isHidden = c.Hidden;
-                return {
-                    Name: c.Name,
-                    Value: c.Code,
-                    Type: c.Type,
-                    gridColVisible: !isHidden,
-                    width: 100 + c.Name.length * 4,
-                    enableFiltering: false,
-                    enableSorting: true,
-                    enablePinning: true,
-                    DivClass: "col-xs-12 col-sm-6",
-                    IsEditableInGrid: c.Editable
-                };
-            }));
-        };
-        ZgridComponent.prototype.generateGridColumns = function () {
-            var _this = this;
-            var gridSetting = this.getGridSettings();
-            var columnFields$ = i3.ZComponentHelper.getGroupValue(this.data.ColumnFields, this.group);
-            if (!this.data.ColumnFields) {
-                console.warn('Invalid/Empty grid(' + this.data.Name + ') columnField');
-            }
-            return columnFields$.pipe(operators.tap(function (data) {
-                if (!data) {
-                    console.warn('Invalid/Empty grid(' + _this.data.Name + ') data to generate column');
-                }
-                var fieldName = _this.data['FieldElementName'];
-                _this.columns = [];
-                i3.ZComponentHelper.getGridColumns(data, _this.columns, _this.group, _this.authService, fieldName, gridSetting, null, _this.data);
-            }));
-        };
-        /* End Grid Columns */
-        ZgridComponent.prototype.editModel = function (dataItem) {
-            if (this.data.EditClickURL) {
-                // Edit incell field
-                var colFields = i3.ZComponentHelper.getGroupValue(this.data.ColumnFields, this.group);
-                this.group.subject.next({
-                    type: "zgrid-cellClick",
-                    target: this.data.EditClickURL,
-                    data: dataItem,
-                    columnFields$: colFields
-                });
-            }
-            else {
-                // When clicked route to page
-                this.router.navigate([this.group.editModelURL, dataItem.Id, 'edit'], {
-                    relativeTo: this.activatedRoute
-                });
-            }
-        };
-        ZgridComponent.prototype.gridCallback = function (group) {
-            if (this.data['AfterloadCallback']) {
-                var me = Object.assign({}, this);
-                this.group.subject.next({
-                    type: "zgrid-AfterloadCallback",
-                    target: this.data['AfterloadCallback'],
-                    data: me
-                });
-            }
-        };
-        ZgridComponent.prototype.getData = function () {
-            if (this.zgrid) {
-                this.zgrid.getDataBinding();
-            }
-            if (this.data.SkipDirective) {
-                this.gridData = kendoDataQuery.process(this.gData, this.state);
-                this.createFormControls();
-            }
-        };
-        ZgridComponent.prototype.getGridData = function () {
-            return this.gData;
-        };
-        ZgridComponent.prototype.getFormControl = function (rowIndex, property) {
-            var formArray = this.inlineEditedFormGroups.get('items');
-            return formArray.at(rowIndex).get(property);
-        };
-        ZgridComponent.prototype.createFormControls = function () {
-            var _this = this;
-            if (this.columns) {
-                // only create if there is at least 1 editable column
-                if (this.columns.find(function (c) { return c.isEditableInGrid; }) === undefined) {
-                    return;
-                }
-                this.inlineEditedFormGroups = new forms.FormGroup({ items: new forms.FormArray([]) });
-                this.gridData.data.forEach(function (d) {
-                    var items = {};
-                    _this.columns.forEach(function (c) {
-                        items[c.field] = new forms.FormControl(d[c.field]);
-                    });
-                    var formGroup = new forms.FormGroup(items);
-                    _this.inlineEditedFormGroups.get("items").push(formGroup);
-                });
-            }
-        };
-        ZgridComponent.prototype.createFormGroup = function (dataItem, fieldName) {
-            var _a;
-            return this.formBuilder.group((_a = {},
-                _a[fieldName] = dataItem[fieldName],
-                _a));
-        };
-        ZgridComponent.prototype.getGroupValue = function (value, group) {
-            return i3.ZComponentHelper.getGroupValue(this.data.Value, this.group);
-        };
-        ZgridComponent.prototype.onBtnClick = function (event, colSetting, rowData, cellData) {
-            this.onNavigateTo(event, colSetting, rowData, cellData);
-        };
-        ZgridComponent.prototype.cellClickHandler = function (event) {
-            var _this = this;
-            var disableCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
-            if (!disableCellClickHandler) {
-                var inCellEditable = this.data.InCellEditable ? this.data.InCellEditable : false;
-                if (inCellEditable) {
-                    this.editableColumns = this.columns.filter(function (s) { return s.isEditableInDataItem === true; });
-                    if (!!this.editableColumns) {
-                        this.editableColumns.map(function (s) { return event.sender.editCell(event.rowIndex, event.columnIndex, _this.createFormGroup(event.dataItem, s.field)); });
-                    }
-                }
-                else {
-                    console.log("cellClick event: ", event);
-                    if (this.data.OnItemClick) {
-                        var func = i3.ZComponentHelper.getGroupEvalValue.call(this, this.data.OnItemClick);
-                        if (typeof func === 'function') {
-                            var callFunc = func.bind(this.group.ctrlScope);
-                            callFunc(event);
-                        }
-                        return;
-                    }
-                    this.editModel(event.dataItem);
-                }
-            }
-        };
-        ZgridComponent.prototype.editCellCloseHandler = function (args) {
-            var formGroup = args.formGroup, dataItem = args.dataItem;
-            if (!formGroup.valid) {
-                args.preventDefault();
-            }
-            else if (formGroup.dirty) {
-                this.editableColumns = this.columns.filter(function (s) { return s.isEditableInDataItem === true; });
-                this.editableColumns.map(function (s) {
-                    var _a;
-                    return Object.assign(dataItem, (_a = {}, _a[s.field] = formGroup.value[s.field], _a));
-                });
-                this.mySelection.map(function (s) { return (s.Id === dataItem.Id) ? Object.assign(s, dataItem) : null; });
-            }
-        };
-        ZgridComponent.prototype.onNavigateTo = function (event, clickAction, rowData, cellData) {
-            // debugger;
-            // const n = colSetting.navigateTo.replace('/:id', cellData);
-            var n = i3.ZComponentHelper.getGroupEvalValue.call(this, clickAction.Click);
-            if (n) {
-                event.stopPropagation();
-                this.group.subject.next({
-                    type: 'zgrid-onNavigateTo',
-                    target: clickAction.Click,
-                    rowData: rowData,
-                    data: cellData
-                });
-            }
-        };
-        ZgridComponent.prototype.showTooltip = function (e) {
-            var element = e.target;
-            if ((element.nodeName === 'TD' || element.nodeName === 'TH') &&
-                element.offsetWidth < element.scrollWidth) {
-                this.tooltipDir.toggle(element);
-            }
-            else {
-                this.tooltipDir.hide();
-            }
-        };
-        ZgridComponent.prototype.rowSelectionKey = function (context) {
-            return context.dataItem;
-        };
-        ZgridComponent.prototype.getSeletectedValues = function () {
-            return this.mySelection;
-        };
-        ZgridComponent.prototype.refreshGrid = function (event, group, me) {
-            var _gridOptionSegment = event.target.trim().split('.');
-            var _gridOption = _gridOptionSegment[1];
-            if (_gridOption) {
-                var zgridControl = group[_gridOption];
-                if (zgridControl) {
-                    zgridControl.getData();
-                }
-                else {
-                    console.log('Unable to find grid value: ' + _gridOption);
-                }
-            }
-            else {
-                console.log('Invalid refreshGrid event: ', event);
-            }
-        };
-        ZgridComponent.prototype.refreshData = function () {
-            this.getData();
-        };
-        ZgridComponent.prototype.clearData = function () {
-            this.zgrid.clearData();
-        };
-        ZgridComponent.prototype.allResults = function () {
-            var _zgridControl = this.zgrid;
-            var _zgridComponent = this.zgrid.grid;
-            var _data = _zgridComponent.data;
-            var paginationApiPostUrl = _zgridControl.paginationApiPostUrl;
-            // Need to clone, if not will affect the grid params.
-            var params = Object.assign({}, this.params);
-            params.pageNo = 0;
-            params.pageSize = _data.total;
-            return this.webApiService.httpPost$(paginationApiPostUrl, params).pipe(operators.map(function (data) {
-                var result = {
-                    data: kendoDataQuery.process(data.dataSet, {}).data
-                };
-                return result;
-            }));
-        };
-        ZgridComponent.prototype.getClass = function (dataItem, col) {
-            var ngClass = "gridCell ";
-            if (col.fieldType === 'number' || col.fieldType === 'currency' || col.fieldType === 'znumeric') {
-                ngClass += "rightAligned ";
-            }
-            if (dataItem[col.field + '_Class']) {
-                ngClass += dataItem[col.field + '_Class'] + " ";
-            }
-            if (col.Class) {
-                ngClass += col.Class + " ";
-            }
-            return ngClass;
-        };
-        ZgridComponent.prototype.getFormat = function (col, defaultFormat) {
-            var format = "";
-            if (col.FormatOptions === undefined) {
-                format = defaultFormat ? defaultFormat : "";
-            }
-            else {
-                var formatArr = col.FormatOptions.split(".");
-                var dp = 0;
-                if (formatArr.length > 1) {
-                    dp = formatArr[1].length;
-                }
-                if (dp !== 0) {
-                    format = "1." + dp + "-" + dp;
-                }
-            }
-            return format;
-        };
-        ZgridComponent.prototype.setHeaderText = function (columnName, newHeaderTitle) {
-            var gridColumns = this.columns;
-            gridColumns.forEach(function (col) {
-                if (col.Name === columnName) {
-                    col.title = newHeaderTitle;
-                }
-            });
-        };
-        ZgridComponent.prototype.setGridIsLoading = function (triggered) {
-            this.isLoading = triggered;
-        };
-        ZgridComponent.prototype.setGridSessionKey = function (group) {
-            if (group["GridStorageKey"]) {
-                return;
-            }
-            else {
-                group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
-            }
-        };
-        ZgridComponent.prototype.trackBy = function (index, item) {
-            //console.log(item.data['Id'] || index);
-            return index;
-        };
-        /* Grid configuration function */
-        ZgridComponent.prototype.saveGridSettings = function () {
-            var _this = this;
-            var _zgridComponent = this.zgrid.grid;
-            var _columns = _zgridComponent.columns;
-            rxjs.of(this.columns)
-                .pipe(operators.switchMap(function () {
-                var configValue = _columns.toArray().map(function (item) {
-                    var _zGridColumnSettings = Object.keys(item)
-                        .filter(function (propName) {
-                        return !propName.toLowerCase().includes('template');
-                    })
-                        .reduce(function (acc, curr) {
-                        var _a;
-                        return (Object.assign(Object.assign({}, acc), (_a = {}, _a[curr] = item[curr], _a)));
-                    }, {});
-                    return _zGridColumnSettings;
-                });
-                // remove extra element form array
-                configValue.forEach(function (item) {
-                    delete item['headerStyle'];
-                    delete item['__ngContext__'];
-                });
-                var gridSetting = {
-                    // state: this.state,
-                    columnsConfig: configValue
-                };
-                // Find any setting from localstorage and update, if not just add in.
-                var _arrGridCaching = _this.zGridStatePersistingService.get(_this.gridStorageKey);
-                var _gridConfig = null;
-                if (_arrGridCaching && _arrGridCaching[0]) {
-                    _gridConfig = _arrGridCaching.find(function (x) { return x['dataFormFields'] === _this.gridStorageKey; });
-                    if (_gridConfig) {
-                        _gridConfig.gridSettings = gridSetting;
-                    }
-                }
-                else {
-                    _arrGridCaching = [];
-                }
-                if (!_gridConfig) {
-                    _gridConfig = {
-                        dataFormFields: _this.gridStorageKey,
-                        gridSettings: gridSetting
-                    };
-                    _arrGridCaching.push(_gridConfig);
-                }
-                return _arrGridCaching;
-            }), operators.concatMap(function (gridCache) {
-                // Save grid caching to localstorage
-                _this.zGridStatePersistingService.set(_this.gridStorageKey, gridCache);
-                // Save to CookieStore
-                return _this.mainService.cookieStorePost(_this.gridStorageKey, gridCache);
-            }), operators.tap(function (savedGridCache) {
-                // check is saved state exist to enable/hide restore button
-                _this.stateExist();
-            }), operators.tap(function () {
-                // Alert
-                _this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
-            })).subscribe();
-        };
-        ZgridComponent.prototype.restoreGridSettings = function () {
-            var _this = this;
-            rxjs.of(true)
-                .pipe(operators.switchMap(function () {
-                // Clear localstorage grid setting
-                _this.zGridStatePersistingService.remove(_this.gridStorageKey);
-                return rxjs.of(true);
-            }), operators.switchMap(function () {
-                // delete cookiestore gridSetting by storagekey as name
-                return _this.mainService.cookieStoreDeleteMultiple(_this.gridStorageKey);
-            }), operators.concatMap(function () {
-                // Use original column setting
-                return _this.generateGridColumns();
-            }), operators.tap(function () {
-                // check is saved state exist
-                _this.stateExist();
-                // Alert
-                _this.toastService.show('Grid Setting Restored', "top", true, 2000, 'success');
-            })).subscribe();
-        };
-        ZgridComponent.prototype.getGridSettings = function () {
-            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
-            // Find any setting from localstorage..
-            var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-            if (_arrGridCaching) {
-                var _gridCaching = JSON.parse(_arrGridCaching['Value']);
-                if (_gridCaching) {
-                    return _gridCaching.gridSettings.columnsConfig.sort(function (a, b) { return a.orderIndex - b.orderIndex; });
-                }
-            }
-        };
-        /* Inline setting */
-        ZgridComponent.prototype.getInlineField = function (value) {
-            return this.columns.find(function (x) { return x.Value === value; });
-        };
-        ZgridComponent.prototype.getInlineForm = function (rowIndex) {
-            var formArray = this.inlineEditedFormGroups.get('items');
-            return formArray.at(rowIndex);
-        };
-        ZgridComponent.prototype.getFormControlData = function (value) {
-            return this.inlineEditedFormGroups.value.items;
-        };
-        /* Event */
-        ZgridComponent.prototype.beforeGridGetData = function (group, me) {
-            console.warn("beforeDataBinding triggered");
-            if (!group.beforeGridGetData) {
-                console.warn("group.beforeDataBinding is undefined");
-                return rxjs.of(true);
-            }
-            return group.beforeGridGetData(group, me);
-        };
-        ZgridComponent.prototype.getGridSessionFilter = function (group, me) {
-            return __awaiter(this, void 0, void 0, function () {
-                var StorageKey;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!group["GridStorageKey"]) {
-                                return [2 /*return*/, null];
-                            }
-                            StorageKey = group["GridStorageKey"];
-                            if (!this.storageService) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.storageService.get(StorageKey)
-                                    .then(function (data) {
-                                    if (!data || !data.value || data.value === "null") {
-                                        return null;
-                                    }
-                                    else {
-                                        var result = JSON.parse(data.value);
-                                        _this.state.filter = JSON.parse(result["StateFilter"]);
-                                        _this.params.filterParams = JSON.parse(result["FilterParams"]);
-                                        _this.state.filter.filters.forEach(function (stateFilter) {
-                                            if (stateFilter.field.includes('UTC')) {
-                                                stateFilter.value = new Date(stateFilter.value);
-                                            }
-                                        });
-                                        return data;
-                                    }
-                                })];
-                        case 1:
-                            _a.sent();
-                            return [3 /*break*/, 3];
-                        case 2: return [2 /*return*/, null];
-                        case 3: return [2 /*return*/];
+                showLabels: true,
+                rangeSize: 10,
+            };
+        }
+        ZgaugeComponent.prototype.ngOnInit = function () {
+            i3.ZComponentHelper.setComponentProperties(this);
+            i3.ZComponentHelper.registerComponent(this);
+            if (this.data.Options) {
+                var optionType = typeof (this.data.Options);
+                if (optionType === 'object') {
+                    Object.assign(this.options, this.data.Options);
+                }
+                else if (optionType === 'string') {
+                    var optionValue = i3.ZComponentHelper.getGroupEvalValue.call(this, this.data.Options);
+                    if (typeof (optionValue) === 'object') {
+                        Object.assign(this.options, optionValue);
                     }
-                });
-            });
-        };
-        ZgridComponent.prototype.setGridSessionFilter = function (group, me) {
-            if (!group["GridStorageKey"]) {
-                return null;
-            }
-            var StorageKey = group["GridStorageKey"];
-            var lstGridFilter = {};
-            if (me.state.filter && this.storageService && this.data['SaveFilter']) {
-                //list of data for StateFilter and FilterParams
-                lstGridFilter = { "StateFilter": JSON.stringify(me.state.filter), "FilterParams": JSON.stringify(me.params.filterParams) };
-                //create session storage
-                this.storageService.set(StorageKey, JSON.stringify(lstGridFilter));
+                }
             }
+            this.getFieldDeclarationForSetup(this.data, this.options);
+            this.isLoading = false;
         };
-        /* onchange Events */
-        ZgridComponent.prototype.filterChange = function (event) {
-            if (this.zgrid) {
-                this.zgrid.filterChange(event);
-            }
+        ZgaugeComponent.prototype.getFieldDeclarationForSetup = function (field, options) {
+            options.value = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Value) || options.value;
+            options.title = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Title) || options.title;
+            options.scaleMax = field.Max || options.scaleMax;
+            options.minValue = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MinValue) || options.minValue;
+            options.maxValue = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MaxValue) || options.maxValue;
+            options.colors = i3.ZComponentHelper.getGroupEvalValue.call(this, field.Color) || options.colors;
+            options.transitions = field.Transitions || options.transitions;
+            options.majorTicks = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MajorTicks) || options.majorTicks;
+            options.showLabels = field.ShowLabels || options.showLabels;
+            options.style = field.Style || options.style;
+            options.minorTicks = i3.ZComponentHelper.getGroupEvalValue.call(this, field.MinorTicks) || options.minorTicks;
+            options.reverse = field.Reverse || options.reverse;
+            options.startAngle = i3.ZComponentHelper.getGroupEvalValue.call(this, field.StartAngle) || options.startAngle;
+            options.endAngle = i3.ZComponentHelper.getGroupEvalValue.call(this, field.EndAngle) || options.endAngle;
+            options.rangePlaceholderColor = field.RangePlaceholderColor || options.rangePlaceholderColor;
+            options.rangeFrom = i3.ZComponentHelper.getGroupEvalValue.call(this, field.RangeFrom) || options.rangeFrom;
+            options.rangeTo = i3.ZComponentHelper.getGroupEvalValue.call(this, field.RangeTo) || options.rangeTo;
+            options.rangeColor = field.RangeColor || options.rangeColor;
+            options.rangeLineCap = field.RangeLineCap || options.rangeLineCap;
+            options.rangeSize = field.RangeSize || options.rangeSize;
+            options.GaugeAlignment = i3.ZComponentHelper.getGroupEvalValue.call(this, field.GaugeAlignment) || options.GaugeAlignment;
+            options.paddingValue = options.value.toString() === 'NaN' ? options.GaugeAlignment : '0%';
         };
-        ZgridComponent.prototype.pageChange = function (event) {
-            if (this.zgrid) {
-                this.zgrid.pageChange(event);
-            }
+        ZgaugeComponent.prototype.alignment = function () {
+            var alignmentStyle = {
+                "padding-right": this.options["paddingValue"]
+            };
+            return alignmentStyle;
         };
-        ZgridComponent.prototype.sortChange = function (sort) {
-            if (this.zgrid) {
-                this.zgrid.sortChange(sort);
-            }
+        ZgaugeComponent.prototype.setEnable = function (status) {
+            // const fc = this.group.form.controls[this.data.Value];
+            // status ? fc.enable() : fc.disable();
+            this.componentProperties.isReadOnly = !status;
         };
-        ZgridComponent.prototype.inCellCheckBoxOnChange = function (event, rowIndex, column) {
-            var isChecked = event.detail.checked;
-            this.gData[rowIndex][column.Value] = isChecked;
+        ZgaugeComponent.prototype.setVisible = function (status) {
+            this.componentProperties.isVisible = status;
+            this.data.Visible = status;
         };
-        ZgridComponent.prototype.columnsOrderChanged = function (event) {
-            var _zgridControl = this.zgrid;
-            var _zgridComponent = this.zgrid.grid;
-            var _data = _zgridComponent.data;
-            if (this.zgrid) {
-                var _zgrid = this.zgrid;
-            }
+        ZgaugeComponent.prototype.setRequire = function (status) {
+            this.componentProperties.isRequired = status;
         };
-        return ZgridComponent;
+        ZgaugeComponent.prototype.setData = function (gData) {
+            this.getFieldDeclarationForSetup(this.data, this.options);
+        };
+        return ZgaugeComponent;
     }());
-    ZgridComponent.decorators = [
+    ZgaugeComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "app-zgrid",
-                    template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\">\r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{buttonCount: 5, pageSizes: pageSizes, previousNext: false}\"\r\n                [skip]=\"state.skip\"\r\n                [sort]=\"state.sort\"\r\n                [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                [filter]=\"state.filter\"\r\n                [filterable]=\"data.enableFiltering !== false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"true\"\r\n                [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                [hidden] =\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (pageChange)=\"pageChange($event)\"\r\n                (sortChange)=\"sortChange($event)\"\r\n                (filterChange)=\"filterChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\"\r\n                [ngStyle]=\"getGridStyle()\"\r\n                [trackBy]=\"trackBy\">\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState\">\r\n        <button class=\"k-button\" (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button class=\"k-button\" (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button class=\"k-button\" (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         editor=\"numeric\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n          <ion-button color=\"light\" size=\"small\">\r\n          {{ col.ClickableIcons }}\r\n          <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n          </ion-button>\r\n          </span> -->\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n          <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n            <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n              {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n              </fa-icon>\r\n            </span>\r\n            <ng-template #disabledButton>\r\n            </ng-template>\r\n          </span>\r\n          <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n          <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n            {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n          </span> -->\r\n        </ng-template>\r\n        <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n          <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\">\r\n            {{col.aggregateType}}\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ col.aggregateValue | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ col.aggregateValue | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ col.aggregateValue | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n      <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n",
-                    styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,.1);background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-grid tr.k-alt{background-color:rgba(232,238,246,.5)}:host ::ng-deep kendo-grid tbody tr.k-state-hover,:host ::ng-deep kendo-grid tbody tr:hover{background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:rgba(255,94,91,.4)}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover{color:#ff5e5b;background-color:rgba(255,94,91,.15)}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:hsla(0,0%,100%,.3);color:#0f4800}"]
+                    selector: 'app-zgauge',
+                    template: "<div *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"text-align: center;\">\r\n  <div id=\"marketShareContainer\" class=\"ion-row\" class=\"col-xs-12 stats-graph\">\r\n    <h6 style=\"color: gray;\">{{ options.title }}</h6>\r\n  </div>\r\n  <div [ngStyle]='alignment()'>\r\n    <kendo-arcgauge [value]=\"options.value\" [transitions]=\"options.transitions\" [colors]=\"options.colors\" style=\"margin-top:50px;width:90% ;height:100%; min-width: 330px;\">\r\n      <kendo-arcgauge-scale\r\n            [majorTicks]=\"{ visible: true, color: '#0000ff' }\"\r\n            [minorTicks]=\"{ visible: true, color: '#0000ff' }\"\r\n            [reverse]=\"options.reverse\"\r\n            [startAngle]=\"0\"\r\n            [endAngle]=\"180\"\r\n            [min]=\"options.minValue\"\r\n            [max]=\"options.maxValue\"\r\n            [rangePlaceholderColor]=\"options.rangePlaceholderColor\"\r\n            [rangeSize]=\"options.rangeSize\"\r\n            [rangeLineCap]=\"options.rangeLineCap\">\r\n            <kendo-arcgauge-scale-labels format=\"l\" [color]=\"options.labelsColor\" [visible]=\"options.showLabels\">\r\n            </kendo-arcgauge-scale-labels>\r\n      </kendo-arcgauge-scale>\r\n      <ng-template kendoArcGaugeCenterTemplate let-value=\"value\" let-color=\"color\">\r\n        <span [style.color]=\"color\">{{ value }}</span>\r\n    </ng-template>\r\n    </kendo-arcgauge>\r\n  </div>\r\n</div>\r\n",
+                    styles: [""]
                 },] }
     ];
-    ZgridComponent.ctorParameters = function () { return [
-        { type: i1.ActivatedRoute },
-        { type: i1.Router },
-        { type: forms.FormBuilder },
-        { type: i3.AuthService },
-        { type: i3.WebApiService },
-        { type: i3.ZGridStatePersistingService },
-        { type: i3.ToastService },
-        { type: i3.ZCoreService },
-        { type: i3.StorageSessionService },
-        { type: MainService }
-    ]; };
-    ZgridComponent.propDecorators = {
+    ZgaugeComponent.ctorParameters = function () { return []; };
+    ZgaugeComponent.propDecorators = {
         data: [{ type: i0.Input }],
         group: [{ type: i0.Input }],
-        form: [{ type: i0.Input }],
-        tooltipDir: [{ type: i0.ViewChild, args: [kendoAngularTooltip.TooltipDirective,] }]
+        form: [{ type: i0.Input }]
     };
 
-    /********** Angular **********/
-    var ZgridcalendarComponent = /** @class */ (function () {
-        function ZgridcalendarComponent(activatedRoute, router, formBuilder, authService, webApiService, zGridStatePersistingService, toastService, zcoreService) {
+    var ZgridComponent = /** @class */ (function () {
+        function ZgridComponent(activatedRoute, router, formBuilder, authService, webApiService, zGridStatePersistingService, toastService, zcoreService, storageService, mainService) {
             var _this = this;
             this.activatedRoute = activatedRoute;
             this.router = router;
@@ -6288,6 +5252,9 @@
             this.zGridStatePersistingService = zGridStatePersistingService;
             this.toastService = toastService;
             this.zcoreService = zcoreService;
+            this.storageService = storageService;
+            this.mainService = mainService;
+            // @ViewChild(ZGridBindingDirective, { static: false }) zgrid: ZGridBindingDirective;
             this.zgrid = null;
             this.oauthUrl = null;
             this.mySelection = [];
@@ -6312,23 +5279,17 @@
                 grantType: 4
             };
             this.gridSubject = new rxjs.Subject();
-            this.setEnable = function (status) {
-                _this.componentProperties.isReadOnly = !status;
-            };
-            this.setVisible = function (status) {
-                _this.componentProperties.isVisible = status;
-                _this.data.Visible = status;
-            };
-            this.setRequire = function (status) {
-                _this.componentProperties.isRequired = status;
-                i3.ZComponentHelper.changeValidator(status, _this.group, _this.data.Value, _this.componentProperties, forms.Validators.required);
-            };
+            this.gridDefaultStateExist = false;
+            this.isNew = true;
             this.setData = function (gData) {
                 _this.gridData = {
                     data: gData,
                     total: (gData ? gData.length : 0)
                 };
                 _this.gData = gData;
+                if (_this.zgrid) {
+                    _this.zgrid.grid['pageSize'] = gData.length; // set grid size
+                }
                 if (!!_this.data.ShowRecordNumber) {
                     if (_this.gridData.data) {
                         _this.gridData.data.forEach(function (d, i) {
@@ -6336,7 +5297,21 @@
                         });
                     }
                 }
-                _this.createFormControls();
+                if (_this.gData) {
+                    _this.createFormControls();
+                }
+            };
+            /* Available Functions */
+            this.setEnable = function (status) {
+                _this.componentProperties.isReadOnly = !status;
+            };
+            this.setVisible = function (status) {
+                _this.componentProperties.isVisible = status;
+                _this.data.Visible = status;
+            };
+            this.setRequire = function (status) {
+                _this.componentProperties.isRequired = status;
+                i3.ZComponentHelper.changeValidator(status, _this.group, _this.data.Value, _this.componentProperties, forms.Validators.required);
             };
             this.oauthUrl = this.zcoreService.getEnvironment().e1OauthUrl + "/";
             this.allResults = this.allResults.bind(this);
@@ -6345,80 +5320,232 @@
             this.saveGridSettings = this.saveGridSettings.bind(this);
             this.restoreGridSettings = this.restoreGridSettings.bind(this);
         }
-        ZgridcalendarComponent.prototype.ngOnInit = function () {
+        ZgridComponent.prototype.ngOnInit = function () {
             var _this = this;
             i3.ZComponentHelper.setComponentProperties(this);
             i3.ZComponentHelper.registerComponent(this);
-            this.columns = [];
-            this.widthReduce = this.data.WidthReduce || 60;
-            this.heightReduce = this.data.HeightReduce || 560;
-            this._state.take = this.data.PageSize || 20;
-            this.pageSizes = [20, 50, 100, 200, 500];
-            if (this.data.PageSizes === false || i3.ZComponentHelper.isMobileScreen()) {
-                this.pageSizes = false;
+            // Grid saved setting key(Used in CookieStore & LocalStorage)
+            this.gridStorageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
+            rxjs.of(true)
+                .pipe(
+            //concatMap(() => {
+            //  // try get gridsetting from cookiestore
+            //  return this.mainService.cookieStoreGet(this.gridStorageKey, this.authService.e1Token.access_token);
+            //}),
+            //switchMap(savedGridCache => {
+            //  if (savedGridCache) {  
+            //    // Keep the gridSetting from cookiestore to localStorage
+            //    this.zGridStatePersistingService.set(this.gridStorageKey, savedGridCache);
+            //    return of(true);
+            //  }
+            //  return of(false);
+            //}),
+            operators.switchMap(function () {
+                // Grid default setting
+                _this.columns = [];
+                _this.widthReduce = _this.data.WidthReduce || 60;
+                _this.heightReduce = _this.data.HeightReduce || 560;
+                _this._state.take = _this.data.PageSize || 20;
+                _this.pageSizes = [20, 50, 100, 200, 500];
+                _this.previousNext = _this.data['EnablePreviousNextButton'] || false;
+                // [Mobile] Disable PageSize
+                if (_this.data.PageSizes === false || i3.ZComponentHelper.isMobileScreen()) {
+                    _this.pageSizes = false;
+                }
+                // Grid Selection column
+                if (_this.data.SelectOptions) {
+                    _this.selectableSettings = {
+                        // checkboxOnly: this.checkboxOnly,
+                        mode: _this.data.SelectOptions === 'single' ? 'single' : 'multiple'
+                    };
+                }
+                // bind this to group using Grid value
+                if (_this.data.Value.startsWith('group.')) {
+                    var gridValue = _this.data.Value.slice(6);
+                    _this.group[gridValue] = _this;
+                }
+                // clear any Subscription
+                if (_this.subscription) {
+                    _this.subscription.unsubscribe();
+                }
+                // if no ResourceURL, still generate Column first, then insert grid data using DataSource
+                if (!_this.data.ResourceURL) {
+                    _this.generateGridColumns().subscribe(function () {
+                        if (_this.data.DataSource && _this.data.SkipDirective) {
+                            var ds = i3.ZComponentHelper.getGroupValue(_this.data.DataSource, _this.group);
+                            _this.setData(ds);
+                        }
+                    });
+                }
+                // subscribe to set grid setting from directive to component
+                _this.subscription = _this.gridSubject.subscribe(function (grid) {
+                    _this.zgrid = grid;
+                    _this._state = _this.zgrid.state;
+                    _this.columns = _this.zgrid.gridColumns;
+                    if (_this.zgrid && _this.zgrid.grid.data) {
+                        _this.gridData = Object.assign({}, _this.zgrid.grid.data);
+                        _this.createFormControls();
+                    }
+                });
+                // Check Grid setting exist in localstorage
+                _this.stateExist();
+                // Set Filter SessionKey
+                if (_this.data['SaveFilter']) {
+                    _this.setGridSessionKey(_this.group);
+                }
+                return rxjs.of(true);
+            }), operators.tap(function () {
+                _this.gridCallback(_this.group);
+            })).subscribe();
+        };
+        ZgridComponent.prototype.ngOnDestroy = function () {
+            if (this.subscription) {
+                this.subscription.unsubscribe();
             }
-            if (this.data.SelectOptions) {
-                this.selectableSettings = {
-                    // checkboxOnly: this.checkboxOnly,
-                    mode: this.data.SelectOptions === 'single' ? 'single' : 'multiple'
-                };
+        };
+        Object.defineProperty(ZgridComponent.prototype, "state", {
+            /* Start Grid State (pagination, sortable, filter, ordering) */
+            get: function () {
+                return this._state;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ZgridComponent.prototype.stateExist = function () {
+            var userGridState = this.zGridStatePersistingService.get(this.gridStorageKey);
+            if (userGridState) {
+                this.gridDefaultStateExist = true;
             }
-            if (this.data.Value.startsWith('group.')) {
-                var v = this.data.Value.slice(6);
-                this.group[v] = this;
+            else {
+                this.gridDefaultStateExist = false;
+            }
+        };
+        ZgridComponent.prototype.dataStateChange = function (state) {
+            if (this.zgrid) {
+                this.zgrid.dataStateChange(state);
             }
-            if (this.subscription) {
-                this.subscription.unsubscribe();
+            else {
+                this.gridData = kendoDataQuery.process(this.gData, state);
+                this.createFormControls();
             }
-            if (!this.data.ResourceURL) {
-                this.generateGridColumns().subscribe(function () {
-                    if (_this.data.DataSource && _this.data.SkipDirective) {
-                        var ds = i3.ZComponentHelper.getGroupValue(_this.data.DataSource, _this.group);
-                        _this.setData(ds);
-                    }
-                });
+        };
+        ZgridComponent.prototype.filterable = function (value) {
+            if (value === false) {
+                return false;
             }
-            this.subscription = this.gridSubject.subscribe(function (grid) {
-                _this.zgrid = grid;
-                _this._state = _this.zgrid.state;
-                _this.columns = _this.zgrid.gridColumns;
-                if (_this.zgrid && _this.zgrid.grid.data) {
-                    _this.gridData = Object.assign({}, _this.zgrid.grid.data);
-                    _this.createFormControls();
-                }
-            });
-            //Set Filter SessionKey
-            if (this.data['SaveFilter']) {
-                this.setGridSessionKey(this.group);
+            return true;
+        };
+        ZgridComponent.prototype.sortable = function (value) {
+            if (value === false) {
+                return false;
             }
+            return true;
         };
-        ZgridcalendarComponent.prototype.ngOnDestroy = function () {
-            if (this.subscription) {
-                this.subscription.unsubscribe();
+        ZgridComponent.prototype.locked = function (colSetting) {
+            if (colSetting['pinnedLeft'] == true) {
+                return true;
             }
+            return false;
         };
-        ZgridcalendarComponent.prototype.getGridStyle = function () {
+        /* End Grid State (pagination, sortable, filter, ordering) */
+        /* Start Grid Styling, Display */
+        ZgridComponent.prototype.getGridStyle = function () {
             return {
                 "height.px": this.getGridHeight(),
                 "width.px": window.innerWidth - this.widthReduce
-            };
+            }; // "width.px": this.innerWidth - 35
         };
-        ZgridcalendarComponent.prototype.isSelectOption = function () {
-            var v = false;
+        ZgridComponent.prototype.getGridHeight = function () {
+            var gridHeight = window.innerHeight - this.heightReduce;
+            return (gridHeight < 250) ? 250 : gridHeight;
+            // const v = ZComponentHelper.isMobileScreen();
+            // if(v){
+            //   const h = window.innerHeight - this.heightReduce;
+            //   return (h < 250) ? 250 : h;
+            // }else{
+            //   return "auto";
+            // } 
+        };
+        /* End Grid Styling, Display */
+        /* Start Grid Columns */
+        ZgridComponent.prototype.isSelectOption = function () {
+            var selectOptionExist = false;
             if (this.data.SelectOptions) {
                 this.selectableSettings = {
                     checkboxOnly: false,
                     mode: (this.data.SelectOptions == "multiple") ? "multiple" : "single"
                 };
-                v = true;
+                selectOptionExist = true;
             }
-            return v;
+            return selectOptionExist;
         };
-        ZgridcalendarComponent.prototype.getGridHeight = function () {
-            var h = window.innerHeight - this.heightReduce;
-            return (h < 250) ? 250 : h;
+        ZgridComponent.prototype.setColumns = function (columnName, columns) {
+            this.group[columnName] = this.wrapColumnNamesInFieldElement(columns);
+            this.generateGridColumns().subscribe();
+        };
+        ZgridComponent.prototype.wrapColumnNamesInFieldElement = function (columnList) {
+            return rxjs.of(columnList.map(function (c) {
+                var isHidden = c.Hidden;
+                return {
+                    Name: c.Name,
+                    Value: c.Code,
+                    Type: c.Type,
+                    gridColVisible: !isHidden,
+                    width: 100 + c.Name.length * 4,
+                    enableFiltering: false,
+                    enableSorting: true,
+                    enablePinning: true,
+                    DivClass: "col-xs-12 col-sm-6",
+                    IsEditableInGrid: c.Editable
+                };
+            }));
+        };
+        ZgridComponent.prototype.generateGridColumns = function () {
+            var _this = this;
+            var gridSetting = this.getGridSettings();
+            var columnFields$ = i3.ZComponentHelper.getGroupValue(this.data.ColumnFields, this.group);
+            if (!this.data.ColumnFields) {
+                console.warn('Invalid/Empty grid(' + this.data.Name + ') columnField');
+            }
+            return columnFields$.pipe(operators.tap(function (data) {
+                if (!data) {
+                    console.warn('Invalid/Empty grid(' + _this.data.Name + ') data to generate column');
+                }
+                var fieldName = _this.data['FieldElementName'];
+                _this.columns = [];
+                i3.ZComponentHelper.getGridColumns(data, _this.columns, _this.group, _this.authService, fieldName, gridSetting, null, _this.data);
+            }));
+        };
+        /* End Grid Columns */
+        ZgridComponent.prototype.editModel = function (dataItem) {
+            if (this.data.EditClickURL) {
+                // Edit incell field
+                var colFields = i3.ZComponentHelper.getGroupValue(this.data.ColumnFields, this.group);
+                this.group.subject.next({
+                    type: "zgrid-cellClick",
+                    target: this.data.EditClickURL,
+                    data: dataItem,
+                    columnFields$: colFields
+                });
+            }
+            else {
+                // When clicked route to page
+                this.router.navigate([this.group.editModelURL, dataItem.Id, 'edit'], {
+                    relativeTo: this.activatedRoute
+                });
+            }
+        };
+        ZgridComponent.prototype.gridCallback = function (group) {
+            if (this.data['AfterloadCallback']) {
+                var me = Object.assign({}, this);
+                this.group.subject.next({
+                    type: "zgrid-AfterloadCallback",
+                    target: this.data['AfterloadCallback'],
+                    data: me
+                });
+            }
         };
-        ZgridcalendarComponent.prototype.getData = function () {
+        ZgridComponent.prototype.getData = function () {
             if (this.zgrid) {
                 this.zgrid.getDataBinding();
             }
@@ -6427,60 +5554,56 @@
                 this.createFormControls();
             }
         };
-        ZgridcalendarComponent.prototype.getGridData = function () {
+        ZgridComponent.prototype.getGridData = function () {
             return this.gData;
         };
-        ZgridcalendarComponent.prototype.getFormControl = function (rowIndex, property) {
+        ZgridComponent.prototype.getFormControl = function (rowIndex, property) {
             var formArray = this.inlineEditedFormGroups.get('items');
-            return formArray.at(rowIndex).get(property);
-        };
-        ZgridcalendarComponent.prototype.createFormControls = function () {
-            var _this = this;
-            // only create if there is at least 1 editable column
-            if (this.columns.find(function (c) { return c.isEditableInGrid; }) === undefined) {
-                return;
-            }
-            this.inlineEditedFormGroups = new forms.FormGroup({ items: new forms.FormArray([]) });
-            this.gridData.data.forEach(function (d) {
-                var items = {};
-                _this.columns.forEach(function (c) {
-                    items[c.field] = new forms.FormControl(d[c.field]);
-                });
-                var formGroup = new forms.FormGroup(items);
-                _this.inlineEditedFormGroups.get("items").push(formGroup);
-            });
-        };
-        Object.defineProperty(ZgridcalendarComponent.prototype, "state", {
-            get: function () {
-                return this._state;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ZgridcalendarComponent.prototype.dataStateChange = function (state) {
-            if (this.zgrid) {
-                this.zgrid.dataStateChange(state);
+            var formItem = formArray.at(rowIndex);
+            if (formItem) {
+                return formItem.get(property);
             }
             else {
-                this.gridData = kendoDataQuery.process(this.gData, state);
-                this.createFormControls();
+                return null;
             }
         };
-        ZgridcalendarComponent.prototype.filterChange = function (event) {
-            if (this.zgrid) {
-                this.zgrid.filterChange(event);
+        ZgridComponent.prototype.createFormControls = function () {
+            var _this = this;
+            if (this.columns) {
+                // only create if there is at least 1 editable column
+                if (this.columns.find(function (c) { return c.isEditableInGrid; }) === undefined) {
+                    return;
+                }
+                this.inlineEditedFormGroups = new forms.FormGroup({ items: new forms.FormArray([]) });
+                if (Array.isArray(this.gridData.data)) {
+                    this.gridData.data.forEach(function (d) {
+                        var items = {};
+                        _this.columns.forEach(function (c) {
+                            items[c.field] = new forms.FormControl(d[c.field]);
+                        });
+                        var formGroup = new forms.FormGroup(items);
+                        _this.inlineEditedFormGroups.get("items").push(formGroup);
+                    });
+                }
             }
         };
-        ZgridcalendarComponent.prototype.getGroupValue = function (value, group) {
+        ZgridComponent.prototype.createFormGroup = function (dataItem, fieldName) {
+            var _a;
+            return this.formBuilder.group((_a = {},
+                _a[fieldName] = dataItem[fieldName],
+                _a));
+        };
+        ZgridComponent.prototype.getGroupValue = function (value, group) {
             return i3.ZComponentHelper.getGroupValue(this.data.Value, this.group);
         };
-        ZgridcalendarComponent.prototype.onBtnClick = function (event, colSetting, rowData, cellData) {
+        ZgridComponent.prototype.onBtnClick = function (event, colSetting, rowData, cellData) {
             this.onNavigateTo(event, colSetting, rowData, cellData);
         };
-        ZgridcalendarComponent.prototype.cellClickHandler = function (event) {
+        ZgridComponent.prototype.cellClickHandler = function (event) {
             var _this = this;
-            var disableCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
-            if (!disableCellClickHandler) {
+            var disableAllColumnCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
+            var isCommandColumn = event.column.constructor.name == 'CommandColumnComponent' ? true : false;
+            if (!disableAllColumnCellClickHandler && !isCommandColumn) {
                 var inCellEditable = this.data.InCellEditable ? this.data.InCellEditable : false;
                 if (inCellEditable) {
                     this.editableColumns = this.columns.filter(function (s) { return s.isEditableInDataItem === true; });
@@ -6498,10 +5621,11 @@
                         }
                         return;
                     }
+                    this.editModel(event.dataItem);
                 }
             }
         };
-        ZgridcalendarComponent.prototype.editCellCloseHandler = function (args) {
+        ZgridComponent.prototype.editCellCloseHandler = function (args) {
             var formGroup = args.formGroup, dataItem = args.dataItem;
             if (!formGroup.valid) {
                 args.preventDefault();
@@ -6515,13 +5639,9 @@
                 this.mySelection.map(function (s) { return (s.Id === dataItem.Id) ? Object.assign(s, dataItem) : null; });
             }
         };
-        ZgridcalendarComponent.prototype.createFormGroup = function (dataItem, fieldName) {
-            var _a;
-            return this.formBuilder.group((_a = {},
-                _a[fieldName] = dataItem[fieldName],
-                _a));
-        };
-        ZgridcalendarComponent.prototype.onNavigateTo = function (event, clickAction, rowData, cellData) {
+        ZgridComponent.prototype.onNavigateTo = function (event, clickAction, rowData, cellData) {
+            // debugger;
+            // const n = colSetting.navigateTo.replace('/:id', cellData);
             var n = i3.ZComponentHelper.getGroupEvalValue.call(this, clickAction.Click);
             if (n) {
                 event.stopPropagation();
@@ -6533,44 +5653,28 @@
                 });
             }
         };
-        ZgridcalendarComponent.prototype.setColumns = function (columnName, columns) {
-            this.group[columnName] = this.wrapColumnNamesInFieldElement(columns);
-            this.generateGridColumns().subscribe();
-        };
-        ZgridcalendarComponent.prototype.wrapColumnNamesInFieldElement = function (columnList) {
-            return rxjs.of(columnList.map(function (c) {
-                var isHidden = c.Hidden;
-                return {
-                    Name: c.Name,
-                    Value: c.Code,
-                    Type: c.Type,
-                    gridColVisible: !isHidden,
-                    width: 100 + c.Name.length * 4,
-                    enableFiltering: false,
-                    enableSorting: true,
-                    enablePinning: true,
-                    DivClass: "col-xs-12 col-sm-6",
-                    IsEditableInGrid: c.Editable
-                };
-            }));
-        };
-        ZgridcalendarComponent.prototype.generateGridColumns = function () {
-            var _this = this;
-            var columnFields$ = i3.ZComponentHelper.getGroupValue(this.data.ColumnFields, // "group.gridCalendarColumnFields"
-            this.group);
-            return columnFields$.pipe(operators.tap(function (data) {
-                var fieldName = _this.data['FieldElementName'];
-                _this.columns = [];
-                i3.ZComponentHelper.getGridColumns(data, _this.columns, _this.group, _this.authService, fieldName, null, null, _this.data);
-            }));
+        ZgridComponent.prototype.showTooltip = function (e) {
+            var element = e.target;
+            var isCommandColumn = false;
+            element.classList.forEach(function (data) {
+                if (data == 'k-command-cell') {
+                    isCommandColumn = true;
+                }
+            });
+            if (((element.nodeName === 'TD' || element.nodeName === 'TH') && element.offsetWidth < element.scrollWidth) && !isCommandColumn) {
+                this.tooltipDir.toggle(element);
+            }
+            else {
+                this.tooltipDir.hide();
+            }
         };
-        ZgridcalendarComponent.prototype.rowSelectionKey = function (context) {
+        ZgridComponent.prototype.rowSelectionKey = function (context) {
             return context.dataItem;
         };
-        ZgridcalendarComponent.prototype.getSeletectedValues = function () {
+        ZgridComponent.prototype.getSeletectedValues = function () {
             return this.mySelection;
         };
-        ZgridcalendarComponent.prototype.refreshGrid = function (event, group, me) {
+        ZgridComponent.prototype.refreshGrid = function (event, group, me) {
             var _gridOptionSegment = event.target.trim().split('.');
             var _gridOption = _gridOptionSegment[1];
             if (_gridOption) {
@@ -6586,13 +5690,13 @@
                 console.log('Invalid refreshGrid event: ', event);
             }
         };
-        ZgridcalendarComponent.prototype.refreshData = function () {
+        ZgridComponent.prototype.refreshData = function () {
             this.getData();
         };
-        ZgridcalendarComponent.prototype.clearData = function () {
+        ZgridComponent.prototype.clearData = function () {
             this.zgrid.clearData();
         };
-        ZgridcalendarComponent.prototype.allResults = function () {
+        ZgridComponent.prototype.allResults = function () {
             var _zgridControl = this.zgrid;
             var _zgridComponent = this.zgrid.grid;
             var _data = _zgridComponent.data;
@@ -6604,114 +5708,11 @@
             return this.webApiService.httpPost$(paginationApiPostUrl, params).pipe(operators.map(function (data) {
                 var result = {
                     data: kendoDataQuery.process(data.dataSet, {}).data
-                };
-                return result;
-            }));
-        };
-        ZgridcalendarComponent.prototype.columnsOrderChanged = function (event) {
-            var _zgridControl = this.zgrid;
-            var _zgridComponent = this.zgrid.grid;
-            var _data = _zgridComponent.data;
-            if (this.zgrid) {
-                var _zgrid = this.zgrid;
-            }
-        };
-        ZgridcalendarComponent.prototype.saveGridSettings = function () {
-            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-            var _gridName = this.data.Name + '::' + this.data.Value;
-            var _zgridComponent = this.zgrid.grid;
-            var _columns = _zgridComponent.columns;
-            // Keep existing grid column setting
-            this.zGridStatePersistingService.set(_gridName, this.columns);
-            var configValue = _columns.toArray().map(function (item) {
-                var _zGridColumnSettings = Object.keys(item)
-                    .filter(function (propName) {
-                    return !propName.toLowerCase().includes('template');
-                })
-                    .reduce(function (acc, curr) {
-                    var _a;
-                    return (Object.assign(Object.assign({}, acc), (_a = {}, _a[curr] = item[curr], _a)));
-                }, {});
-                return _zGridColumnSettings;
-            });
-            // remove extra element form array
-            configValue.forEach(function (item) {
-                delete item['headerStyle'];
-                delete item['__ngContext__'];
-            });
-            var gridSetting = {
-                // state: this.state,
-                columnsConfig: configValue
-            };
-            // Find any setting from localstorage and update, if not just add in.
-            var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-            var _gridConfig = null;
-            if (_arrGridCaching && _arrGridCaching[0]) {
-                _gridConfig = _arrGridCaching.find(function (x) { return x['dataFormFields'] === _gridName; });
-                if (_gridConfig) {
-                    _gridConfig.gridSettings = gridSetting;
-                }
-            }
-            else {
-                _arrGridCaching = [];
-            }
-            if (!_gridConfig) {
-                _gridConfig = {
-                    dataFormFields: _gridName,
-                    gridSettings: gridSetting
-                };
-                _arrGridCaching.push(_gridConfig);
-            }
-            // Save grid caching to localstorage
-            this.zGridStatePersistingService.set(_storageKey, _arrGridCaching);
-            // Save grid caching to database
-            this.postGridSetting(_storageKey, _arrGridCaching);
-            // Alert
-            this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
-        };
-        ZgridcalendarComponent.prototype.restoreGridSettings = function () {
-            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-            var _gridName = this.data.Name + '::' + this.data.Value;
-            // Find any setting from localstorage..
-            var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-            if (_arrGridCaching && _arrGridCaching[0]) {
-                var _gridIndex = _arrGridCaching.findIndex(function (x) { return x['dataFormFields'] === _gridName; });
-                if (_gridIndex != null) {
-                    _arrGridCaching.splice(_gridIndex, 1);
-                    if (_arrGridCaching[0]) {
-                        this.zGridStatePersistingService.set(_storageKey, _arrGridCaching);
-                        // Save grid caching to database
-                        this.postGridSetting(_storageKey, _arrGridCaching);
-                    }
-                    else {
-                        // Remove since no value
-                        this.zGridStatePersistingService.remove(_storageKey);
-                        var _deleteCookieStoreURL = this.oauthUrl + "Admin/DeleteMultipleCookies";
-                        var _deleteCookieStoreValue = { 'containName': _storageKey };
-                        this.webApiService.httpPost$(_deleteCookieStoreURL, _deleteCookieStoreValue).subscribe();
-                    }
-                    // Use original column setting
-                    this.columns = this.zGridStatePersistingService.get(_gridName);
-                    // Clear original column setting
-                    this.zGridStatePersistingService.remove(_gridName);
-                    // Alert
-                    this.toastService.show('Grid Setting Restored', "top", true, 2000, 'success');
-                }
-            }
-        };
-        ZgridcalendarComponent.prototype.postGridSetting = function (_storageKey, _arrGridCaching) {
-            var _cookieStoreURL = this.oauthUrl + "api/CookieStores";
-            var _cookieStoreValue = {
-                'Name': _storageKey,
-                'Value': JSON.stringify(_arrGridCaching)
-            };
-            this.webApiService.httpPost$(_cookieStoreURL, _cookieStoreValue).subscribe(function (res) {
-                if (res.status === "success") {
-                    console.log("grid config saved: ", res);
-                }
-            });
+                };
+                return result;
+            }));
         };
-        ZgridcalendarComponent.prototype.getClass = function (dataItem, col) {
+        ZgridComponent.prototype.getClass = function (dataItem, col) {
             var ngClass = "gridCell ";
             if (col.fieldType === 'number' || col.fieldType === 'currency' || col.fieldType === 'znumeric') {
                 ngClass += "rightAligned ";
@@ -6724,14 +5725,7 @@
             }
             return ngClass;
         };
-        ZgridcalendarComponent.prototype.getInlineField = function (value) {
-            return this.columns.find(function (x) { return x.Value === value; });
-        };
-        ZgridcalendarComponent.prototype.getInlineForm = function (rowIndex) {
-            var formArray = this.inlineEditedFormGroups.get('items');
-            return formArray.at(rowIndex);
-        };
-        ZgridcalendarComponent.prototype.getFormat = function (col, defaultFormat) {
+        ZgridComponent.prototype.getFormat = function (col, defaultFormat) {
             var format = "";
             if (col.FormatOptions === undefined) {
                 format = defaultFormat ? defaultFormat : "";
@@ -6748,7 +5742,7 @@
             }
             return format;
         };
-        ZgridcalendarComponent.prototype.setHeaderText = function (columnName, newHeaderTitle) {
+        ZgridComponent.prototype.setHeaderText = function (columnName, newHeaderTitle) {
             var gridColumns = this.columns;
             gridColumns.forEach(function (col) {
                 if (col.Name === columnName) {
@@ -6756,61 +5750,322 @@
                 }
             });
         };
-        ZgridcalendarComponent.prototype.inCellCheckBoxOnChange = function (event, rowIndex, column) {
-            var isChecked = event.detail.checked;
-            this.gData[rowIndex][column.Value] = isChecked;
-        };
-        ZgridcalendarComponent.prototype.setGridIsLoading = function (triggered) {
+        ZgridComponent.prototype.setGridIsLoading = function (triggered) {
             this.isLoading = triggered;
         };
-        ZgridcalendarComponent.prototype.filterable = function (value) {
-            if (value === false) {
-                return false;
+        ZgridComponent.prototype.setGridSessionKey = function (group) {
+            if (group["GridStorageKey"]) {
+                return;
             }
-            return true;
-        };
-        ZgridcalendarComponent.prototype.sortable = function (value) {
-            if (value === false) {
-                return false;
+            else {
+                group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
             }
-            return true;
         };
-        ZgridcalendarComponent.prototype.locked = function (colSetting) {
-            if (colSetting['enablePinning'] == true) {
-                if (colSetting['pinnedLeft'] == true) {
-                    return true;
+        ZgridComponent.prototype.trackBy = function (index, item) {
+            //console.log(item.data['Id'] || index);
+            return index;
+        };
+        /* Grid configuration function */
+        ZgridComponent.prototype.saveGridSettings = function () {
+            var _this = this;
+            var _zgridComponent = this.zgrid.grid;
+            var _columns = _zgridComponent.columns;
+            rxjs.of(this.columns)
+                .pipe(operators.switchMap(function () {
+                var configValue = _columns.toArray().map(function (item) {
+                    var _zGridColumnSettings = Object.keys(item)
+                        .filter(function (propName) {
+                        return !propName.toLowerCase().includes('template');
+                    })
+                        .reduce(function (acc, curr) {
+                        var _a;
+                        return (Object.assign(Object.assign({}, acc), (_a = {}, _a[curr] = item[curr], _a)));
+                    }, {});
+                    return _zGridColumnSettings;
+                });
+                // remove extra element form array
+                configValue.forEach(function (item) {
+                    delete item['headerStyle'];
+                    delete item['__ngContext__'];
+                });
+                var gridSetting = {
+                    // state: this.state,
+                    columnsConfig: configValue
+                };
+                // Find any setting from localstorage and update, if not just add in.
+                var _arrGridCaching = _this.zGridStatePersistingService.get(_this.gridStorageKey);
+                var _gridConfig = null;
+                if (_arrGridCaching && _arrGridCaching[0]) {
+                    _gridConfig = _arrGridCaching.find(function (x) { return x['dataFormFields'] === _this.gridStorageKey; });
+                    if (_gridConfig) {
+                        _gridConfig.gridSettings = gridSetting;
+                    }
+                }
+                else {
+                    _arrGridCaching = [];
+                }
+                if (!_gridConfig) {
+                    _gridConfig = {
+                        dataFormFields: _this.gridStorageKey,
+                        gridSettings: gridSetting
+                    };
+                    _arrGridCaching.push(_gridConfig);
+                }
+                return _arrGridCaching;
+            }), operators.concatMap(function (gridCache) {
+                // Save grid caching to localstorage
+                _this.zGridStatePersistingService.set(_this.gridStorageKey, gridCache);
+                // Save to CookieStore
+                return _this.mainService.cookieStorePost(_this.gridStorageKey, gridCache);
+            }), operators.tap(function (savedGridCache) {
+                // check is saved state exist to enable/hide restore button
+                _this.stateExist();
+            }), operators.tap(function () {
+                // Alert
+                _this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
+            })).subscribe();
+        };
+        ZgridComponent.prototype.restoreGridSettings = function () {
+            var _this = this;
+            rxjs.of(true)
+                .pipe(operators.switchMap(function () {
+                // Clear localstorage grid setting
+                _this.zGridStatePersistingService.remove(_this.gridStorageKey);
+                return rxjs.of(true);
+            }), operators.switchMap(function () {
+                // delete cookiestore gridSetting by storagekey as name
+                return _this.mainService.cookieStoreDeleteMultiple(_this.gridStorageKey);
+            }), operators.concatMap(function () {
+                // Use original column setting
+                return _this.generateGridColumns();
+            }), operators.tap(function () {
+                // check is saved state exist
+                _this.stateExist();
+                // Alert
+                _this.toastService.show('Grid Setting Restored', "top", true, 2000, 'success');
+            })).subscribe();
+        };
+        ZgridComponent.prototype.getGridSettings = function () {
+            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
+            // Find any setting from localstorage..
+            var _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
+            if (_arrGridCaching) {
+                var _gridCaching = JSON.parse(_arrGridCaching['Value']);
+                if (_gridCaching) {
+                    return _gridCaching.gridSettings.columnsConfig.sort(function (a, b) { return a.orderIndex - b.orderIndex; });
                 }
             }
-            return false;
         };
-        ZgridcalendarComponent.prototype.stateExist = function () {
-            var _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-            var _gridName = this.data.Name + '::' + this.data.Value;
-            var userGridState = this.zGridStatePersistingService.get(_storageKey);
-            var originalGridState = this.zGridStatePersistingService.get(_gridName);
-            if (userGridState || originalGridState) {
-                return true;
+        /* Inline setting */
+        ZgridComponent.prototype.getInlineField = function (value) {
+            return this.columns.find(function (x) { return x.Value === value; });
+        };
+        ZgridComponent.prototype.getInlineForm = function (rowIndex) {
+            var formArray = this.inlineEditedFormGroups.get('items');
+            return formArray.at(rowIndex);
+        };
+        ZgridComponent.prototype.getFormControlData = function (value) {
+            return this.inlineEditedFormGroups.value.items;
+        };
+        /* Event */
+        ZgridComponent.prototype.beforeGridGetData = function (group, me) {
+            console.warn("beforeDataBinding triggered");
+            if (!group.beforeGridGetData) {
+                console.warn("group.beforeDataBinding is undefined");
+                return rxjs.of(true);
             }
-            return false;
+            return group.beforeGridGetData(group, me);
         };
-        ZgridcalendarComponent.prototype.setGridSessionKey = function (group) {
-            if (group["GridStorageKey"]) {
-                return;
+        ZgridComponent.prototype.getGridSessionFilter = function (group, me) {
+            return __awaiter(this, void 0, void 0, function () {
+                var StorageKey;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!group["GridStorageKey"]) {
+                                return [2 /*return*/, null];
+                            }
+                            StorageKey = group["GridStorageKey"];
+                            if (!this.storageService) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.storageService.get(StorageKey)
+                                    .then(function (data) {
+                                    if (!data || !data.value || data.value === "null") {
+                                        return null;
+                                    }
+                                    else {
+                                        var result = JSON.parse(data.value);
+                                        _this.state.filter = JSON.parse(result["StateFilter"]);
+                                        _this.params.filterParams = JSON.parse(result["FilterParams"]);
+                                        _this.state.filter.filters.forEach(function (stateFilter) {
+                                            if (stateFilter.field.includes('UTC')) {
+                                                stateFilter.value = new Date(stateFilter.value);
+                                            }
+                                        });
+                                        return data;
+                                    }
+                                })];
+                        case 1:
+                            _a.sent();
+                            return [3 /*break*/, 3];
+                        case 2: return [2 /*return*/, null];
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        ZgridComponent.prototype.setGridSessionFilter = function (group, me) {
+            if (!group["GridStorageKey"]) {
+                return null;
             }
-            else {
-                group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
+            var StorageKey = group["GridStorageKey"];
+            var lstGridFilter = {};
+            if (me.state.filter && this.storageService && this.data['SaveFilter']) {
+                //list of data for StateFilter and FilterParams
+                lstGridFilter = { "StateFilter": JSON.stringify(me.state.filter), "FilterParams": JSON.stringify(me.params.filterParams) };
+                //create session storage
+                this.storageService.set(StorageKey, JSON.stringify(lstGridFilter));
+            }
+        };
+        /* onchange Events */
+        ZgridComponent.prototype.filterChange = function (event) {
+            if (this.zgrid) {
+                this.zgrid.filterChange(event);
+            }
+        };
+        ZgridComponent.prototype.pageChange = function (event) {
+            if (this.zgrid) {
+                this.zgrid.pageChange(event);
+            }
+        };
+        ZgridComponent.prototype.sortChange = function (sort) {
+            if (this.zgrid) {
+                this.zgrid.sortChange(sort);
+            }
+        };
+        ZgridComponent.prototype.inCellCheckBoxOnChange = function (event, rowIndex, column) {
+            var isChecked = event.detail.checked;
+            this.gData[rowIndex][column.Value] = isChecked;
+        };
+        ZgridComponent.prototype.columnsOrderChanged = function (event) {
+            var _zgridControl = this.zgrid;
+            var _zgridComponent = this.zgrid.grid;
+            var _data = _zgridComponent.data;
+            if (this.zgrid) {
+                var _zgrid = this.zgrid;
+            }
+        };
+        /*  */
+        ZgridComponent.prototype.addHandler = function (_a) {
+            var sender = _a.sender;
+            this.isNew = true;
+            // close any existing editor
+            this.closeEditor(sender);
+            // loop all column to get validation and create form control
+            var colFormControl = {};
+            this.zgrid.gridColumns.forEach(function (col) {
+                var validators = [];
+                if (col.IsRequired) {
+                    validators.push(forms.Validators.required);
+                }
+                if (col.ValidatorPattern) {
+                    validators.push(forms.Validators.pattern(col.ValidatorPattern));
+                }
+                colFormControl[col.Value] = new forms.FormControl(null, validators);
+            });
+            // set form control object to form group
+            this.formGroup = new forms.FormGroup(colFormControl);
+            // add to grid row
+            sender.addRow(this.formGroup);
+        };
+        ZgridComponent.prototype.saveHandler = function (_a) {
+            var sender = _a.sender, rowIndex = _a.rowIndex, formGroup = _a.formGroup, isNew = _a.isNew;
+            // get grid data.
+            var gridExistingData = this.gData ? this.gData : [];
+            // if valid
+            if (formGroup.valid) {
+                // check for duplicate UniqueKey
+                var uniqueKeyExist_1 = false;
+                var uniqueKey_1 = this.data['UniqueKey'];
+                if (uniqueKey_1) {
+                    gridExistingData.forEach(function (data) {
+                        if (data[uniqueKey_1] === formGroup.value[uniqueKey_1]) {
+                            uniqueKeyExist_1 = true;
+                        }
+                    });
+                }
+                if (!uniqueKeyExist_1) {
+                    if (isNew) {
+                        // if new, push to data
+                        gridExistingData.push(formGroup.value);
+                    }
+                    else {
+                        // if edit, update data
+                        gridExistingData[rowIndex] = formGroup.value;
+                    }
+                    this.setData(gridExistingData);
+                    sender.closeRow(rowIndex);
+                }
+            }
+        };
+        ZgridComponent.prototype.cancelHandler = function (_a) {
+            var sender = _a.sender, rowIndex = _a.rowIndex;
+            // cancel any existing editor
+            sender.closeRow(rowIndex);
+        };
+        ZgridComponent.prototype.editHandler = function (_a) {
+            var sender = _a.sender, rowIndex = _a.rowIndex, dataItem = _a.dataItem;
+            this.isNew = false;
+            // close any existing editor
+            this.closeEditor(sender);
+            // loop all column to get validation and create form control, append current row value
+            var colFormControl = {};
+            this.zgrid.gridColumns.forEach(function (col) {
+                var validators = [];
+                if (col.IsRequired) {
+                    validators.push(forms.Validators.required);
+                }
+                if (col.ValidatorPattern) {
+                    validators.push(forms.Validators.pattern(col.ValidatorPattern));
+                }
+                colFormControl[col.Value] = new forms.FormControl(dataItem[col.Value], validators);
+            });
+            // set form control object to form group
+            this.formGroup = new forms.FormGroup(colFormControl);
+            // set grid row to edit
+            this.editedRowIndex = rowIndex;
+            sender.editRow(rowIndex, this.formGroup);
+        };
+        ZgridComponent.prototype.removeHandler = function (_a) {
+            var sender = _a.sender, dataItem = _a.dataItem;
+            var index = this.getItemIndex(dataItem, this.gData, this.data['UniqueKey']);
+            this.gData.splice(index, 1);
+            sender.cancelCell();
+        };
+        ZgridComponent.prototype.closeEditor = function (grid, rowIndex) {
+            if (rowIndex === void 0) { rowIndex = this.editedRowIndex; }
+            grid.closeRow(rowIndex);
+            this.editedRowIndex = undefined;
+            this.formGroup = undefined;
+        };
+        ZgridComponent.prototype.getItemIndex = function (item, data, key) {
+            for (var idx = 0; idx < data.length; idx++) {
+                if (data[idx][key] === item[key]) {
+                    return idx;
+                }
             }
+            return -1;
         };
-        return ZgridcalendarComponent;
+        return ZgridComponent;
     }());
-    ZgridcalendarComponent.decorators = [
+    ZgridComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "app-zgridcalendar",
-                    template: "  <div style=\"margin: 10px 0 6px 0;\">\r\n    <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n    <ng-template #template let-anchor>\r\n      <span>{{ anchor.nativeElement.innerText }}</span>\r\n    </ng-template>\r\n    <kendo-grid [zgridcalendarbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [skip]=\"state.skip\"\r\n                [filterable]=\"false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"false\"\r\n                [columnMenu]=\"false\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\">\r\n      <!--[hidden]=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n    [filter]=\"state.filter\"\r\n        -->\r\n\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         editor=\"numeric\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\r\n               || col.fieldType === 'zuitime'\r\n               || col.fieldType === 'ztime'\">\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuitime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm:ss' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate','ztime','zuitime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n    </kendo-grid>\r\n      <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n\r\n\r\n",
+                    selector: "app-zgrid",
+                    template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\"> \r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{responsive: true, buttonCount: 3, pageSizes: pageSizes, previousNext: previousNext}\"\r\n                [skip]=\"state.skip\"\r\n                [sort]=\"state.sort\"\r\n                [sortable]=\"{allowUnsort: true,mode: 'multiple'}\"\r\n                [filter]=\"state.filter\"\r\n                [filterable]=\"data.enableFiltering !== false\"\r\n                [resizable]=\"true\"\r\n                [reorderable]=\"true\"\r\n                [columnMenu]=\"data.DisableGridColumnMenu ? false : { filter: true }\"\r\n                [hidden]=\"!(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n                (cellClick)=\"cellClickHandler($event)\"\r\n                (cellClose)=\"editCellCloseHandler($event)\"\r\n                (dataStateChange)=\"dataStateChange($event)\"\r\n                (pageChange)=\"pageChange($event)\"\r\n                (sortChange)=\"sortChange($event)\"\r\n                (filterChange)=\"filterChange($event)\"\r\n                (columnReorder)=\"columnsOrderChanged($event)\"\r\n                [kendoGridSelectBy]=\"rowSelectionKey\"\r\n                [selectable]=\"selectableSettings\"\r\n                [selectedKeys]=\"mySelection\"\r\n                [ngStyle]=\"getGridStyle()\"\r\n                [trackBy]=\"trackBy\"\r\n                (cancel)=\"cancelHandler($event)\"\r\n                (save)=\"saveHandler($event)\"\r\n                (remove)=\"removeHandler($event)\"\r\n                (edit)=\"editHandler($event)\"\r\n                (add)=\"addHandler($event)\">\r\n      <ng-template kendoGridToolbarTemplate *ngIf=\"data.AllowRefreshButton || data.AllowExport || data.AllowSaveState || data.EnableGridCommand\">\r\n        <button type=\"button\" kendoButton (click)=\"refreshData()\" *ngIf=\"data.AllowRefreshButton\"><span class=\"k-icon k-i-refresh-sm\"></span>&nbsp;Refresh</button>\r\n        <button type=\"button\" kendoGridExcelCommand *ngIf=\"data.AllowExport\"><span class=\"k-icon k-i-file-excel\"></span>&nbsp;Export Data to Excel</button>\r\n        <button type=\"button\" kendoButton (click)=\"saveGridSettings()\" *ngIf=\"data.AllowSaveState\"><span class=\"k-icon k-i-star\"></span>&nbsp;Save Setting</button>\r\n        <button type=\"button\" kendoButton (click)=\"restoreGridSettings()\" *ngIf=\"gridDefaultStateExist\"><span class=\"k-icon k-i-star-outline\"></span>&nbsp;Restore Setting</button>\r\n        <button type=\"button\" kendoGridAddCommand *ngIf=\"data.EnableGridCommand \"><span class=\"k-icon k-i-add\"></span>Add New</button>\r\n      </ng-template>\r\n      <kendo-grid-checkbox-column *ngIf=\"!!data.SelectOptions\" [width]=\"60\" showSelectAll=\"true\" [columnMenu]=\"true\"></kendo-grid-checkbox-column>\r\n      <kendo-grid-column *ngFor=\"let col of columns\"\r\n                         [field]=\"col.field\"\r\n                         [title]=\"col.title\"\r\n                         [width]=\"col.width\"\r\n                         [minResizableWidth]=\"col.minResizableWidth\"\r\n                         [filter]=\"col.filter\"\r\n                         [filterable]=\"filterable(col.enableFiltering)\"\r\n                         [sortable]=\"sortable(col.enableSorting)\"\r\n                         [headerStyle]=\"{'white-space': 'initial'}\"\r\n                         [hidden]=\"col.hidden\"\r\n                         [format]=\"col.format\"\r\n                         [class]=\"col.Class\"\r\n                         [locked]=\"locked(col)\"\r\n                         [columnMenu]=\"!col.disableColumnMenu\"\r\n                         [editor]=\"col.editorType\">\r\n        <div [ngSwitch]=\"true\">\r\n          <div *ngSwitchCase=\"col.fieldType === 'number'\r\n               || col.fieldType === 'currency'\r\n               || col.fieldType === 'znumeric'\">\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-numeric-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"eq\">\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-numeric-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n          <div *ngSwitchCase=\"col.fieldType == 'zdate'\r\n               || col.fieldType === 'ztime'\r\n               || col.fieldType === 'zdatetime'\r\n               || col.fieldType === 'zuidatetime'\">\r\n            <div *ngIf=\"col.filterByDateRange === true\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\" operator=\"lte\">\r\n                <date-range-filter-cell class=\"date-range-filter\"\r\n                                        [filter]=\"filter\"\r\n                                        [field]=\"col.field\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </date-range-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n            <div *ngIf=\"col.filterByDateRange === false\">\r\n              <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n                <kendo-grid-date-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"lte\">\r\n                  <kendo-filter-lt-operator></kendo-filter-lt-operator>\r\n                  <kendo-filter-lte-operator></kendo-filter-lte-operator>\r\n                  <kendo-filter-gt-operator></kendo-filter-gt-operator>\r\n                  <kendo-filter-gte-operator></kendo-filter-gte-operator>\r\n                  <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                  <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n                </kendo-grid-date-filter-cell>\r\n              </ng-template>\r\n            </div>\r\n          </div>\r\n          <div *ngSwitchDefault>\r\n            <ng-template kendoGridFilterCellTemplate let-filter let-column=\"column\">\r\n              <kendo-grid-string-filter-cell [column]=\"column\" [filter]=\"filter\" operator=\"contains\">\r\n                <kendo-filter-contains-operator></kendo-filter-contains-operator>\r\n                <kendo-filter-eq-operator></kendo-filter-eq-operator>\r\n                <kendo-filter-neq-operator></kendo-filter-neq-operator>\r\n                <kendo-filter-startswith-operator></kendo-filter-startswith-operator>\r\n                <kendo-filter-endswith-operator></kendo-filter-endswith-operator>\r\n                <kendo-filter-isnull-operator></kendo-filter-isnull-operator>\r\n                <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>\r\n              </kendo-grid-string-filter-cell>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n        <!-- Grid Edit Template -->\r\n        <ng-template kendoGridEditTemplate *ngIf=\"data.EnableGridCommand \" let-dataItem=\"dataItem\" let-column=\"col\" let-formGroup=\"formGroup\" let-isNew=\"isNew\">\r\n          <div [ngSwitch]=\"col.fieldType\">\r\n            <div *ngSwitchCase=\"'number'\">\r\n              <kendo-numerictextbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-numerictextbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.numericInput\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n            <div *ngSwitchDefault>\r\n              <kendo-textbox #cellAnchor [formControl]=\"formGroup.get(col.field)\"></kendo-textbox>\r\n              <kendo-popup [anchor]=\"cellAnchor.input\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !(isNew && formGroup.get(col.field).untouched)\"\r\n                           popupClass=\"k-widget k-tooltip k-tooltip-validation k-invalid-msg\"\r\n                           style=\"padding-left: 2px; opacity: 0.5;\">\r\n                <span class=\"k-icon k-i-warning\"></span>\r\n                <!--<ion-label style=\"padding-top: 1px; padding-left: 3px;\">{{ col.Name }} is required.</ion-label>-->\r\n\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.required\">\r\n                  {{ col.Name }} required.\r\n                </ion-label>\r\n                <ion-label style=\"padding-top: 1px; padding-left: 3px;\"\r\n                           *ngIf=\"formGroup.get(col.field).invalid && !formGroup.get(col.field).untouched && formGroup.get(col.field).errors?.pattern\">\r\n                  {{ col.ValidatorMessage ? col.ValidatorMessage : \"Please check the input value.\" }}\r\n                </ion-label>\r\n              </kendo-popup>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\r\n          <div style=\"margin: 1px 0;\" *ngIf=\"!col.clickableIcons && col.isEditableInGrid !== true\" [ngSwitch]=\"col.fieldType\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ dataItem[col.field] | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ dataItem[col.field] | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ dataItem[col.field] | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ dataItem[col.field] | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ dataItem[col.field] | number: getFormat(col, '1.2-2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ dataItem[col.field] | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ dataItem[col.field] }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ dataItem[col.field]}}\r\n            </span>\r\n          </div>\r\n          <!-- <span *ngIf=\"!!col.navigateTo\" (click)=\"onNavigateTo($event, col, dataItem, dataItem[col.field])\">\r\n      <ion-button color=\"light\" size=\"small\">\r\n      {{ col.ClickableIcons }}\r\n      <ion-icon slot= \"end\" name=\"arrow-forward\"></ion-icon>\r\n      </ion-button>\r\n      </span> -->\r\n          <div style=\"margin: 5px 0;\" *ngIf=\"col.isEditableInGrid === true && inlineEditedFormGroups\" [ngSwitch]=\"col.fieldType\" [formGroup]=\"inlineEditedFormGroups\"\r\n               [ngClass]=\"getClass(dataItem, col)\">\r\n            <span *ngSwitchCase=\"'number'\">\r\n              <input type=\"number\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n            <span *ngSwitchCase=\"'checkbox'\">\r\n              <ion-checkbox [disabled]=\"(!!col.ReadOnly ? col.ReadOnly : false)\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" color=\"primary\" (ionChange)=\"inCellCheckBoxOnChange($event, rowIndex, col)\"></ion-checkbox>\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuiselectmultiple'\">\r\n              <app-zselectmultiple style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zselectmultiple>\r\n            </span>\r\n            <span *ngSwitchCase=\"'textarea'\">\r\n              <app-ztextarea style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-ztextarea>\r\n            </span>\r\n            <span *ngSwitchCase=\"['zuidatetime','zdate', 'ztime','zdatetime','zshortdate'].includes(col.fieldType) ? col.fieldType : ''\">\r\n              <app-zdatetime style=\"width: 100%;\" [data]=\"getInlineField(col.Value)\" [group]=\"group\" [form]=\"getInlineForm(rowIndex)\"></app-zdatetime>\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              <input style=\"width: 100%;\" type=\"text\" [formControl]=\"this.getFormControl(rowIndex, col.field)\" />\r\n            </span>\r\n          </div>\r\n          <span style=\"margin-top: 10px;\" *ngFor=\"let icon of col.clickableIcons\">\r\n            <span [ngClass]=\"icon.Class ? icon.Class : ''\" *ngIf=\"!!icon && (!!dataItem.WFS_StatusCode && !!icon)\r\n              ? dataItem.WFS_StatusCode !== icon.WFS_StatusCode\r\n              : true;\r\n            else disabledButton\" (click)=\"onBtnClick($event, icon, dataItem, dataItem[col.field])\">\r\n              {{icon.Name || dataItem[col.field]}} <fa-icon [icon]=\"icon.Icon\" style=\"padding: 4px 6px;\">\r\n              </fa-icon>\r\n            </span>\r\n            <ng-template #disabledButton>\r\n            </ng-template>\r\n          </span>\r\n          <!-- <strong>{{ dataItem[col.field] }}</strong> -->\r\n          <!-- <span class=\"{{dataItem.Discontinued ? 'discontinued' : 'active'}}\">\r\n        {{dataItem.Discontinued ? \"discontinued\" : \"active\"}}\r\n      </span> -->\r\n        </ng-template>\r\n        <ng-template kendoGridFooterTemplate let-column let-columnIndex=\"columnIndex\" *ngIf=\"data.EnableAggregate\">\r\n          <div style=\"margin: 5px 0;\" [ngSwitch]=\"col.fieldType\">\r\n            {{col.aggregateType}}\r\n            <span *ngSwitchCase=\"'zdate'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'ztime'\">\r\n              {{ col.aggregateValue | date: 'HH:mm' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zshortdate'\">\r\n              {{ col.aggregateValue | date: 'MMM yyyy' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zdatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'zuidatetime'\">\r\n              {{ col.aggregateValue | date: 'dd/MM/yyyy hh:mm:ss aa' }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'number'\">\r\n              {{ col.aggregateValue | number }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'currency'\">\r\n              {{ col.aggregateValue | number: getFormat(col, '1.2.2') }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'znumeric'\">\r\n              {{ col.aggregateValue | number: getFormat(col) }}\r\n            </span>\r\n            <span *ngSwitchCase=\"'url'\" style=\"color: blue; cursor: pointer; text-decoration:underline;\">\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n            <span *ngSwitchDefault>\r\n              {{ col.aggregateValue }}\r\n            </span>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-grid-column>\r\n      <kendo-grid-command-column *ngIf=\"data.EnableGridCommand\" width=\"180\" [columnMenu]=\"false\">\r\n        <ng-template kendoGridCellTemplate let-isNew=\"isNew\">\r\n          <button kendoGridSaveCommand>\r\n            {{ isNew ? 'Save' : 'Update' }}\r\n          </button>\r\n          <button kendoGridCancelCommand [primary]=\"true\">\r\n            {{ isNew ? 'Discard changes' : 'Cancel' }}\r\n          </button>\r\n          <button kendoGridEditCommand>\r\n            {{ \"Edit\" }}\r\n          </button>\r\n          <button kendoGridRemoveCommand>\r\n            {{ \"Remove\" }}\r\n          </button>\r\n        </ng-template>\r\n      </kendo-grid-command-column>\r\n      <kendo-grid-excel fileName=\"Export.xlsx\" [fetchData]=\"allResults\"></kendo-grid-excel>\r\n    </kendo-grid>\r\n    <div *ngIf=\"isLoading\" class=\"k-i-loading\"></div>\r\n  </div>\r\n</div>\r\n",
                     styles: [":host ::ng-deep kendo-grid .k-grid-content{white-space:nowrap}:host ::ng-deep kendo-grid .k-toolbar{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-grid-header{background-color:#e3ecf8;font-weight:600}:host ::ng-deep kendo-grid .k-button{border-radius:5px;box-shadow:0 2px 2px rgba(0,0,0,.1);background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid-header .k-grid-filter:hover,:host ::ng-deep kendo-grid .k-grid-header .k-header-column-menu:hover,:host ::ng-deep kendo-grid .k-grid-header .k-hierarchy-cell .k-icon:hover{background-color:#c9daf2}:host ::ng-deep kendo-grid .k-grid .k-grid-filter,:host ::ng-deep kendo-grid .k-grid .k-header-column-menu,:host ::ng-deep kendo-grid .k-grid .k-hierarchy-cell .k-icon{color:#132842}:host ::ng-deep kendo-grid .k-dropdown .k-dropdown-wrap,:host ::ng-deep kendo-grid .k-dropdowntree .k-dropdown-wrap{border-radius:2px;background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-grid tr.k-alt{background-color:rgba(232,238,246,.5)}:host ::ng-deep kendo-grid tbody tr.k-state-hover,:host ::ng-deep kendo-grid tbody tr:hover{background-color:rgba(214,224,239,.5)}:host ::ng-deep kendo-grid .k-pager-wrap{background-color:#e3ecf8}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-selected{color:#ff5e5b;background-color:rgba(255,94,91,.4)}:host ::ng-deep kendo-grid .k-pager-numbers .k-link.k-state-hover,:host ::ng-deep kendo-grid .k-pager-numbers .k-link:hover{color:#ff5e5b;background-color:rgba(255,94,91,.15)}.cellWrapText .gridCell{white-space:pre-line!important}.rightAligned{text-align:right}.centerAligned{text-align:center}.gridTitle{margin:20px 10px 5px;font-size:18px;font-weight:700}.gridCell.primary{color:var(--ion-color-primary)}.gridCell.secondary{color:var(--ion-color-secondary)}.gridCell.tertiary{color:var(--ion-color-tertiary)}.gridCell.success{color:var(--ion-color-success-shade)}.gridCell.warning{color:var(--ion-color-warning)}.gridCell.danger{color:var(--ion-color-danger)}.gridCell.dark{color:var(--ion-color-dark)}.gridCell.medium{color:var(--ion-color-medium)}.gridCell.light{color:var(--ion-color-light)}.k-i-loading{position:absolute;top:100px;left:0;right:0;bottom:0;font-size:45px;background-color:hsla(0,0%,100%,.3);color:#0f4800}"]
                 },] }
     ];
-    ZgridcalendarComponent.ctorParameters = function () { return [
+    ZgridComponent.ctorParameters = function () { return [
         { type: i1.ActivatedRoute },
         { type: i1.Router },
         { type: forms.FormBuilder },
@@ -6818,12 +6073,15 @@
         { type: i3.WebApiService },
         { type: i3.ZGridStatePersistingService },
         { type: i3.ToastService },
-        { type: i3.ZCoreService }
+        { type: i3.ZCoreService },
+        { type: i3.StorageSessionService },
+        { type: MainService }
     ]; };
-    ZgridcalendarComponent.propDecorators = {
+    ZgridComponent.propDecorators = {
         data: [{ type: i0.Input }],
         group: [{ type: i0.Input }],
-        form: [{ type: i0.Input }]
+        form: [{ type: i0.Input }],
+        tooltipDir: [{ type: i0.ViewChild, args: [kendoAngularTooltip.TooltipDirective,] }]
     };
 
     var ZimgComponent = /** @class */ (function () {
@@ -9837,6 +9095,7 @@
             this.state = { expandedkeys: [] };
             this.itemIndex = [];
             this.selectedKeys = [];
+            this.absoluteText = false;
             this.componentProperties = new i3.ZComponentProperties();
             this.isExpanded = function (dataItem, index) {
                 // console.log(index);
@@ -9912,6 +9171,10 @@
             if (this.data.TreeviewExpandAll) {
                 this.expandAll();
             }
+            // fix text align issue
+            if (this.data.OnAddNode || this.data.OnRemoveNode) {
+                this.absoluteText = true;
+            }
         };
         ZtreeComponent.prototype.ngAfterViewInit = function () {
             // const componentId = ZComponentHelper.getComponentId(this.data);
@@ -10181,8 +9444,8 @@
     ZtreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-ztree",
-                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n        <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n        <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      {{ getTemplate(dataItem, data, group) }}\r\n\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
-                    styles: [":host{--ion-color-primary:#479400;--ion-color-primary-rgb:56,128,255;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff}:host ::ng-deep .k-treeview .k-in{border-radius:2px;border:1px solid #c8dbf5;background-color:#e3ecf8}:host ::ng-deep .k-treeview .k-in,:host ::ng-deep .k-treeview .k-in.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-in.k-state-selected{border-radius:2px;background-color:#a9c3e8}:host ::ng-deep .k-treeview .k-in.k-state-hover,:host ::ng-deep .k-treeview .k-in:hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}"]
+                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\"> \r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6; margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\"> \r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      <ion-label *ngIf=\"absoluteText\" style=\"position: absolute; top: 14px;\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n\r\n      <ion-label *ngIf=\"!absoluteText\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n      </ion-label>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
+                    styles: [":host{--ion-color-primary:#479400;--ion-color-primary-rgb:56,128,255;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff}:host ::ng-deep kendo-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;border:1px solid #c8dbf5;background-color:#e3ecf8;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#a9c3e8;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep kendo-treeview .k-treeview-leaf.k-state-hover,:host ::ng-deep kendo-treeview .k-treeview-leaf:hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:3px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}"]
                 },] }
     ];
     ZtreeComponent.ctorParameters = function () { return []; };
@@ -11642,7 +10905,6 @@
                 zdiv: ZdivComponent,
                 zgauge: ZgaugeComponent,
                 zgrid: ZgridComponent,
-                zgridcalendar: ZgridcalendarComponent,
                 zimg: ZimgComponent,
                 zkcard: ZkcardComponent,
                 zlabel: ZlabelComponent,
@@ -11806,7 +11068,7 @@
                         ScrollbarThemeDirective,
                         FieldElementDirective,
                         ZGridBindingDirective,
-                        ZGridCalendarBindingDirective,
+                        ZGridPopupAnchorDirective,
                         OpenOnFocusDirective,
                         DateParserFilter,
                         EditorFilter,
@@ -11837,7 +11099,6 @@
                         ZformcontrolComponent,
                         ZgaugeComponent,
                         ZgridComponent,
-                        ZgridcalendarComponent,
                         ZimgComponent,
                         ZkcardComponent,
                         ZlabelComponent,
@@ -11906,7 +11167,7 @@
                         ScrollbarThemeDirective,
                         FieldElementDirective,
                         ZGridBindingDirective,
-                        ZGridCalendarBindingDirective,
+                        ZGridPopupAnchorDirective,
                         OpenOnFocusDirective,
                         DateParserFilter,
                         EditorFilter,
@@ -11937,7 +11198,6 @@
                         ZformcontrolComponent,
                         ZgaugeComponent,
                         ZgridComponent,
-                        ZgridcalendarComponent,
                         ZimgComponent,
                         ZkcardComponent,
                         ZlabelComponent,
@@ -11987,7 +11247,6 @@
                         ZformcontrolComponent,
                         ZgaugeComponent,
                         ZgridComponent,
-                        ZgridcalendarComponent,
                         ZimgComponent,
                         ZkcardComponent,
                         ZlabelComponent,
@@ -12050,6 +11309,7 @@
     exports.ZBulletComponent = ZBulletComponent;
     exports.ZChipComponent = ZChipComponent;
     exports.ZGridBindingDirective = ZGridBindingDirective;
+    exports.ZGridPopupAnchorDirective = ZGridPopupAnchorDirective;
     exports.ZSchedulerToolBarComponent = ZSchedulerToolBarComponent;
     exports.ZTreeListOptions = ZTreeListOptions;
     exports.ZbuttonsComponent = ZbuttonsComponent;
@@ -12064,7 +11324,6 @@
     exports.ZformcontrolComponent = ZformcontrolComponent;
     exports.ZgaugeComponent = ZgaugeComponent;
     exports.ZgridComponent = ZgridComponent;
-    exports.ZgridcalendarComponent = ZgridcalendarComponent;
     exports.ZimgComponent = ZimgComponent;
     exports.ZkcardComponent = ZkcardComponent;
     exports.ZlabelComponent = ZlabelComponent;
@@ -12091,8 +11350,7 @@
     exports.refreshGrid = refreshGrid;
     exports.toQueryRule = toQueryRule;
     exports.ɵa = ZComponentDebugService;
-    exports.ɵb = ZGridCalendarBindingDirective;
-    exports.ɵc = ZComponentService;
+    exports.ɵb = ZComponentService;
 
     Object.defineProperty(exports, '__esModule', { value: true });