mmhglobal-dynamicform 1.1.44 → 1.2.2

package/fesm2015/mmhglobal-dynamicform.js

@@ -448,18 +448,12 @@ class ZComponentDebugService {
             // delete dataItem._DataValue;
             const 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,
@@ -469,7 +463,6 @@ class ZComponentDebugService {
                 ReadOnly: false,
                 ShowLabel: true,
                 Visible: true,
-                AppendDivClearFix: false,
             };
             const zmodel = {
                 nodeModel: JSON.stringify(initialModel, null, 2)
@@ -2191,6 +2184,21 @@ ZGridBindingDirective.propDecorators = {
     zgridbinding: [{ type: Input }]
 };
 
+class ZGridPopupAnchorDirective {
+    constructor(element) {
+        this.element = element;
+    }
+}
+ZGridPopupAnchorDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[popupAnchor]',
+                exportAs: 'popupAnchor'
+            },] }
+];
+ZGridPopupAnchorDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+
 /********** Angular **********/
 /********** Component & Service **********/
 class OpenOnFocusDirective {
@@ -2218,388 +2226,103 @@ OpenOnFocusDirective.propDecorators = {
     onBlur: [{ type: HostListener, args: ['blur',] }]
 };
 
-class ZGridCalendarBindingDirective extends DataBindingDirective {
-    constructor(grid, webapiService, authService, storageService, zGridStatePersistingService) {
-        super(grid);
-        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;
-    }
-    get field() {
-        return this.zgridcalendarbinding.data;
-    }
-    get grp() {
-        return this.zgridcalendarbinding.group;
-    }
-    get gridSubject() {
-        return this.zgridcalendarbinding.gridSubject;
-    }
-    get params() {
-        return this.zgridcalendarbinding.params;
-    }
-    get getData() {
-        return this.grid.data;
-    }
-    ngOnInit() {
-        if (this.field.SkipDirective) {
-            return;
+class DateParserFilter {
+    transform(items) {
+        // debugger;
+        if (!items) {
+            return items;
         }
-        super.ngOnInit();
-        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 = 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;
-            }
-            const array = this.resourceURL.split("/api/");
-            if (!!array[1]) {
-                array[1] = "Page" + array[1];
-                this.paginationApiPostUrl = array.join("/api/");
-            }
-            else {
-                const arr = this.resourceURL.split("/");
-                arr[arr.length - 2] = "Page" + arr[arr.length - 2];
-                this.paginationApiPostUrl = arr.join("/");
-            }
+        // filter items array, items which match and return true will be
+        // kept, false will be filtered out
+        try {
+            const d = new Date(items);
+            return d;
         }
-        this.gridSubject.next(this);
-        this.generateGridColumns();
-    }
-    ngOnDestroy() {
-        if (this.serviceSubscription) {
-            this.serviceSubscription.unsubscribe();
+        catch (error) {
+            console.log("DateParserFilter error: ", error);
+            return null;
         }
-        super.ngOnDestroy();
-    }
-    generateGridColumns() {
-        const columnFields$ = ZComponentHelper.getGroupValue(this.field.ColumnFields, this.grp);
-        columnFields$
-            .pipe(tap((data) => {
-            const gridSetting = this.getGridSettings();
-            const fieldName = this.field["FieldElementName"];
-            ZComponentHelper.getGridColumns(data, this.gridColumns, this.zgridcalendarbinding.group, this.authService, fieldName, gridSetting, this.usableColumns);
-            this.getFilterParamsColumns();
-            this.getGrantType();
-            this.setHiddenColumn(gridSetting);
-        }), switchMap(() => {
-            //Get Session
-            return this.getGridSessionFilter(this.grp, this);
-        }), switchMap(() => {
-            //Before get grid data
-            return this.beforeGridGetData(this.grp, this);
-        }))
-            .subscribe(() => {
-            this.getDataBinding();
-        });
     }
-    getDataBinding() {
-        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((data) => {
-                    this.grid.data = { data: data.dataSet, total: data.totalCount };
-                    this.grid.loading = false;
-                    this.notifyDataChange();
-                });
+}
+DateParserFilter.decorators = [
+    { type: Pipe, args: [{
+                name: "dateParser",
+                pure: true,
+            },] }
+];
+
+/********** Angular **********/
+/********** Ionic **********/
+/********** Plugin **********/
+/********** Component & Service **********/
+class EditorFilter {
+    transform(source) {
+        if (!source) {
+            return;
+        }
+        if (typeof source === "string") {
+            try {
+                const 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((data) => {
-                    let _data = null;
-                    let _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 {
-            const ds = 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;
         }
     }
-    clearData() {
-        this.grid.data = { data: [], total: 0 };
-    }
-    getFilterParamsColumns() {
-        const colFields = [];
-        this.gridColumns.forEach((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");
+    safeStringify(jsonValue) {
+        // Note: cache should not be re-used by repeated calls to JSON.stringify.
+        const cache = [];
+        return JSON.stringify(jsonValue, (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
+    }
+}
+EditorFilter.decorators = [
+    { type: Pipe, args: [{
+                name: 'editorfilter',
+                pure: false
+            },] }
+];
+
+class DivzLayout {
+    transform(items, zlayout) {
+        if (!items || !zlayout) {
+            return items;
         }
-        let 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(value => {
+                value['DivClass'] = "col-sm-6";
+            });
         }
-        this.params.columns = tmpGridColumn.join(",");
-    }
-    getGrantType() {
-        if (this.field.GrantType) {
-            this.params.grantType = ZComponentHelper.getGroupValue(this.field.GrantType.toString(), this.grp);
+        else if (zlayout == '3') {
+            Object.values(items).forEach(value => {
+                value['DivClass'] = "col-sm-12";
+            });
         }
-    }
-    dataStateChange(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;
-    }
-    mapFilterOperator(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
-        }
-    }
-    getGridSettings() {
-        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-        const _gridName = this.field.Name + '::' + this.field.Value;
-        // Find any setting from localstorage..
-        let _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-        if (_arrGridCaching && _arrGridCaching[0]) {
-            const _gridCaching = _arrGridCaching.find(x => x['dataFormFields'] === _gridName);
-            if (_gridCaching) {
-                return _gridCaching.gridSettings.columnsConfig.sort((a, b) => a.orderIndex - b.orderIndex);
-            }
-        }
-    }
-    setHiddenColumn(gridSetting) {
-        if (this.gridColumns && gridSetting) {
-            // filter out hidden == false array.
-            const gridSettingHiddenCol = gridSetting.filter(function (item) {
-                return item['hidden'] == true;
-            });
-            // find and set the hidden to current column setting.
-            Object.values(gridSettingHiddenCol).forEach(value => {
-                if (this.gridColumns.find((c) => c.field === value.field)) {
-                    this.gridColumns.find((c) => c.field === value.field)['hidden'] = value['hidden'];
-                }
-            });
-        }
-    }
-    beforeGridGetData(group, me) {
-        console.warn("beforeDataBinding triggered");
-        if (!group.beforeGridGetData) {
-            console.warn("group.beforeDataBinding is undefined");
-            return of(true);
-        }
-        return group.beforeGridGetData(group, me);
-    }
-    getGridSessionFilter(group, me) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!group["GridStorageKey"]) {
-                return null;
-            }
-            const StorageKey = group["GridStorageKey"];
-            if (this.storageService) {
-                yield this.storageService.get(StorageKey)
-                    .then(data => {
-                    if (!data || !data.value || data.value === "null") {
-                        return null;
-                    }
-                    else {
-                        const result = JSON.parse(data.value);
-                        this.state.filter = JSON.parse(result["StateFilter"]);
-                        this.params.filterParams = JSON.parse(result["FilterParams"]);
-                        this.state.filter.filters.forEach((d) => {
-                            if (d.field.includes('UTC')) {
-                                d.value = new Date(d.value);
-                            }
-                        });
-                        return data;
-                    }
-                });
-            }
-            else {
-                return null;
-            }
-        });
-    }
-}
-ZGridCalendarBindingDirective.decorators = [
-    { type: Directive, args: [{
-                selector: "[zgridcalendarbinding]",
-            },] }
-];
-ZGridCalendarBindingDirective.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [GridComponent,] }] },
-    { type: WebApiService },
-    { type: AuthService },
-    { type: StorageSessionService },
-    { type: ZGridStatePersistingService }
-];
-ZGridCalendarBindingDirective.propDecorators = {
-    zgridcalendarbinding: [{ type: Input }]
-};
-
-class DateParserFilter {
-    transform(items) {
-        // debugger;
-        if (!items) {
-            return items;
-        }
-        // filter items array, items which match and return true will be
-        // kept, false will be filtered out
-        try {
-            const d = new Date(items);
-            return d;
-        }
-        catch (error) {
-            console.log("DateParserFilter error: ", error);
-            return null;
-        }
-    }
-}
-DateParserFilter.decorators = [
-    { type: Pipe, args: [{
-                name: "dateParser",
-                pure: true,
-            },] }
-];
-
-/********** Angular **********/
-/********** Ionic **********/
-/********** Plugin **********/
-/********** Component & Service **********/
-class EditorFilter {
-    transform(source) {
-        if (!source) {
-            return;
-        }
-        if (typeof source === "string") {
-            try {
-                const 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]";
-            }
-        }
-    }
-    safeStringify(jsonValue) {
-        // Note: cache should not be re-used by repeated calls to JSON.stringify.
-        const cache = [];
-        return JSON.stringify(jsonValue, (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
-    }
-}
-EditorFilter.decorators = [
-    { type: Pipe, args: [{
-                name: 'editorfilter',
-                pure: false
-            },] }
-];
-
-class DivzLayout {
-    transform(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(value => {
-                value['DivClass'] = "col-sm-6";
-            });
-        }
-        else if (zlayout == '3') {
-            Object.values(items).forEach(value => {
-                value['DivClass'] = "col-sm-12";
-            });
-        }
-        return items;
+        return items;
     }
 }
 DivzLayout.decorators = [
@@ -5168,12 +4891,16 @@ class ZgridComponent {
         };
         this.gridSubject = new Subject();
         this.gridDefaultStateExist = false;
+        this.isNew = true;
         this.setData = (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((d, i) => {
@@ -5230,6 +4957,7 @@ class ZgridComponent {
             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 || ZComponentHelper.isMobileScreen()) {
                 this.pageSizes = false;
@@ -5320,10 +5048,8 @@ class ZgridComponent {
         return true;
     }
     locked(colSetting) {
-        if (colSetting['enablePinning'] == true) {
-            if (colSetting['pinnedLeft'] == true) {
-                return true;
-            }
+        if (colSetting['pinnedLeft'] == true) {
+            return true;
         }
         return false;
     }
@@ -5438,7 +5164,13 @@ class ZgridComponent {
     }
     getFormControl(rowIndex, property) {
         const formArray = this.inlineEditedFormGroups.get('items');
-        return formArray.at(rowIndex).get(property);
+        const formItem = formArray.at(rowIndex);
+        if (formItem) {
+            return formItem.get(property);
+        }
+        else {
+            return null;
+        }
     }
     createFormControls() {
         if (this.columns) {
@@ -5447,14 +5179,16 @@ class ZgridComponent {
                 return;
             }
             this.inlineEditedFormGroups = new FormGroup({ items: new FormArray([]) });
-            this.gridData.data.forEach(d => {
-                const items = {};
-                this.columns.forEach(c => {
-                    items[c.field] = new FormControl(d[c.field]);
+            if (Array.isArray(this.gridData.data)) {
+                this.gridData.data.forEach(d => {
+                    const items = {};
+                    this.columns.forEach(c => {
+                        items[c.field] = new FormControl(d[c.field]);
+                    });
+                    const formGroup = new FormGroup(items);
+                    this.inlineEditedFormGroups.get("items").push(formGroup);
                 });
-                const formGroup = new FormGroup(items);
-                this.inlineEditedFormGroups.get("items").push(formGroup);
-            });
+            }
         }
     }
     createFormGroup(dataItem, fieldName) {
@@ -5469,8 +5203,9 @@ class ZgridComponent {
         this.onNavigateTo(event, colSetting, rowData, cellData);
     }
     cellClickHandler(event) {
-        const disableCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
-        if (!disableCellClickHandler) {
+        const disableAllColumnCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
+        const isCommandColumn = event.column.constructor.name == 'CommandColumnComponent' ? true : false;
+        if (!disableAllColumnCellClickHandler && !isCommandColumn) {
             const inCellEditable = this.data.InCellEditable ? this.data.InCellEditable : false;
             if (inCellEditable) {
                 this.editableColumns = this.columns.filter(s => s.isEditableInDataItem === true);
@@ -5519,8 +5254,13 @@ class ZgridComponent {
     }
     showTooltip(e) {
         const element = e.target;
-        if ((element.nodeName === 'TD' || element.nodeName === 'TH') &&
-            element.offsetWidth < element.scrollWidth) {
+        let isCommandColumn = false;
+        element.classList.forEach(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 {
@@ -5555,697 +5295,21 @@ class ZgridComponent {
     clearData() {
         this.zgrid.clearData();
     }
-    allResults() {
-        const _zgridControl = this.zgrid;
-        const _zgridComponent = this.zgrid.grid;
-        const _data = _zgridComponent.data;
-        const paginationApiPostUrl = _zgridControl.paginationApiPostUrl;
-        // Need to clone, if not will affect the grid params.
-        const params = Object.assign({}, this.params);
-        params.pageNo = 0;
-        params.pageSize = _data.total;
-        return this.webApiService.httpPost$(paginationApiPostUrl, params).pipe(map((data) => {
-            const result = {
-                data: process(data.dataSet, {}).data
-            };
-            return result;
-        }));
-    }
-    getClass(dataItem, col) {
-        let 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;
-    }
-    getFormat(col, defaultFormat) {
-        let format = "";
-        if (col.FormatOptions === undefined) {
-            format = defaultFormat ? defaultFormat : "";
-        }
-        else {
-            const formatArr = col.FormatOptions.split(".");
-            let dp = 0;
-            if (formatArr.length > 1) {
-                dp = formatArr[1].length;
-            }
-            if (dp !== 0) {
-                format = "1." + dp + "-" + dp;
-            }
-        }
-        return format;
-    }
-    setHeaderText(columnName, newHeaderTitle) {
-        const gridColumns = this.columns;
-        gridColumns.forEach((col) => {
-            if (col.Name === columnName) {
-                col.title = newHeaderTitle;
-            }
-        });
-    }
-    setGridIsLoading(triggered) {
-        this.isLoading = triggered;
-    }
-    setGridSessionKey(group) {
-        if (group["GridStorageKey"]) {
-            return;
-        }
-        else {
-            group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
-        }
-    }
-    trackBy(index, item) {
-        //console.log(item.data['Id'] || index);
-        return index;
-    }
-    /* Grid configuration function */
-    saveGridSettings() {
-        const _zgridComponent = this.zgrid.grid;
-        const _columns = _zgridComponent.columns;
-        of(this.columns)
-            .pipe(switchMap(() => {
-            const configValue = _columns.toArray().map(item => {
-                const _zGridColumnSettings = Object.keys(item)
-                    .filter(propName => {
-                    return !propName.toLowerCase().includes('template');
-                })
-                    .reduce((acc, curr) => (Object.assign(Object.assign({}, acc), { [curr]: item[curr] })), {});
-                return _zGridColumnSettings;
-            });
-            // remove extra element form array
-            configValue.forEach(item => {
-                delete item['headerStyle'];
-                delete item['__ngContext__'];
-            });
-            const gridSetting = {
-                // state: this.state,
-                columnsConfig: configValue
-            };
-            // Find any setting from localstorage and update, if not just add in.
-            let _arrGridCaching = this.zGridStatePersistingService.get(this.gridStorageKey);
-            let _gridConfig = null;
-            if (_arrGridCaching && _arrGridCaching[0]) {
-                _gridConfig = _arrGridCaching.find(x => x['dataFormFields'] === this.gridStorageKey);
-                if (_gridConfig) {
-                    _gridConfig.gridSettings = gridSetting;
-                }
-            }
-            else {
-                _arrGridCaching = [];
-            }
-            if (!_gridConfig) {
-                _gridConfig = {
-                    dataFormFields: this.gridStorageKey,
-                    gridSettings: gridSetting
-                };
-                _arrGridCaching.push(_gridConfig);
-            }
-            return _arrGridCaching;
-        }), concatMap(gridCache => {
-            // Save grid caching to localstorage
-            this.zGridStatePersistingService.set(this.gridStorageKey, gridCache);
-            // Save to CookieStore
-            return this.mainService.cookieStorePost(this.gridStorageKey, gridCache);
-        }), tap(savedGridCache => {
-            // check is saved state exist to enable/hide restore button
-            this.stateExist();
-        }), tap(() => {
-            // Alert
-            this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
-        })).subscribe();
-    }
-    restoreGridSettings() {
-        of(true)
-            .pipe(switchMap(() => {
-            // Clear localstorage grid setting
-            this.zGridStatePersistingService.remove(this.gridStorageKey);
-            return of(true);
-        }), switchMap(() => {
-            // delete cookiestore gridSetting by storagekey as name
-            return this.mainService.cookieStoreDeleteMultiple(this.gridStorageKey);
-        }), concatMap(() => {
-            // Use original column setting
-            return this.generateGridColumns();
-        }), tap(() => {
-            // check is saved state exist
-            this.stateExist();
-            // Alert
-            this.toastService.show('Grid Setting Restored', "top", true, 2000, 'success');
-        })).subscribe();
-    }
-    getGridSettings() {
-        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
-        // Find any setting from localstorage..
-        let _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-        if (_arrGridCaching) {
-            const _gridCaching = JSON.parse(_arrGridCaching['Value']);
-            if (_gridCaching) {
-                return _gridCaching.gridSettings.columnsConfig.sort((a, b) => a.orderIndex - b.orderIndex);
-            }
-        }
-    }
-    /* Inline setting */
-    getInlineField(value) {
-        return this.columns.find(x => x.Value === value);
-    }
-    getInlineForm(rowIndex) {
-        const formArray = this.inlineEditedFormGroups.get('items');
-        return formArray.at(rowIndex);
-    }
-    getFormControlData(value) {
-        return this.inlineEditedFormGroups.value.items;
-    }
-    /* Event */
-    beforeGridGetData(group, me) {
-        console.warn("beforeDataBinding triggered");
-        if (!group.beforeGridGetData) {
-            console.warn("group.beforeDataBinding is undefined");
-            return of(true);
-        }
-        return group.beforeGridGetData(group, me);
-    }
-    getGridSessionFilter(group, me) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!group["GridStorageKey"]) {
-                return null;
-            }
-            const StorageKey = group["GridStorageKey"];
-            if (this.storageService) {
-                yield this.storageService.get(StorageKey)
-                    .then(data => {
-                    if (!data || !data.value || data.value === "null") {
-                        return null;
-                    }
-                    else {
-                        const result = JSON.parse(data.value);
-                        this.state.filter = JSON.parse(result["StateFilter"]);
-                        this.params.filterParams = JSON.parse(result["FilterParams"]);
-                        this.state.filter.filters.forEach((stateFilter) => {
-                            if (stateFilter.field.includes('UTC')) {
-                                stateFilter.value = new Date(stateFilter.value);
-                            }
-                        });
-                        return data;
-                    }
-                });
-            }
-            else {
-                return null;
-            }
-        });
-    }
-    setGridSessionFilter(group, me) {
-        if (!group["GridStorageKey"]) {
-            return null;
-        }
-        const StorageKey = group["GridStorageKey"];
-        let 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 */
-    filterChange(event) {
-        if (this.zgrid) {
-            this.zgrid.filterChange(event);
-        }
-    }
-    pageChange(event) {
-        if (this.zgrid) {
-            this.zgrid.pageChange(event);
-        }
-    }
-    sortChange(sort) {
-        if (this.zgrid) {
-            this.zgrid.sortChange(sort);
-        }
-    }
-    inCellCheckBoxOnChange(event, rowIndex, column) {
-        const isChecked = event.detail.checked;
-        this.gData[rowIndex][column.Value] = isChecked;
-    }
-    columnsOrderChanged(event) {
-        const _zgridControl = this.zgrid;
-        const _zgridComponent = this.zgrid.grid;
-        const _data = _zgridComponent.data;
-        if (this.zgrid) {
-            const _zgrid = this.zgrid;
-        }
-    }
-}
-ZgridComponent.decorators = [
-    { type: Component, args: [{
-                selector: "app-zgrid",
-                template: "<!--\r\n<div style=\"margin: 10px\">\r\n  <div class=\"card\">\r\n      <div class=\"card-block k-form\">\r\n          <fieldset>\r\n            <legend>Binding types</legend>\r\n            <div class=\"k-form-field\">\r\n                <span>Bind the data to:</span>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"array\" value=\"array\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"array\">Array object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"gridDataResult\" value=\"gridDataResult\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"gridDataResult\">GridDataResult object</label>\r\n                <input [(ngModel)]=\"bindingType\" type=\"radio\" name=\"mode\" id=\"async\" value=\"async\" class=\"k-radio\"\r\n                (change)=\"changeBindingType($event)\">\r\n                <label class=\"k-radio-label\" for=\"async\">Asynchronous source</label>\r\n            </div>\r\n          </fieldset>\r\n      </div>\r\n  </div>\r\n</div> -->\r\n<div style=\"margin: 10px 0 6px 0;\">\r\n  <div *ngIf=\"data.Title\" class=\"gridTitle\">{{data.Title}}</div>\r\n  <ng-template #template let-anchor>\r\n    <span>{{ anchor.nativeElement.innerText }}</span>\r\n  </ng-template>\r\n  <div kendoTooltip\r\n       showOn=\"none\"\r\n       [tooltipTemplate]=\"template\"\r\n       filter=\".k-grid td\"\r\n       (mouseover)=\"showTooltip($event)\">\r\n    <kendo-grid [zgridbinding]=\"{data: data, group: group, params: params, gridSubject: gridSubject}\" [ngClass]=\"data.Class\"\r\n                [data]=\"gridData\"\r\n                [pageSize]=\"state.take\"\r\n                [pageable]=\"{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}"]
-            },] }
-];
-ZgridComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: FormBuilder },
-    { type: AuthService },
-    { type: WebApiService },
-    { type: ZGridStatePersistingService },
-    { type: ToastService },
-    { type: ZCoreService },
-    { type: StorageSessionService },
-    { type: MainService }
-];
-ZgridComponent.propDecorators = {
-    data: [{ type: Input }],
-    group: [{ type: Input }],
-    form: [{ type: Input }],
-    tooltipDir: [{ type: ViewChild, args: [TooltipDirective,] }]
-};
-
-/********** Angular **********/
-class ZgridcalendarComponent {
-    constructor(activatedRoute, router, formBuilder, authService, webApiService, zGridStatePersistingService, toastService, zcoreService) {
-        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.zgrid = null;
-        this.oauthUrl = null;
-        this.mySelection = [];
-        this.componentProperties = new 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 Subject();
-        this.setEnable = (status) => {
-            this.componentProperties.isReadOnly = !status;
-        };
-        this.setVisible = (status) => {
-            this.componentProperties.isVisible = status;
-            this.data.Visible = status;
-        };
-        this.setRequire = (status) => {
-            this.componentProperties.isRequired = status;
-            ZComponentHelper.changeValidator(status, this.group, this.data.Value, this.componentProperties, Validators.required);
-        };
-        this.setData = (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((d, i) => {
-                        d.GridNo = i + 1;
-                    });
-                }
-            }
-            this.createFormControls();
-        };
-        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);
-    }
-    ngOnInit() {
-        ZComponentHelper.setComponentProperties(this);
-        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 || ZComponentHelper.isMobileScreen()) {
-            this.pageSizes = false;
-        }
-        if (this.data.SelectOptions) {
-            this.selectableSettings = {
-                // checkboxOnly: this.checkboxOnly,
-                mode: this.data.SelectOptions === 'single' ? 'single' : 'multiple'
-            };
-        }
-        if (this.data.Value.startsWith('group.')) {
-            const v = this.data.Value.slice(6);
-            this.group[v] = this;
-        }
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-        if (!this.data.ResourceURL) {
-            this.generateGridColumns().subscribe(() => {
-                if (this.data.DataSource && this.data.SkipDirective) {
-                    const ds = ZComponentHelper.getGroupValue(this.data.DataSource, this.group);
-                    this.setData(ds);
-                }
-            });
-        }
-        this.subscription = this.gridSubject.subscribe(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);
-        }
-    }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-    }
-    getGridStyle() {
-        return {
-            "height.px": this.getGridHeight(),
-            "width.px": window.innerWidth - this.widthReduce
-        };
-    }
-    isSelectOption() {
-        let v = false;
-        if (this.data.SelectOptions) {
-            this.selectableSettings = {
-                checkboxOnly: false,
-                mode: (this.data.SelectOptions == "multiple") ? "multiple" : "single"
-            };
-            v = true;
-        }
-        return v;
-    }
-    getGridHeight() {
-        const h = window.innerHeight - this.heightReduce;
-        return (h < 250) ? 250 : h;
-    }
-    getData() {
-        if (this.zgrid) {
-            this.zgrid.getDataBinding();
-        }
-        if (this.data.SkipDirective) {
-            this.gridData = process(this.gData, this.state);
-            this.createFormControls();
-        }
-    }
-    getGridData() {
-        return this.gData;
-    }
-    getFormControl(rowIndex, property) {
-        const formArray = this.inlineEditedFormGroups.get('items');
-        return formArray.at(rowIndex).get(property);
-    }
-    createFormControls() {
-        // only create if there is at least 1 editable column
-        if (this.columns.find(c => c.isEditableInGrid) === undefined) {
-            return;
-        }
-        this.inlineEditedFormGroups = new FormGroup({ items: new FormArray([]) });
-        this.gridData.data.forEach(d => {
-            const items = {};
-            this.columns.forEach(c => {
-                items[c.field] = new FormControl(d[c.field]);
-            });
-            const formGroup = new FormGroup(items);
-            this.inlineEditedFormGroups.get("items").push(formGroup);
-        });
-    }
-    get state() {
-        return this._state;
-    }
-    dataStateChange(state) {
-        if (this.zgrid) {
-            this.zgrid.dataStateChange(state);
-        }
-        else {
-            this.gridData = process(this.gData, state);
-            this.createFormControls();
-        }
-    }
-    filterChange(event) {
-        if (this.zgrid) {
-            this.zgrid.filterChange(event);
-        }
-    }
-    getGroupValue(value, group) {
-        return ZComponentHelper.getGroupValue(this.data.Value, this.group);
-    }
-    onBtnClick(event, colSetting, rowData, cellData) {
-        this.onNavigateTo(event, colSetting, rowData, cellData);
-    }
-    cellClickHandler(event) {
-        const disableCellClickHandler = this.data.DisableCellClickHandler ? this.data.DisableCellClickHandler : false;
-        if (!disableCellClickHandler) {
-            const inCellEditable = this.data.InCellEditable ? this.data.InCellEditable : false;
-            if (inCellEditable) {
-                this.editableColumns = this.columns.filter(s => s.isEditableInDataItem === true);
-                if (!!this.editableColumns) {
-                    this.editableColumns.map(s => event.sender.editCell(event.rowIndex, event.columnIndex, this.createFormGroup(event.dataItem, s.field)));
-                }
-            }
-            else {
-                console.log("cellClick event: ", event);
-                if (this.data.OnItemClick) {
-                    const func = ZComponentHelper.getGroupEvalValue.call(this, this.data.OnItemClick);
-                    if (typeof func === 'function') {
-                        const callFunc = func.bind(this.group.ctrlScope);
-                        callFunc(event);
-                    }
-                    return;
-                }
-            }
-        }
-    }
-    editCellCloseHandler(args) {
-        const { formGroup, dataItem } = args;
-        if (!formGroup.valid) {
-            args.preventDefault();
-        }
-        else if (formGroup.dirty) {
-            this.editableColumns = this.columns.filter(s => s.isEditableInDataItem === true);
-            this.editableColumns.map(s => Object.assign(dataItem, { [s.field]: formGroup.value[s.field] }));
-            this.mySelection.map(s => (s.Id === dataItem.Id) ? Object.assign(s, dataItem) : null);
-        }
-    }
-    createFormGroup(dataItem, fieldName) {
-        return this.formBuilder.group({
-            [fieldName]: dataItem[fieldName]
-        });
-    }
-    onNavigateTo(event, clickAction, rowData, cellData) {
-        const n = ZComponentHelper.getGroupEvalValue.call(this, clickAction.Click);
-        if (n) {
-            event.stopPropagation();
-            this.group.subject.next({
-                type: 'zgrid-onNavigateTo',
-                target: clickAction.Click,
-                rowData: rowData,
-                data: cellData
-            });
-        }
-    }
-    setColumns(columnName, columns) {
-        this.group[columnName] = this.wrapColumnNamesInFieldElement(columns);
-        this.generateGridColumns().subscribe();
-    }
-    wrapColumnNamesInFieldElement(columnList) {
-        return of(columnList.map(c => {
-            const 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
-            };
-        }));
-    }
-    generateGridColumns() {
-        const columnFields$ = ZComponentHelper.getGroupValue(this.data.ColumnFields, // "group.gridCalendarColumnFields"
-        this.group);
-        return columnFields$.pipe(tap(data => {
-            const fieldName = this.data['FieldElementName'];
-            this.columns = [];
-            ZComponentHelper.getGridColumns(data, this.columns, this.group, this.authService, fieldName, null, null, this.data);
-        }));
-    }
-    rowSelectionKey(context) {
-        return context.dataItem;
-    }
-    getSeletectedValues() {
-        return this.mySelection;
-    }
-    refreshGrid(event, group, me) {
-        const _gridOptionSegment = event.target.trim().split('.');
-        const _gridOption = _gridOptionSegment[1];
-        if (_gridOption) {
-            const zgridControl = group[_gridOption];
-            if (zgridControl) {
-                zgridControl.getData();
-            }
-            else {
-                console.log('Unable to find grid value: ' + _gridOption);
-            }
-        }
-        else {
-            console.log('Invalid refreshGrid event: ', event);
-        }
-    }
-    refreshData() {
-        this.getData();
-    }
-    clearData() {
-        this.zgrid.clearData();
-    }
-    allResults() {
-        const _zgridControl = this.zgrid;
-        const _zgridComponent = this.zgrid.grid;
-        const _data = _zgridComponent.data;
-        const paginationApiPostUrl = _zgridControl.paginationApiPostUrl;
-        // Need to clone, if not will affect the grid params.
-        const params = Object.assign({}, this.params);
-        params.pageNo = 0;
-        params.pageSize = _data.total;
-        return this.webApiService.httpPost$(paginationApiPostUrl, params).pipe(map((data) => {
-            const result = {
-                data: process(data.dataSet, {}).data
-            };
-            return result;
-        }));
-    }
-    columnsOrderChanged(event) {
-        const _zgridControl = this.zgrid;
-        const _zgridComponent = this.zgrid.grid;
-        const _data = _zgridComponent.data;
-        if (this.zgrid) {
-            const _zgrid = this.zgrid;
-        }
-    }
-    saveGridSettings() {
-        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-        const _gridName = this.data.Name + '::' + this.data.Value;
-        const _zgridComponent = this.zgrid.grid;
-        const _columns = _zgridComponent.columns;
-        // Keep existing grid column setting
-        this.zGridStatePersistingService.set(_gridName, this.columns);
-        const configValue = _columns.toArray().map(item => {
-            const _zGridColumnSettings = Object.keys(item)
-                .filter(propName => {
-                return !propName.toLowerCase().includes('template');
-            })
-                .reduce((acc, curr) => (Object.assign(Object.assign({}, acc), { [curr]: item[curr] })), {});
-            return _zGridColumnSettings;
-        });
-        // remove extra element form array
-        configValue.forEach(item => {
-            delete item['headerStyle'];
-            delete item['__ngContext__'];
-        });
-        const gridSetting = {
-            // state: this.state,
-            columnsConfig: configValue
-        };
-        // Find any setting from localstorage and update, if not just add in.
-        let _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-        let _gridConfig = null;
-        if (_arrGridCaching && _arrGridCaching[0]) {
-            _gridConfig = _arrGridCaching.find(x => 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');
-    }
-    restoreGridSettings() {
-        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-        const _gridName = this.data.Name + '::' + this.data.Value;
-        // Find any setting from localstorage..
-        let _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
-        if (_arrGridCaching && _arrGridCaching[0]) {
-            const _gridIndex = _arrGridCaching.findIndex(x => 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);
-                    const _deleteCookieStoreURL = this.oauthUrl + "Admin/DeleteMultipleCookies";
-                    const _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');
-            }
-        }
-    }
-    postGridSetting(_storageKey, _arrGridCaching) {
-        const _cookieStoreURL = this.oauthUrl + "api/CookieStores";
-        const _cookieStoreValue = {
-            'Name': _storageKey,
-            'Value': JSON.stringify(_arrGridCaching)
-        };
-        this.webApiService.httpPost$(_cookieStoreURL, _cookieStoreValue).subscribe(res => {
-            if (res.status === "success") {
-                console.log("grid config saved: ", res);
-            }
-        });
+    allResults() {
+        const _zgridControl = this.zgrid;
+        const _zgridComponent = this.zgrid.grid;
+        const _data = _zgridComponent.data;
+        const paginationApiPostUrl = _zgridControl.paginationApiPostUrl;
+        // Need to clone, if not will affect the grid params.
+        const params = Object.assign({}, this.params);
+        params.pageNo = 0;
+        params.pageSize = _data.total;
+        return this.webApiService.httpPost$(paginationApiPostUrl, params).pipe(map((data) => {
+            const result = {
+                data: process(data.dataSet, {}).data
+            };
+            return result;
+        }));
     }
     getClass(dataItem, col) {
         let ngClass = "gridCell ";
@@ -6260,13 +5324,6 @@ class ZgridcalendarComponent {
         }
         return ngClass;
     }
-    getInlineField(value) {
-        return this.columns.find(x => x.Value === value);
-    }
-    getInlineForm(rowIndex) {
-        const formArray = this.inlineEditedFormGroups.get('items');
-        return formArray.at(rowIndex);
-    }
     getFormat(col, defaultFormat) {
         let format = "";
         if (col.FormatOptions === undefined) {
@@ -6292,60 +5349,302 @@ class ZgridcalendarComponent {
             }
         });
     }
-    inCellCheckBoxOnChange(event, rowIndex, column) {
-        const isChecked = event.detail.checked;
-        this.gData[rowIndex][column.Value] = isChecked;
-    }
     setGridIsLoading(triggered) {
         this.isLoading = triggered;
     }
-    filterable(value) {
-        if (value === false) {
-            return false;
+    setGridSessionKey(group) {
+        if (group["GridStorageKey"]) {
+            return;
+        }
+        else {
+            group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
         }
-        return true;
     }
-    sortable(value) {
-        if (value === false) {
-            return false;
+    trackBy(index, item) {
+        //console.log(item.data['Id'] || index);
+        return index;
+    }
+    /* Grid configuration function */
+    saveGridSettings() {
+        const _zgridComponent = this.zgrid.grid;
+        const _columns = _zgridComponent.columns;
+        of(this.columns)
+            .pipe(switchMap(() => {
+            const configValue = _columns.toArray().map(item => {
+                const _zGridColumnSettings = Object.keys(item)
+                    .filter(propName => {
+                    return !propName.toLowerCase().includes('template');
+                })
+                    .reduce((acc, curr) => (Object.assign(Object.assign({}, acc), { [curr]: item[curr] })), {});
+                return _zGridColumnSettings;
+            });
+            // remove extra element form array
+            configValue.forEach(item => {
+                delete item['headerStyle'];
+                delete item['__ngContext__'];
+            });
+            const gridSetting = {
+                // state: this.state,
+                columnsConfig: configValue
+            };
+            // Find any setting from localstorage and update, if not just add in.
+            let _arrGridCaching = this.zGridStatePersistingService.get(this.gridStorageKey);
+            let _gridConfig = null;
+            if (_arrGridCaching && _arrGridCaching[0]) {
+                _gridConfig = _arrGridCaching.find(x => x['dataFormFields'] === this.gridStorageKey);
+                if (_gridConfig) {
+                    _gridConfig.gridSettings = gridSetting;
+                }
+            }
+            else {
+                _arrGridCaching = [];
+            }
+            if (!_gridConfig) {
+                _gridConfig = {
+                    dataFormFields: this.gridStorageKey,
+                    gridSettings: gridSetting
+                };
+                _arrGridCaching.push(_gridConfig);
+            }
+            return _arrGridCaching;
+        }), concatMap(gridCache => {
+            // Save grid caching to localstorage
+            this.zGridStatePersistingService.set(this.gridStorageKey, gridCache);
+            // Save to CookieStore
+            return this.mainService.cookieStorePost(this.gridStorageKey, gridCache);
+        }), tap(savedGridCache => {
+            // check is saved state exist to enable/hide restore button
+            this.stateExist();
+        }), tap(() => {
+            // Alert
+            this.toastService.show('Grid Setting Saved', "top", true, 2000, 'success');
+        })).subscribe();
+    }
+    restoreGridSettings() {
+        of(true)
+            .pipe(switchMap(() => {
+            // Clear localstorage grid setting
+            this.zGridStatePersistingService.remove(this.gridStorageKey);
+            return of(true);
+        }), switchMap(() => {
+            // delete cookiestore gridSetting by storagekey as name
+            return this.mainService.cookieStoreDeleteMultiple(this.gridStorageKey);
+        }), concatMap(() => {
+            // Use original column setting
+            return this.generateGridColumns();
+        }), tap(() => {
+            // check is saved state exist
+            this.stateExist();
+            // Alert
+            this.toastService.show('Grid Setting Restored', "top", true, 2000, 'success');
+        })).subscribe();
+    }
+    getGridSettings() {
+        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
+        // Find any setting from localstorage..
+        let _arrGridCaching = this.zGridStatePersistingService.get(_storageKey);
+        if (_arrGridCaching) {
+            const _gridCaching = JSON.parse(_arrGridCaching['Value']);
+            if (_gridCaching) {
+                return _gridCaching.gridSettings.columnsConfig.sort((a, b) => a.orderIndex - b.orderIndex);
+            }
         }
-        return true;
     }
-    locked(colSetting) {
-        if (colSetting['enablePinning'] == true) {
-            if (colSetting['pinnedLeft'] == true) {
-                return true;
+    /* Inline setting */
+    getInlineField(value) {
+        return this.columns.find(x => x.Value === value);
+    }
+    getInlineForm(rowIndex) {
+        const formArray = this.inlineEditedFormGroups.get('items');
+        return formArray.at(rowIndex);
+    }
+    getFormControlData(value) {
+        return this.inlineEditedFormGroups.value.items;
+    }
+    /* Event */
+    beforeGridGetData(group, me) {
+        console.warn("beforeDataBinding triggered");
+        if (!group.beforeGridGetData) {
+            console.warn("group.beforeDataBinding is undefined");
+            return of(true);
+        }
+        return group.beforeGridGetData(group, me);
+    }
+    getGridSessionFilter(group, me) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!group["GridStorageKey"]) {
+                return null;
+            }
+            const StorageKey = group["GridStorageKey"];
+            if (this.storageService) {
+                yield this.storageService.get(StorageKey)
+                    .then(data => {
+                    if (!data || !data.value || data.value === "null") {
+                        return null;
+                    }
+                    else {
+                        const result = JSON.parse(data.value);
+                        this.state.filter = JSON.parse(result["StateFilter"]);
+                        this.params.filterParams = JSON.parse(result["FilterParams"]);
+                        this.state.filter.filters.forEach((stateFilter) => {
+                            if (stateFilter.field.includes('UTC')) {
+                                stateFilter.value = new Date(stateFilter.value);
+                            }
+                        });
+                        return data;
+                    }
+                });
+            }
+            else {
+                return null;
             }
+        });
+    }
+    setGridSessionFilter(group, me) {
+        if (!group["GridStorageKey"]) {
+            return null;
+        }
+        const StorageKey = group["GridStorageKey"];
+        let 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));
         }
-        return false;
     }
-    stateExist() {
-        const _storageKey = 'ionic-field::' + this.authService.e1Token.userName;
-        const _gridName = this.data.Name + '::' + this.data.Value;
-        const userGridState = this.zGridStatePersistingService.get(_storageKey);
-        const originalGridState = this.zGridStatePersistingService.get(_gridName);
-        if (userGridState || originalGridState) {
-            return true;
+    /* onchange Events */
+    filterChange(event) {
+        if (this.zgrid) {
+            this.zgrid.filterChange(event);
         }
-        return false;
     }
-    setGridSessionKey(group) {
-        if (group["GridStorageKey"]) {
-            return;
+    pageChange(event) {
+        if (this.zgrid) {
+            this.zgrid.pageChange(event);
         }
-        else {
-            group["GridStorageKey"] = 'zgrid_' + group.resourceURL + '_' + this.data.Value + '::' + this.authService.e1Token.userName;
+    }
+    sortChange(sort) {
+        if (this.zgrid) {
+            this.zgrid.sortChange(sort);
+        }
+    }
+    inCellCheckBoxOnChange(event, rowIndex, column) {
+        const isChecked = event.detail.checked;
+        this.gData[rowIndex][column.Value] = isChecked;
+    }
+    columnsOrderChanged(event) {
+        const _zgridControl = this.zgrid;
+        const _zgridComponent = this.zgrid.grid;
+        const _data = _zgridComponent.data;
+        if (this.zgrid) {
+            const _zgrid = this.zgrid;
+        }
+    }
+    /*  */
+    addHandler({ sender }) {
+        this.isNew = true;
+        // close any existing editor
+        this.closeEditor(sender);
+        // loop all column to get validation and create form control
+        const colFormControl = {};
+        this.zgrid.gridColumns.forEach(col => {
+            const validators = [];
+            if (col.IsRequired) {
+                validators.push(Validators.required);
+            }
+            if (col.ValidatorPattern) {
+                validators.push(Validators.pattern(col.ValidatorPattern));
+            }
+            colFormControl[col.Value] = new FormControl(null, validators);
+        });
+        // set form control object to form group
+        this.formGroup = new FormGroup(colFormControl);
+        // add to grid row
+        sender.addRow(this.formGroup);
+    }
+    saveHandler({ sender, rowIndex, formGroup, isNew }) {
+        // get grid data.
+        const gridExistingData = this.gData ? this.gData : [];
+        // if valid
+        if (formGroup.valid) {
+            // check for duplicate UniqueKey
+            let uniqueKeyExist = false;
+            const uniqueKey = this.data['UniqueKey'];
+            if (uniqueKey) {
+                gridExistingData.forEach(data => {
+                    if (data[uniqueKey] === formGroup.value[uniqueKey]) {
+                        uniqueKeyExist = true;
+                    }
+                });
+            }
+            if (!uniqueKeyExist) {
+                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);
+            }
+        }
+    }
+    cancelHandler({ sender, rowIndex }) {
+        // cancel any existing editor
+        sender.closeRow(rowIndex);
+    }
+    editHandler({ sender, rowIndex, 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
+        const colFormControl = {};
+        this.zgrid.gridColumns.forEach(col => {
+            const validators = [];
+            if (col.IsRequired) {
+                validators.push(Validators.required);
+            }
+            if (col.ValidatorPattern) {
+                validators.push(Validators.pattern(col.ValidatorPattern));
+            }
+            colFormControl[col.Value] = new FormControl(dataItem[col.Value], validators);
+        });
+        // set form control object to form group
+        this.formGroup = new FormGroup(colFormControl);
+        // set grid row to edit
+        this.editedRowIndex = rowIndex;
+        sender.editRow(rowIndex, this.formGroup);
+    }
+    removeHandler({ sender, dataItem }) {
+        const index = this.getItemIndex(dataItem, this.gData, this.data['UniqueKey']);
+        this.gData.splice(index, 1);
+        sender.cancelCell();
+    }
+    closeEditor(grid, rowIndex = this.editedRowIndex) {
+        grid.closeRow(rowIndex);
+        this.editedRowIndex = undefined;
+        this.formGroup = undefined;
+    }
+    getItemIndex(item, data, key) {
+        for (let idx = 0; idx < data.length; idx++) {
+            if (data[idx][key] === item[key]) {
+                return idx;
+            }
         }
+        return -1;
     }
 }
-ZgridcalendarComponent.decorators = [
+ZgridComponent.decorators = [
     { type: 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 = () => [
+ZgridComponent.ctorParameters = () => [
     { type: ActivatedRoute },
     { type: Router },
     { type: FormBuilder },
@@ -6353,12 +5652,15 @@ ZgridcalendarComponent.ctorParameters = () => [
     { type: WebApiService },
     { type: ZGridStatePersistingService },
     { type: ToastService },
-    { type: ZCoreService }
+    { type: ZCoreService },
+    { type: StorageSessionService },
+    { type: MainService }
 ];
-ZgridcalendarComponent.propDecorators = {
+ZgridComponent.propDecorators = {
     data: [{ type: Input }],
     group: [{ type: Input }],
-    form: [{ type: Input }]
+    form: [{ type: Input }],
+    tooltipDir: [{ type: ViewChild, args: [TooltipDirective,] }]
 };
 
 class ZimgComponent {
@@ -9279,6 +8581,7 @@ class ZtreeComponent {
         this.state = { expandedkeys: [] };
         this.itemIndex = [];
         this.selectedKeys = [];
+        this.absoluteText = false;
         this.componentProperties = new ZComponentProperties();
         this.isExpanded = (dataItem, index) => {
             // console.log(index);
@@ -9354,6 +8657,10 @@ class ZtreeComponent {
         if (this.data.TreeviewExpandAll) {
             this.expandAll();
         }
+        // fix text align issue
+        if (this.data.OnAddNode || this.data.OnRemoveNode) {
+            this.absoluteText = true;
+        }
     }
     ngAfterViewInit() {
         // const componentId = ZComponentHelper.getComponentId(this.data);
@@ -9618,8 +8925,8 @@ class ZtreeComponent {
 ZtreeComponent.decorators = [
     { type: 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 = () => [];
@@ -11039,7 +10346,6 @@ class ZComponentService {
             zdiv: ZdivComponent,
             zgauge: ZgaugeComponent,
             zgrid: ZgridComponent,
-            zgridcalendar: ZgridcalendarComponent,
             zimg: ZimgComponent,
             zkcard: ZkcardComponent,
             zlabel: ZlabelComponent,
@@ -11198,7 +10504,7 @@ MmhglobalDynamicformModule.decorators = [
                     ScrollbarThemeDirective,
                     FieldElementDirective,
                     ZGridBindingDirective,
-                    ZGridCalendarBindingDirective,
+                    ZGridPopupAnchorDirective,
                     OpenOnFocusDirective,
                     DateParserFilter,
                     EditorFilter,
@@ -11229,7 +10535,6 @@ MmhglobalDynamicformModule.decorators = [
                     ZformcontrolComponent,
                     ZgaugeComponent,
                     ZgridComponent,
-                    ZgridcalendarComponent,
                     ZimgComponent,
                     ZkcardComponent,
                     ZlabelComponent,
@@ -11298,7 +10603,7 @@ MmhglobalDynamicformModule.decorators = [
                     ScrollbarThemeDirective,
                     FieldElementDirective,
                     ZGridBindingDirective,
-                    ZGridCalendarBindingDirective,
+                    ZGridPopupAnchorDirective,
                     OpenOnFocusDirective,
                     DateParserFilter,
                     EditorFilter,
@@ -11329,7 +10634,6 @@ MmhglobalDynamicformModule.decorators = [
                     ZformcontrolComponent,
                     ZgaugeComponent,
                     ZgridComponent,
-                    ZgridcalendarComponent,
                     ZimgComponent,
                     ZkcardComponent,
                     ZlabelComponent,
@@ -11379,7 +10683,6 @@ MmhglobalDynamicformModule.decorators = [
                     ZformcontrolComponent,
                     ZgaugeComponent,
                     ZgridComponent,
-                    ZgridcalendarComponent,
                     ZimgComponent,
                     ZkcardComponent,
                     ZlabelComponent,
@@ -11419,5 +10722,5 @@ MmhglobalDynamicformModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ExportOptions, FieldElementDirective, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, ScrollbarThemeDirective, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZSchedulerToolBarComponent, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridcalendarComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule, ZComponentDebugService as ɵa, ZGridCalendarBindingDirective as ɵb, ZComponentService as ɵc };
+export { DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ExportOptions, FieldElementDirective, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, ScrollbarThemeDirective, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZSchedulerToolBarComponent, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule, ZComponentDebugService as ɵa, ZComponentService as ɵb };
 //# sourceMappingURL=mmhglobal-dynamicform.js.map