mmhglobal-dynamicform 1.1.31 → 1.1.35

package/README.md

@@ -3,6 +3,26 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog 
+`1.35`<br/>
+Temp disable get grid setting from cookiestore when load.
+Fix and enable back grid session storage.
+
+`1.34`<br/>
+Fix zgrid intermittent display all column.
+Fix zText tooltip issue.
+Fix zSelectMultiple virtual problem for desktop view.
+
+`1.33`<br/>
+[zupload] - minor fix for selectFileOnly attribute. <br/>
+[zgrid] - added support for filter operator "contains" for .net core. Default as contains, to use ==, zgrid attribute add FilterContainsUsingEqual:true.
+
+`1.32`<br/>
+[zgrid] - added getFormControlData function to retrieve incell data. <br/>
+[zgrid] - added AfterloadCallback attribute handling. <br/>
+[zgrid] - fix form control error when grid data is null. <br/>
+[zupload] - save file data to group scope. <br/>
+[zquerybuilder] - bug fix for query builder.
+
 `1.31`<br/>
 update dynamicform module for zuploadmodule. <br/>
 

package/bundles/mmhglobal-dynamicform.umd.js

@@ -2141,6 +2141,85 @@
                 _this.getDataBinding();
             });
         };
+        ZGridBindingDirective.prototype.getFilterParamsColumns = function () {
+            var colFields = [];
+            this.gridColumns.forEach(function (field) {
+                if (field.valueExpr) {
+                    colFields.push(field.valueExpr + " as " + field.field);
+                }
+                else {
+                    colFields.push(field.field);
+                }
+            });
+            if (colFields.length > 0) {
+                if (colFields.indexOf("Id") === -1) {
+                    colFields.push("Id");
+                }
+            }
+            var tmpGridColumn = [];
+            tmpGridColumn.push(colFields.join(","));
+            if (this.usableColumns.length > 0) {
+                tmpGridColumn.push(this.usableColumns.join(","));
+            }
+            this.params.columns = tmpGridColumn.join(",");
+        };
+        ZGridBindingDirective.prototype.getFilter = function () {
+            var _this = this;
+            if (this.params.filters && this.field.Filters) {
+                this.params.filters = this.params.filters + " && " + this.field.Filters;
+            }
+            else if (!this.params.filters && this.field.Filters) {
+                this.params.filters = this.field.Filters;
+            }
+            if (this.field.Filters && this.field.Filters.indexOf("group.") !== -1) {
+                var filterKeyValPairs = this.field.Filters.split(" ");
+                var grpValues = filterKeyValPairs.filter(function (element) { return element.trim().indexOf("group.") !== -1; });
+                grpValues.forEach(function (val) {
+                    var actualVal = i3.ZComponentHelper.getGroupValue(val, _this.grp);
+                    _this.params.filters = _this.params.filters.replace(val, actualVal);
+                });
+            }
+        };
+        ZGridBindingDirective.prototype.getFilterParams = function () {
+            if (this.field['FilterParams']) {
+                if (this.field['FilterParams'].indexOf("group.") !== -1) {
+                    this.params.filterParams = i3.ZComponentHelper.getGroupValue(this.field['FilterParams'], this.grp);
+                }
+                else {
+                    this.params.filterParams = this.field['FilterParams'];
+                }
+            }
+        };
+        ZGridBindingDirective.prototype.getSorting = function () {
+            if (this.field.SortOrder) {
+                if (this.field.SortOrder.indexOf("group.") !== -1) {
+                    this.params.sortOrder = i3.ZComponentHelper.getGroupValue(this.field.SortOrder, this.grp);
+                }
+                else {
+                    this.params.sortOrder = this.field.SortOrder;
+                }
+            }
+        };
+        ZGridBindingDirective.prototype.getGrantType = function () {
+            if (this.field.GrantType) {
+                this.params.grantType = i3.ZComponentHelper.getGroupValue(this.field.GrantType.toString(), this.grp);
+            }
+        };
+        ZGridBindingDirective.prototype.setHiddenColumn = function (gridSetting) {
+            var _this = this;
+            if (this.gridColumns && gridSetting) {
+                // filter out hidden == false array.
+                var gridSettingHiddenCol = gridSetting.filter(function (item) {
+                    return item['hidden'] == true;
+                });
+                // find and set the hidden to current column setting.
+                Object.values(gridSettingHiddenCol).forEach(function (value) {
+                    if (_this.gridColumns.find(function (c) { return c.field === value.field; })) {
+                        _this.gridColumns.find(function (c) { return c.field === value.field; })['hidden'] = value['hidden'];
+                    }
+                });
+            }
+        };
         ZGridBindingDirective.prototype.getDataBinding = function () {
             var _this = this;
             this.grid.loading = true;
@@ -2198,38 +2277,6 @@
         ZGridBindingDirective.prototype.clearData = function () {
             this.grid.data = { data: [], total: 0 };
         };
-        ZGridBindingDirective.prototype.getFilterParamsColumns = function () {
-            var colFields = [];
-            this.gridColumns.forEach(function (field) {
-                if (field.valueExpr) {
-                    colFields.push(field.valueExpr + " as " + field.field);
-                }
-                else {
-                    colFields.push(field.field);
-                }
-            });
-            if (colFields.length > 0) {
-                if (colFields.indexOf("Id") === -1) {
-                    colFields.push("Id");
-                }
-            }
-            var tmpGridColumn = [];
-            tmpGridColumn.push(colFields.join(","));
-            if (this.usableColumns.length > 0) {
-                tmpGridColumn.push(this.usableColumns.join(","));
-            }
-            this.params.columns = tmpGridColumn.join(",");
-        };
-        ZGridBindingDirective.prototype.getFilterParams = function () {
-            if (this.field['FilterParams']) {
-                if (this.field['FilterParams'].indexOf("group.") !== -1) {
-                    this.params.filterParams = i3.ZComponentHelper.getGroupValue(this.field['FilterParams'], this.grp);
-                }
-                else {
-                    this.params.filterParams = this.field['FilterParams'];
-                }
-            }
-        };
         ZGridBindingDirective.prototype.aggregateHandling = function (data) {
             var aggregateColumns = this.gridColumns.filter(function (x) { return x.aggregateType; });
             aggregateColumns.forEach(function (col) {
@@ -2270,38 +2317,6 @@
                 col.aggregateValue = 0;
             });
         };
-        ZGridBindingDirective.prototype.getFilter = function () {
-            var _this = this;
-            if (this.params.filters && this.field.Filters) {
-                this.params.filters = this.params.filters + " && " + this.field.Filters;
-            }
-            else if (!this.params.filters && this.field.Filters) {
-                this.params.filters = this.field.Filters;
-            }
-            if (this.field.Filters && this.field.Filters.indexOf("group.") !== -1) {
-                var filterKeyValPairs = this.field.Filters.split(" ");
-                var grpValues = filterKeyValPairs.filter(function (element) { return element.trim().indexOf("group.") !== -1; });
-                grpValues.forEach(function (val) {
-                    var actualVal = i3.ZComponentHelper.getGroupValue(val, _this.grp);
-                    _this.params.filters = _this.params.filters.replace(val, actualVal);
-                });
-            }
-        };
-        ZGridBindingDirective.prototype.getSorting = function () {
-            if (this.field.SortOrder) {
-                if (this.field.SortOrder.indexOf("group.") !== -1) {
-                    this.params.sortOrder = i3.ZComponentHelper.getGroupValue(this.field.SortOrder, this.grp);
-                }
-                else {
-                    this.params.sortOrder = this.field.SortOrder;
-                }
-            }
-        };
-        ZGridBindingDirective.prototype.getGrantType = function () {
-            if (this.field.GrantType) {
-                this.params.grantType = i3.ZComponentHelper.getGroupValue(this.field.GrantType.toString(), this.grp);
-            }
-        };
         ZGridBindingDirective.prototype.pageChange = function (event) {
             this.params.pageNo = event.skip / this.params.pageSize;
             this.state.skip = event.skip;
@@ -2397,6 +2412,11 @@
                     return "isnull";
                 case "isnotnull":
                     return "isnotnull";
+                case "contains": {
+                    if (!this.field['FilterContainsUsingEqual']) {
+                        return "contains";
+                    }
+                }
                 default:
                     return "==";
                 // eq, neq, isnull, isnotnull, endswith, startswith
@@ -2413,21 +2433,6 @@
                 }
             }
         };
