mmhglobal-dynamicform 1.1.30 → 1.1.34

package/README.md

@@ -3,6 +3,25 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog 
+`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/>
+
 `1.30`<br/>
 [zupload] - support Select/Remove/Change Event. <br/>
 [zupload] - added SelectFileOnly attribute handling, to allow select file without upload. <br/>

package/bundles/mmhglobal-dynamicform.umd.js

@@ -2127,15 +2127,18 @@
                 _this.getGrantType();
                 _this.setHiddenColumn(gridSetting);
                 _this.params.referId = _this.getFieldReferenceId() || _this.grp.referenceId || null;
-            }), operators.switchMap(function () {
-                //Get Session
-                return _this.getGridSessionFilter(_this.grp, _this);
-            }), operators.switchMap(function () {
-                //Before get grid data
-                return _this.beforeGridGetData(_this.grp, _this);
-            }), operators.switchMap(function () {
-                //Set grid data
-                return _this.setGridSessionFilter(_this.grp, _this);
+                //}),
+                //switchMap(() => {
+                //  //Get Session
+                //  return this.getGridSessionFilter(this.grp, this);
+                //}),
+                //switchMap(() => {
+                //   //Before get grid data
+                //  return this.beforeGridGetData(this.grp, this);
+                //}),
+                //switchMap(() => {
+                //  //Set grid data
+                //  return this.setGridSessionFilter(this.grp, this);
             }))
                 .subscribe(function () {
                 _this.getDataBinding();
@@ -2397,6 +2400,11 @@
                     return "isnull";
                 case "isnotnull":
                     return "isnotnull";
+                case "contains": {
+                    if (!this.field['FilterContainsUsingEqual']) {
+                        return "contains";
+                    }
+                }
                 default:
                     return "==";
                 // eq, neq, isnull, isnotnull, endswith, startswith
@@ -5537,7 +5545,9 @@
                         });
                     }
                 }
-                _this.createFormControls();
+                if (_this.gData) {
+                    _this.createFormControls();
+                }
             };
             /* Available Functions */
             this.setEnable = function (status) {
@@ -5628,6 +5638,9 @@
                     _this.setGridSessionKey(_this.group);
                 }
                 return rxjs.of(true);
+            }), operators.tap(function () {
+                _this.gridCallback(_this.group);
+                return rxjs.of(true);
             })).subscribe();
         };
         ZgridComponent.prototype.ngOnDestroy = function () {
@@ -5769,6 +5782,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 +6097,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 +8151,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 +8178,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 +8609,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 +9092,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 +9356,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 +10927,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 +10994,8 @@
                             } // file type check
                         }); // loop each file
                     } // imagecompression check
+                    // add to group scope 
+                    me.group['zupload_' + me.data.Value] = e.files;
                 }
             }
         };
@@ -11458,6 +11510,7 @@
                         kendoAngularTreeview.TreeViewModule,
                         kendoAngularTooltip.TooltipModule,
                         kendoAngularUpload.UploadModule,
+                        kendoAngularUpload.UploadsModule,
                         i3.ZCoreModule,
                         i4.MmhglobalZmodalModule
                     ],
@@ -11645,6 +11698,7 @@
     exports.ZuploadComponent = ZuploadComponent;
     exports.ZworkflowbuttonsComponent = ZworkflowbuttonsComponent;
     exports.refreshGrid = refreshGrid;
+    exports.toQueryRule = toQueryRule;
     exports.ɵa = ZComponentDebugService;
     exports.ɵb = ZGridCalendarBindingDirective;
     exports.ɵc = ZComponentService;