-        ZGridBindingDirective.prototype.setHiddenColumn = function (gridSetting) {
-            var _this = this;
-            if (this.gridColumns && gridSetting) {
-                // filter out hidden == false array.
-                var gridSettingHiddenCol = gridSetting.filter(function (item) {
-                    return item['hidden'] == true;
-                });
-                // find and set the hidden to current column setting.
-                Object.values(gridSettingHiddenCol).forEach(function (value) {
-                    if (_this.gridColumns.find(function (c) { return c.field === value.field; })) {
-                        _this.gridColumns.find(function (c) { return c.field === value.field; })['hidden'] = value['hidden'];
-                    }
-                });
-            }
-        };
         ZGridBindingDirective.prototype.beforeGridGetData = function (group, me) {
             console.warn("beforeDataBinding triggered");
             if (!group.beforeGridGetData) {
@@ -2437,61 +2442,49 @@
             return group.beforeGridGetData(group, me);
         };
         ZGridBindingDirective.prototype.getGridSessionFilter = function (group, me) {
-            return __awaiter(this, void 0, void 0, function () {
-                var StorageKey;
-                var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!group["GridStorageKey"]) {
-                                return [2 /*return*/, null];
+            var _this = this;
+            if (!group["GridStorageKey"]) {
+                return rxjs.of([]);
+            }
+            var StorageKey = group["GridStorageKey"];
+            if (this.storageService) {
+                var subject_1 = new rxjs.Subject();
+                rxjs.of(true)
+                    .pipe(operators.switchMap(function () {
+                    return _this.storageService.get(StorageKey);
+                }), operators.tap(function (data) {
+                    if (!data || !data.value || data.value === "null") {
+                        subject_1.next();
+                    }
+                    else {
+                        var result = JSON.parse(data.value);
+                        _this.state.filter = JSON.parse(result["StateFilter"]);
+                        _this.params.filterParams = JSON.parse(result["FilterParams"]);
+                        _this.state.filter.filters.forEach(function (d) {
+                            if (d.field.includes('UTC')) {
+                                d.value = new Date(d.value);
                             }
-                            StorageKey = group["GridStorageKey"];
-                            if (!this.storageService) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this.storageService.get(StorageKey)
-                                    .then(function (data) {
-                                    if (!data || !data.value || data.value === "null") {
-                                        return null;
-                                    }
-                                    else {
-                                        var result = JSON.parse(data.value);
-                                        _this.state.filter = JSON.parse(result["StateFilter"]);
-                                        _this.params.filterParams = JSON.parse(result["FilterParams"]);
-                                        _this.state.filter.filters.forEach(function (d) {
-                                            if (d.field.includes('UTC')) {
-                                                d.value = new Date(d.value);
-                                            }
-                                        });
-                                        return data;
-                                    }
-                                })];
-                        case 1:
-                            _a.sent();
-                            return [3 /*break*/, 3];
-                        case 2: return [2 /*return*/, null];
-                        case 3: return [2 /*return*/];
+                        });
+                        subject_1.next();
                     }
-                });
-            });
+                })).subscribe();
+                return subject_1.asObservable();
+            }
+            else {
+                return rxjs.of([]);
+            }
         };
         ZGridBindingDirective.prototype.setGridSessionFilter = function (group, me) {
-            return __awaiter(this, void 0, void 0, function () {
-                var StorageKey, lstGridFilter;
-                return __generator(this, function (_a) {
-                    if (!group["GridStorageKey"]) {
-                        return [2 /*return*/, null];
-                    }
-                    StorageKey = group["GridStorageKey"];
-                    lstGridFilter = {};
-                    if (me.state.filter && this.storageService && this.field['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 [2 /*return*/];
-                });
-            });
+            if (!group["GridStorageKey"]) {
+                return null;
+            }
+            var StorageKey = group["GridStorageKey"];
+            if (me.state.filter && this.storageService && this.field['SaveFilter']) {
+                //list of data for StateFilter and FilterParams
+                var lstGridFilter = { "StateFilter": JSON.stringify(me.state.filter), "FilterParams": JSON.stringify(me.params.filterParams) };
+                //create session storage
+                this.storageService.set(StorageKey, JSON.stringify(lstGridFilter));
+            }
         };
         return ZGridBindingDirective;
     }(kendoAngularGrid.DataBindingDirective));
@@ -5537,7 +5530,9 @@
                         });
                     }
                 }
-                _this.createFormControls();
+                if (_this.gData) {
+                    _this.createFormControls();
+                }
             };
             /* Available Functions */
             this.setEnable = function (status) {
@@ -5565,17 +5560,20 @@
             // Grid saved setting key(Used in CookieStore & LocalStorage)
             this.gridStorageKey = 'ionic-field::' + this.authService.e1Token.userName + '::' + this.data.Name + '::' + this.router.url;
             rxjs.of(true)
-                .pipe(operators.concatMap(function () {
-                // try get gridsetting from cookiestore
-                return _this.mainService.cookieStoreGet(_this.gridStorageKey, _this.authService.e1Token.access_token);
-            }), operators.switchMap(function (savedGridCache) {
-                if (savedGridCache) {
-                    // Keep the gridSetting from cookiestore to localStorage
-                    _this.zGridStatePersistingService.set(_this.gridStorageKey, savedGridCache);
-                    return rxjs.of(true);
-                }
-                return rxjs.of(false);
-            }), operators.switchMap(function () {
+                .pipe(
+            //concatMap(() => {
+            //  // try get gridsetting from cookiestore
+            //  return this.mainService.cookieStoreGet(this.gridStorageKey, this.authService.e1Token.access_token);
+            //}),
+            //switchMap(savedGridCache => {
+            //  if (savedGridCache) {  
+            //    // Keep the gridSetting from cookiestore to localStorage
+            //    this.zGridStatePersistingService.set(this.gridStorageKey, savedGridCache);
+            //    return of(true);
+            //  }
+            //  return of(false);
+            //}),
+            operators.switchMap(function () {
                 // Grid default setting
                 _this.columns = [];
                 _this.widthReduce = _this.data.WidthReduce || 60;
@@ -5628,6 +5626,8 @@
                     _this.setGridSessionKey(_this.group);
                 }
                 return rxjs.of(true);
+            }), operators.tap(function () {
+                _this.gridCallback(_this.group);
             })).subscribe();
         };
         ZgridComponent.prototype.ngOnDestroy = function () {
@@ -5769,6 +5769,16 @@
                 });
             }
         };
+        ZgridComponent.prototype.gridCallback = function (group) {
+            if (this.data['AfterloadCallback']) {
+                var me = Object.assign({}, this);
+                this.group.subject.next({
+                    type: "zgrid-AfterloadCallback",
+                    target: this.data['AfterloadCallback'],
+                    data: me
+                });
+            }
+        };
         ZgridComponent.prototype.getData = function () {
             if (this.zgrid) {
                 this.zgrid.getDataBinding();
@@ -6074,6 +6084,9 @@
             var formArray = this.inlineEditedFormGroups.get('items');
             return formArray.at(rowIndex);
         };
+        ZgridComponent.prototype.getFormControlData = function (value) {
+            return this.inlineEditedFormGroups.value.items;
+        };
         /* Event */
         ZgridComponent.prototype.beforeGridGetData = function (group, me) {
             console.warn("beforeDataBinding triggered");
@@ -8125,10 +8138,12 @@
             return this.qbItems[rule.field].options ? this.qbItems[rule.field].options : optionsList;
         };
         ZquerybuilderComponent.prototype.setQueryValue = function (queryValueString) {
-            var defaultQueryValueJson = JSON.parse(queryValueString);
-            this.queryCtrl = defaultQueryValueJson;
-            // default lock the query builder if there default query
-            this.completeRule(true, defaultQueryValueJson);
+            if (queryValueString) {
+                var defaultQueryValueJson = toQueryRule(JSON.parse(queryValueString));
+                this.queryCtrl = defaultQueryValueJson;
+                // default lock the query builder if there default query
+                this.completeRule(true, defaultQueryValueJson);
+            }
         };
         return ZquerybuilderComponent;
     }());
@@ -8150,7 +8165,23 @@
         data: [{ type: i0.Input }],
         group: [{ type: i0.Input }],
         form: [{ type: i0.Input }]
-    };
+    };
+    function toQueryRule(queryBuilderModel) {
+        var rule = {};
+        if (queryBuilderModel.condition) {
+            rule.condition = queryBuilderModel.condition;
+            rule.rules = queryBuilderModel.rules.map(function (q) { return toQueryRule(q); });
+        }
+        else {
+            rule.field = queryBuilderModel.field;
+            rule.type = queryBuilderModel.type;
+            rule.operator = queryBuilderModel.operator;
+            rule.value = queryBuilderModel.value instanceof Array
+                ? queryBuilderModel.type === 'date' ? new Date(queryBuilderModel.value) : queryBuilderModel.value
+                : [queryBuilderModel.type === 'date' ? new Date(queryBuilderModel.value) : queryBuilderModel.value];
+        }
+        return rule;
+    }
 
     /********** Angular **********/
     var ZreportComponent = /** @class */ (function () {
@@ -8565,6 +8596,10 @@
                 "optionFilters": "",
                 "totalCount": 0
             };
+            this.virtual = {
+                itemHeight: 28,
+                pageSize: 15
+            };
             // Common function
             this.setEnable = function (status) {
                 var fc = _this.group.form.controls[_this.data.Value];
@@ -9044,7 +9079,7 @@
     ZselectmultipleComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zselectmultiple",
-                    template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"setTooltipsDisplayText()\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableCloseButtonTemplate>\r\n          <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n          <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n        <ion-toolbar>\r\n          <ion-row>\r\n            <ion-col>\r\n              <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                Clear\r\n              </ion-button>\r\n            </ion-col>\r\n            <ion-col>\r\n              <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                OK\r\n              </ion-button>\r\n            </ion-col>\r\n          </ion-row>\r\n        </ion-toolbar>\r\n      </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"setTooltipsDisplayText()\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"setTooltipsDisplayText()\">\r\n      <fa-icon [icon]=\"setTooltipsInfoIcon()\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\r\n                      [valueField]=\"itemValueField\"\r\n                      [textField]=\"itemTextField\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [valuePrimitive]=\"true\"\r\n                      [placeholder]=\"data.PlaceHolder\"\r\n                      [allowCustom]=\"allowCustomValue\"\r\n                      [suggest]=\"true\"\r\n                      [filterable]=\"!!data.HasInfiniteScroll\"\r\n                      [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                      [loading]=\"isLoading\"\r\n                      (valueChange)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n          <!-- For Validation feature -->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n      <kendo-multiselect *ngIf=\"data.Multiple\"\r\n                         [data]=\"getItemsData()\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [textField]=\"itemTextField\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [valuePrimitive]=\"true\"\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [allowCustom]=\"allowCustomValue\"\r\n                         [filterable]=\"!!data.HasInfiniteScroll\"\r\n                         [checkboxes]=\"data.EnableCheckbox\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (valueChange)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n    </div>\r\n\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"setTooltipsDisplayText()\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n",
+                    template: "<ion-item [ngClass]=\"getClass(form, data)\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && isMobileScreen()\">\r\n\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"componentProperties.isRequired\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide\"\r\n               [text]=\"setTooltipsDisplayText()\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <div [class]=\"setTooltipsInfoSideBySide()\" *ngIf=\"!isLoading\">\r\n    <div style=\"flex-grow: 1;\">\r\n      <ionic-selectable #selectComponent item-content\r\n                        searchFailText=\"Nothing found :(\"\r\n                        headerColor=\"primary\"\r\n                        clearButtonText=\"Clear\"\r\n                        [(ngModel)]=\"group.zModel[data.Value]\"\r\n                        [id]=\"data.Value\"\r\n                        [items]=\"getItemsData()\"\r\n                        [itemValueField]=\"itemValueField\"\r\n                        [itemTextField]=\"itemTextField\"\r\n                        [canAddItem]=\"!!data.OnAddItem\"\r\n                        [canClear]=\"true\"\r\n                        [placeholder]=\"data.PlaceHolder\"\r\n                        [canSearch]=\"!data['disable-search']\"\r\n                        [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                        [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\"\r\n                        [isMultiple]=\"data.Multiple\"\r\n                        [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                        [shouldStoreItemValue]=\"true\"\r\n                        (onSearch)=\"onSearch($event)\"\r\n                        (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                        (onAddItem)=\"onAddItem($event)\"\r\n                        (onChange)=\"onChange($event)\">\r\n\r\n        <ng-template ionicSelectableItemIconTemplate\r\n                     let-item=\"item\"\r\n                     let-isItemSelected=\"isItemSelected\">\r\n          <fa-icon slot=\"start\"\r\n                   class=\"isItemSelected\"\r\n                   size=\"sm\"\r\n                   [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n                   [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableCloseButtonTemplate>\r\n          <!-- <ion-icon name=\"close-circle\"></ion-icon> -->\r\n          <fa-icon [icon]=\"'times-circle'\" size=\"md\"></fa-icon>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableTitleTemplate>\r\n          {{data.Label}}\r\n          <ion-text *ngIf=\"getIsRequiredValue()\" color=\"danger\">*</ion-text>\r\n        </ng-template>\r\n\r\n        <ng-template ionicSelectableItemTemplate let-item=\"item\">\r\n          {{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}\r\n          <!-- <ng-template zselectitemelement [item]=\"item\"></ng-template> -->\r\n        </ng-template>\r\n\r\n        <!--<ng-template ionicSelectableFooterTemplate>\r\n        <ion-toolbar>\r\n          <ion-row>\r\n            <ion-col>\r\n              <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"clearItems()\">\r\n                Clear\r\n              </ion-button>\r\n            </ion-col>\r\n            <ion-col>\r\n              <ion-button expand=\"full\" ng-reflect-disabled=\"false\" ng-reflect-expand=\"full\" class=\"button button-full button-solid ion-activatable ion-focusable hydrated\" (click)=\"confirmItems()\">\r\n                OK\r\n              </ion-button>\r\n            </ion-col>\r\n          </ion-row>\r\n        </ion-toolbar>\r\n      </ng-template>-->\r\n      </ionic-selectable>\r\n    </div>\r\n    <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && showTooltipsInfoBySide\"\r\n                 [text]=\"setTooltipsDisplayText()\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n\r\n\r\n\r\n<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && !isMobileScreen()\" [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"setTooltipsDisplayText()\">\r\n      <fa-icon [icon]=\"setTooltipsInfoIcon()\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <kendo-combobox *ngIf=\"!data.Multiple\"\r\n                      #comboboxComponent\r\n                      [data]=\"getItemsData()\"\r\n                      [valueField]=\"itemValueField\"\r\n                      [textField]=\"itemTextField\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [valuePrimitive]=\"true\"\r\n                      [placeholder]=\"data.PlaceHolder\"\r\n                      [allowCustom]=\"allowCustomValue\"\r\n                      [suggest]=\"true\"\r\n                      [filterable]=\"!!data.HasInfiniteScroll\"\r\n                      [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                      [loading]=\"isLoading\"\r\n                      (valueChange)=\"onValueChange($event)\"\r\n                      (filterChange)=\"handleFilter($event)\"\r\n                      [virtual]=\"virtual\"\r\n                      (open)=\"handleOpen()\"\r\n                      (close)=\"handleClose()\"\r\n                      (blur)=\"handleBlur()\"\r\n                      style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n        <ng-template kendoTextBoxSuffixTemplate>\r\n\r\n          <!-- For Validation feature -->\r\n          <app-uivalidationmessage [group]=\"group\"\r\n                                   [data]=\"data\"\r\n                                   [form]=\"form\"\r\n                                   class=\"validation-icon\"></app-uivalidationmessage>\r\n        </ng-template>\r\n      </kendo-combobox>\r\n      <kendo-multiselect *ngIf=\"data.Multiple\"\r\n                         [data]=\"getItemsData()\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [textField]=\"itemTextField\"\r\n                         [formControlName]=\"data.Value\"\r\n                         [valuePrimitive]=\"true\"\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [allowCustom]=\"allowCustomValue\"\r\n                         [filterable]=\"!!data.HasInfiniteScroll\"\r\n                         [checkboxes]=\"data.EnableCheckbox\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (valueChange)=\"onValueChange($event)\"\r\n                         (filterChange)=\"handleFilter($event)\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         style=\"margin-top: 7px; width: 100%;\">\r\n        <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n          {{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}\r\n          <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n        </ng-template>\r\n      </kendo-multiselect>\r\n    </div>\r\n\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip style=\"text-align: center; padding-top: 10px;\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n        <span *ngIf=\"!!item && item.Color\"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n          <fa-icon [icon]=\"item.Icon\"\r\n                   [ngStyle]=\"{'padding': '4px 6px', 'color': (item.Color ? item.Color : 'black')}\"></fa-icon>\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <app-uivalidationmessage [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"></app-uivalidationmessage>\r\n\r\n    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"setTooltipsDisplayText()\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n\r\n  </div>\r\n</ion-item>\r\n",
                     styles: ["fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:initial!important;font-size:20px;margin-top:10px;margin-bottom:14px;margin-right:unset;margin-inline-end:20px}.gridInlineEdit{--background:transparent}.item.sc-ion-label-md-h,.item .sc-ion-label-md-h{font-weight:var(--z-label-weight);color:var(--z-label-color);text-shadow:var(--z-label-shadow)}.divselectmultiple{justify-content:space-between;width:100%;color:#000}.tooltipsinfo-text{margin-left:5px}.tooltipsinfo-text,.tooltipsinfo-text-wide{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin-top:6px}.tooltipsinfo-text-wide{width:100%;padding-bottom:5px}.tooltipsinfo-right{display:grid;grid-template-columns:1.2fr .05fr 1fr;grid-gap:0}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
                 },] }
     ];
@@ -9308,7 +9343,9 @@
                             i.Tooltip = "";
                         }
                         else {
-                            i.Tooltip = i3.ZComponentHelper.getGroupEvalValue.call(_this, i.Tooltip);
+                            if (i.Tooltip.indexOf("group.") !== -1) {
+                                i.Tooltip = i3.ZComponentHelper.getGroupEvalValue.call(_this, i.Tooltip);
+                            }
                         }
                         // Default position top. right | bottom | top | left
                         if (i.Position === undefined) {
@@ -10877,7 +10914,7 @@
         ZuploadComponent.prototype.selectEventHandler = function (e) {
             var _this = this;
             var me = this;
-            if (this.data['FileSelectedEvent']) {
+            if (this.data['SelectFileOnly']) {
                 // append all file to component memory
                 e.files.forEach(function (file) { return __awaiter(_this, void 0, void 0, function () {
                     var reader;
@@ -10944,6 +10981,8 @@
                             } // file type check
                         }); // loop each file
                     } // imagecompression check
+                    // add to group scope 
+                    me.group['zupload_' + me.data.Value] = e.files;
                 }
             }
         };
@@ -11646,6 +11685,7 @@
     exports.ZuploadComponent = ZuploadComponent;
     exports.ZworkflowbuttonsComponent = ZworkflowbuttonsComponent;
     exports.refreshGrid = refreshGrid;
+    exports.toQueryRule = toQueryRule;
     exports.ɵa = ZComponentDebugService;
     exports.ɵb = ZGridCalendarBindingDirective;
     exports.ɵc = ZComponentService;