mmhglobal-dynamicform 1.1.36 → 1.1.39

package/bundles/mmhglobal-dynamicform.umd.js

@@ -395,11 +395,11 @@
                 onChangeWatchName: this.onChangeWatchName.bind(this),
                 getWatchName: this.getWatchName.bind(this),
                 fieldElementonEditorCodeChange: this.fieldElementonEditorCodeChange.bind(this),
-                gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', "FormField", null, null),
+                gridActivityLogColumnFields: this.fieldService.getFormFieldCode('debugActivityLog', "FormField", this.group, "debugActivityLogField"),
                 gridActivityLogOnItemClick: this.gridActivityLogOnItemClick.bind(this),
                 updateModel: this.updateModel.bind(this),
                 refreshWorkflowButtonData: this.loadWorkflowData.bind(this),
-                gridWorkflowButtonColumnFields: this.fieldService.getFormFieldCode('debugWorkflowButton', 'FormField', null, null),
+                gridWorkflowButtonColumnFields: this.fieldService.getFormFieldCode('debugWorkflowButton', 'FormField', this.group, "debugWorkflowButtonField"),
                 gridWorkflowButtonOnItemClick: this.gridWorkflowButtonOnItemClick.bind(this)
             });
             if (!d.zData) {
@@ -1488,10 +1488,22 @@
                 group.beforeBackNavigationPage(group).subscribe(function () {
                     group['isTriggered'] = false;
                     _this.router.navigate([group.backNavigationPage]);
+                    //if (group['reload']) {
+                    //  group['isTriggered'] = false;
+                    //  this.router.routeReuseStrategy.shouldReuseRoute = function () {
+                    //    return false;
+                    //  }
+                    //  this.router.onSameUrlNavigation = 'reload';
+                    //}
+                    //this.router.navigate([group.backNavigationPage],);
                 });
             }
             else {
                 group['isTriggered'] = false;
+                //this.router.routeReuseStrategy.shouldReuseRoute = function () {
+                //  return false;
+                //}
+                //this.router.onSameUrlNavigation = 'reload';
                 this.router.navigate([group.backNavigationPage]);
             }
         };
@@ -1538,10 +1550,14 @@
         };
         MainService.prototype.newModel = function (event, group) {
             var _this = this;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                _group = group['_' + event.data.SubType];
+            }
             rxjs.of([])
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before new, zModel:", zmodel);
-                return _this.beforeNewModel(group);
+                return _this.beforeNewModel(_group);
             }), operators.tap(function () {
                 var referenceId = group.parentReferenceId || "0";
                 console.log("current url: ", _this.router.url);
@@ -1587,7 +1603,13 @@
         };
         MainService.prototype.createModel = function (event, group) {
             var _this = this;
+            var createModelres = null;
             var fg = group.form;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
             if (!fg.dirty) {
                 console.warn("Form is not dirty hence record is not save.");
                 return;
@@ -1597,15 +1619,14 @@
                 console.warn("Form Validation got error(s):", errors);
                 return;
             }
-            var createModelres = null;
-            rxjs.of(group.zModel)
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before create, zModel:", zmodel);
-                return _this.beforeCreateModel(group);
+                return _this.beforeCreateModel(_group);
             }), operators.tap(function () {
-                Object.assign(group.zModel, fg.value);
+                Object.assign(_group.zModel, fg.value);
             }), operators.switchMap(function () {
-                var newModel = Object.assign({}, group.zModel);
+                var newModel = Object.assign({}, _group.zModel);
                 i3.ZComponentHelper.removeNullFields(newModel);
                 // Object.keys(newModel).forEach((key) => {
                 //   if (newModel[key] === null) {
@@ -1616,7 +1637,7 @@
                 //   newModel.Id = 0;
                 // }
                 return _this.webApiService
-                    .httpPost$(group.resourceURL, // + "/" + group.zModel.Id,
+                    .httpPost$(_group.resourceURL, // + "/" + group.zModel.Id,
                 newModel)
                     .pipe(operators.tap(function (resp) {
                     createModelres = resp;
@@ -1627,25 +1648,25 @@
                 if (zmodel) {
                     //support old and new webapi method
                     if (zmodel.Data) {
-                        Object.assign(group.zModel, zmodel.Data);
+                        Object.assign(_group.zModel, zmodel.Data);
                         fg.patchValue(zmodel.Data);
                     }
                     else if (zmodel["Id"]) {
-                        Object.assign(group.zModel, zmodel);
+                        Object.assign(_group.zModel, zmodel);
                         fg.patchValue(zmodel);
                     }
-                    group.referenceId = group.zModel.Id;
+                    _group.referenceId = _group.zModel.Id;
                     fg.markAsPristine();
                 }
-                return _this.afterCreateModel(group);
+                return _this.afterCreateModel(_group);
             }), operators.tap(function (resp) {
                 if (createModelres.ProcessingStatus == null || createModelres.ProcessingStatus == true) {
-                    if (resp && group.zModel.Id !== 0) {
-                        group.isNew = false;
-                        group.isEdit = true;
-                        group.isTriggered = false;
-                        group.cancelButtonName = "Close";
-                        Object.assign(group.zModel, resp);
+                    if (resp && _group.zModel.Id !== 0) {
+                        _group.isNew = false;
+                        _group.isEdit = true;
+                        _group.isTriggered = false;
+                        _group.cancelButtonName = "Close";
+                        Object.assign(_group.zModel, resp);
                         fg.patchValue(resp);
                     }
                     fg.markAsPristine();
@@ -1661,6 +1682,11 @@
         MainService.prototype.updateModel = function (event, group) {
             var _this = this;
             var fg = group.form;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
             if (!fg.dirty) {
                 console.warn("Form is not dirty hence record is not save.");
                 return;
@@ -1670,31 +1696,32 @@
                 console.warn("Form Validation got error(s):", errors);
                 return;
             }
-            rxjs.of(group.zModel)
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before update, zModel:", zmodel);
-                return _this.beforeUpdateModel(group);
+                return _this.beforeUpdateModel(_group);
             }), operators.tap(function () {
-                Object.assign(group.zModel, fg.value);
+                Object.assign(_group.zModel, fg.value);
             }), operators.switchMap(function () {
                 return _this.webApiService
-                    .httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel)
+                    .httpPut$(_group.resourceURL + "/" + _group.zModel.Id, _group.zModel)
                     .pipe(operators.map(function (res) { return _this.handleSuccess(res, "Record is updated successfully."); }));
             }), operators.switchMap(function (zmodel) {
                 console.log("After updated, zModel:", zmodel);
                 if (zmodel && zmodel.Data) {
-                    Object.assign(group.zModel, zmodel.Data);
+                    Object.assign(_group.zModel, zmodel.Data);
                     fg.patchValue(zmodel.Data);
                     // console.log("Done updateModel updated zModel:", fg.value);
                 }
                 else if (zmodel && zmodel["Id"]) {
-                    Object.assign(group.zModel, zmodel);
+                    Object.assign(_group.zModel, zmodel);
                     fg.patchValue(zmodel);
                     // console.log("Done updateModel updated zModel:", fg.value);
                 }
                 group.isTriggered = false;
+                _group.isTriggered = false;
                 fg.markAsPristine();
-                return _this.afterUpdateModel(group);
+                return _this.afterUpdateModel(_group);
             }))
                 .subscribe();
             // Object.assign(group.zModel, fg.value);
@@ -1708,49 +1735,51 @@
             //   });
         };
         MainService.prototype.cloneNewModel = function (event, group) {
-            Object.assign(group.zModel, group.form.value);
-            group.zModel.Id = 0;
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                _group = group['_' + event.data.SubType];
+            }
+            Object.assign(_group.zModel, _group.form.value);
+            _group.zModel.Id = 0;
             var clearFields = ["WFS_DocumentId", "WFS_StatusCode", "WFS_StatusName"];
             clearFields.forEach(function (field) {
-                if (group.zModel.hasOwnProperty(field)) {
-                    group.zModel[field] = null;
+                if (_group.zModel.hasOwnProperty(field)) {
+                    _group.zModel[field] = null;
                 }
             });
             this.cacheService.setCache("cloneNewModel", group.zModel);
             this.newModel(null, group);
             group.isTriggered = false;
+            _group.isTriggered = false;
         };
         MainService.prototype.deleteModel = function (event, group) {
             var _this = this;
             var fg = group.form;
-            // if (!fg.dirty) {
-            //   console.warn('Form is not dirty hence record is not save.');
-            //   return;
-            // }
-            // if (!fg.valid) {
-            //   const errors = ZComponentHelper.getFormGroupErrors(fg);
-            //   console.warn("Form Validation got error(s):", errors);
-            //   return;
-            // }
-            rxjs.of(group.zModel)
+            var _group = group;
+            if (event.data && event.data.SubType) {
+                fg = group['_' + event.data.SubType].form;
+                _group = group['_' + event.data.SubType];
+            }
+            rxjs.of(_group.zModel)
                 .pipe(operators.switchMap(function (zmodel) {
                 console.log("Before delete, zModel:", zmodel);
-                return _this.beforeDeleteModel(group);
+                return _this.beforeDeleteModel(_group);
             }), operators.switchMap(function () {
                 group.isTriggered = false;
+                _group.isTriggered = false;
                 return _this.alertService.show("Delete Record", "Are you sure?", [
                     { text: "No", cssClass: "secondary" },
                     { text: "Yes", cssClass: "primary" }
                 ]);
             }), operators.switchMap(function (reply) {
                 if (reply === "Yes") {
-                    Object.assign(group.zModel, fg.value);
-                    group.zModel.Disabled = true;
+                    Object.assign(_group.zModel, fg.value);
+                    _group.zModel.Disabled = true;
                     return _this.webApiService
-                        .httpPut$(group.resourceURL + "/" + group.zModel.Id, group.zModel)
+                        .httpPut$(_group.resourceURL + "/" + _group.zModel.Id, _group.zModel)
                         .pipe(operators.map(function (res) { return _this.handleSuccess(res, "Record is deleted successfully."); }), operators.switchMap(function (zmodel) {
                         console.log("After deleted, zModel:", zmodel);
-                        return _this.afterDeleteModel(group);
+                        return _this.afterDeleteModel(_group);
                     }), operators.tap(function (resp) {
                         _this.historyBack();
                     }));
@@ -4022,6 +4051,9 @@
                 field$.subscribe(function (data) {
                     // this.items = data;
                     data.forEach(function (button) {
+                        if (_this.data.SubType) {
+                            button.Name = _this.data.SubType + '_' + button.Name;
+                        }
                         var label = _this.getButtonLabel(button);
                         var buttonDisabled = null;
                         if (button.Disabled != "" && button.Disabled) {
@@ -4037,6 +4069,7 @@
                             iconName: button.Icon,
                             dismissType: button.DismissType,
                             disableTriggerTimer: button.DisableTriggerTimer,
+                            SubType: _this.data.SubType,
                             click: function (y) {
                                 _this.buttonClick(button);
                             }
@@ -4404,6 +4437,7 @@
             this.showTooltipsInfoIcon = false;
             this.showTooltipsInfoBySide = false;
             this.tooltipsInfo = null;
+            this.tooltipsDisplayText = null;
             this.useKendoSwitch = false;
             this.setEnable = function (status) {
                 var fc = _this.group.form.controls[_this.data.Value];
@@ -4426,10 +4460,12 @@
             if (this.tooltipsInfo) {
                 if ((this.tooltipsInfo['Icon'] != null || this.tooltipsInfo['Icon'] != undefined) && !this.isMobileScreen()) {
                     this.showTooltipsInfoIcon = true;
+                    this.setTooltipsInfoIcon();
                 }
                 if (this.tooltipsInfo['SideBySide']) {
                     this.showTooltipsInfoBySide = true;
                 }
+                this.setTooltipsDisplayText();
             }
             this.useKendoSwitch = this.data.UseKendoSwitch ? this.data.UseKendoSwitch : false;
         };
@@ -4492,22 +4528,33 @@
             }
             return "#acacac"; // default grey
         };
-        ZcheckboxComponent.prototype.setTooltipsInfoIcon = function () {
+        ZcheckboxComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
             if (this.showTooltipsInfoIcon) {
-                if (this.tooltipsInfo['Icon'] != '') {
-                    return this.tooltipsInfo['Icon'];
+                if (this.tooltipsInfo.Icon != '') {
+                    if (displayIcon) {
+                        this.tooltipsDisplayIcon = displayIcon;
+                    }
+                    else {
+                        this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
+                    }
                 }
                 else {
-                    return 'question-circle';
+                    this.tooltipsDisplayIcon = 'question-circle';
                 }
-                return false;
             }
         };
-        ZcheckboxComponent.prototype.setTooltipsDisplayText = function () {
+        ZcheckboxComponent.prototype.setTooltipsDisplayText = function (displayText) {
             if (this.tooltipsInfo) {
-                return this.tooltipsInfo['DisplayText'];
+                if (displayText) {
+                    this.tooltipsDisplayText = displayText;
+                }
+                else {
+                    this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
+                }
+            }
+            else {
+                this.tooltipsDisplayText = '<Display text error>';
             }
-            return '<Display text error>';
         };
         ZcheckboxComponent.prototype.setTooltipsInfoSideBySide = function () {
             if (this.tooltipsInfo) {
@@ -4525,7 +4572,7 @@
     ZcheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zcheckbox",
-                    template: "<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [attr.for]=\"data.Value\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n             [ngStyle]=\"getLabelStyle()\"\r\n             [ngClass]=\"data.LabelDivClass\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">\r\n      *\r\n    </ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"!isMobileScreen() && 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  <div class=\"ion-row divcheckbox\" [ngClass]=\"getCheckboxClass()\">\r\n    <div *ngIf=\"useKendoSwitch\">\r\n      <span>\r\n        <kendo-switch [id]=\"data.Value\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      (valueChange)=\"onSwitchChange($event)\"\r\n                      style=\"margin: 7px 0 0 0; width: 100%\"></kendo-switch>\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"!useKendoSwitch\" [class]=\"setTooltipsInfoSideBySide()\">\r\n      <!--<input kendoCheckBox\r\n             type=\"checkbox\"\r\n             [id]=\"data.Value\"\r\n             [formControlName]=\"data.Value\"\r\n             [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             (valueChange)=\"onChange($event)\" />-->\r\n      <ion-checkbox style=\"margin: 8px 0;\"\r\n                    [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    color=\"primary\"\r\n                    [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    (ionChange)=\"onChange($event)\"></ion-checkbox>\r\n      <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon\"\r\n                   [text]=\"setTooltipsDisplayText()\"\r\n                   class=\"tooltipsinfo-text\"\r\n                   [style.color]=\"setTooltipsInfoColor()\">\r\n      </kendo-label>\r\n      <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n",
+                    template: "<ion-item [ngClass]=\"getClass(form, data)\" [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <ion-label *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [attr.for]=\"data.Value\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\"\r\n             [ngStyle]=\"getLabelStyle()\"\r\n             [ngClass]=\"data.LabelDivClass\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\"\r\n              color=\"danger\">\r\n      *\r\n    </ion-text>\r\n    <span kendoTooltip\r\n          *ngIf=\"!isMobileScreen() && tooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <div class=\"ion-row divcheckbox\" [ngClass]=\"getCheckboxClass()\">\r\n    <div *ngIf=\"useKendoSwitch\">\r\n      <span>\r\n        <kendo-switch [id]=\"data.Value\"\r\n                      [formControlName]=\"data.Value\"\r\n                      [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                      (valueChange)=\"onSwitchChange($event)\"\r\n                      style=\"margin: 7px 0 0 0; width: 100%\"></kendo-switch>\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"!useKendoSwitch\" [class]=\"setTooltipsInfoSideBySide()\">\r\n      <!--<input kendoCheckBox\r\n             type=\"checkbox\"\r\n             [id]=\"data.Value\"\r\n             [formControlName]=\"data.Value\"\r\n             [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n             (valueChange)=\"onChange($event)\" />-->\r\n      <ion-checkbox style=\"margin: 8px 0;\"\r\n                    [id]=\"data.Value\"\r\n                    [formControlName]=\"data.Value\"\r\n                    color=\"primary\"\r\n                    [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    (ionChange)=\"onChange($event)\"></ion-checkbox>\r\n      <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon\"\r\n                   [text]=\"tooltipsDisplayText\"\r\n                   class=\"tooltipsinfo-text\"\r\n                   [style.color]=\"setTooltipsInfoColor()\">\r\n      </kendo-label>\r\n      <app-uivalidationmessage [group]=\"group\" [data]=\"data\" [form]=\"form\"></app-uivalidationmessage>\r\n    </div>\r\n  </div>\r\n</ion-item>\r\n",
                     styles: [".ionItem{display:flex;flex-flow:row wrap}.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)}:host ::ng-deep ion-item .k-checkbox{margin:6px 0 0 1.5px;height:22px;width:22px}:host ::ng-deep ion-item .k-checkbox.k-checked,:host ::ng-deep ion-item .k-checkbox:checked{margin:6px 0 0 1.5px;height:22px;width:22px;background-color:#3880ff;border:0;outline:0}:host ::ng-deep ion-item .divcheckbox{justify-content:space-between;order:1}:host ::ng-deep ion-item .notooltipsinfo-adjustment{display:grid;grid-template-columns:.1fr;grid-gap:0;padding-top:1px}:host ::ng-deep ion-item .tooltipsinfo-text{text-align:justify;text-justify:inter-word;word-wrap:break-word;font-size:10px;margin:6px 0;float:right}:host ::ng-deep ion-item .tooltipsinfo-right{display:grid;grid-template-columns:.1fr .9fr;grid-gap:5px}:host ::ng-deep ion-item .tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
                 },] }
     ];
@@ -5320,12 +5367,16 @@
             }
             return readOnlyValue;
         };
+        ZformComponent.prototype.trackByFn = function (index, item) {
+            //return item['Type'] + '-' + item['Name'];
+            return index;
+        };
         return ZformComponent;
     }());
     ZformComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zform",
-                    template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :\r\n                          ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>",
+                    template: "<div class=\"e1-form\">\r\n  <!--<div class=\"k-overlay\" *ngIf=\"isLoading\"></div>-->\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" *ngIf=\"!isLoading\">\r\n    <ion-grid>\r\n      <ion-row id=\"dynamic-form-host\" class=\"ion-align-items-start\">\r\n        <app-zformcontrol *ngFor=\"let field of fields; trackBy: trackByFn\"\r\n                          [ngClass]=\"group[field['isVisibleField']] ? field.DivClass :\r\n                          ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                          [field]=\"field\"\r\n                          [group]=\"getGroup()\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\"></app-zformcontrol>\r\n      </ion-row>\r\n    </ion-grid>\r\n  </form>\r\n</div>\r\n",
                     styles: ["#dynamic-form-host app-zformcontrol{overflow-x:auto;overflow-y:hidden}"]
                 },] }
     ];
@@ -8580,6 +8631,7 @@
             this.showTooltipsInfoIcon = false;
             this.showTooltipsInfoBySide = false;
             this.tooltipsInfo = null;
+            this.tooltipsDisplayText = null;
             this.items = [];
             this.infinitezData = [];
             this.infiniteSearchText = null;
@@ -8636,10 +8688,12 @@
             if (this.tooltipsInfo) {
                 if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
                     this.showTooltipsInfoIcon = true;
+                    this.setTooltipsInfoIcon();
                 }
                 if (this.tooltipsInfo.SideBySide) {
                     this.showTooltipsInfoBySide = true;
                 }
+                this.setTooltipsDisplayText();
             }
             // [Dropdownlist Multiple] - auto close menu when lose focus.
             if (this.data.AutoClose === false)
@@ -9052,22 +9106,33 @@
             }
             return "#acacac"; // default grey
         };
-        ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function () {
+        ZselectmultipleComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
             if (this.showTooltipsInfoIcon) {
                 if (this.tooltipsInfo.Icon != '') {
-                    return this.tooltipsInfo.Icon;
+                    if (displayIcon) {
+                        this.tooltipsDisplayIcon = displayIcon;
+                    }
+                    else {
+                        this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
+                    }
                 }
                 else {
-                    return 'question-circle';
+                    this.tooltipsDisplayIcon = 'question-circle';
                 }
             }
-            return false;
         };
-        ZselectmultipleComponent.prototype.setTooltipsDisplayText = function () {
+        ZselectmultipleComponent.prototype.setTooltipsDisplayText = function (displayText) {
             if (this.tooltipsInfo) {
-                return this.tooltipsInfo.DisplayText;
+                if (displayText) {
+                    this.tooltipsDisplayText = displayText;
+                }
+                else {
+                    this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
+                }
+            }
+            else {
+                this.tooltipsDisplayText = '<Display text error>';
             }
-            return '<Display text error>';
         };
         ZselectmultipleComponent.prototype.setTooltipsInfoSideBySide = function () {
             if (this.tooltipsInfo) {
@@ -9082,7 +9147,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                      [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",
+                    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]=\"tooltipsDisplayText\"\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]=\"tooltipsDisplayText\"\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]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\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]=\"tooltipsDisplayText\"\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}"]
                 },] }
     ];
@@ -9300,6 +9365,7 @@
             this.showTooltipsInfoIcon = false;
             this.showTooltipsInfoBySide = false;
             this.tooltipsInfo = null;
+            this.tooltipsDisplayText = null;
             this.clearButtonIcon = "time-circle";
             this.setEnable = function (status) {
                 var fc = _this.group.form.controls[_this.data.Value];
@@ -9332,10 +9398,12 @@
             if (this.tooltipsInfo) {
                 if ((this.tooltipsInfo.Icon != null || this.tooltipsInfo.Icon != undefined) && !this.isMobileScreen()) {
                     this.showTooltipsInfoIcon = true;
+                    this.setTooltipsInfoIcon();
                 }
                 if (this.tooltipsInfo.SideBySide) {
                     this.showTooltipsInfoBySide = true;
                 }
+                this.setTooltipsDisplayText();
             }
             // Handle Clickable Icons
             this.iconList = this.data.ClickableIcons;
@@ -9455,8 +9523,8 @@
             });
         };
         ZtextComponent.prototype.onChange = function (event) {
-            // console.log('ztext.component - onChange: ', event.target.value);
-            i3.ZComponentHelper.setModelValue(this.data.Value, event.target.value, this.group);
+            // console.log('ztext.component - onChange: ', event.target.value); 
+            i3.ZComponentHelper.setComponentModelValue(this.data, event.target.value, this.group);
             this.group.subject.next({
                 type: "onChange",
                 target: this.data.OnChange,
@@ -9518,22 +9586,33 @@
             }
             return "#acacac"; // default grey
         };
-        ZtextComponent.prototype.setTooltipsInfoIcon = function () {
+        ZtextComponent.prototype.setTooltipsInfoIcon = function (displayIcon) {
             if (this.showTooltipsInfoIcon) {
                 if (this.tooltipsInfo.Icon != '') {
-                    return this.tooltipsInfo.Icon;
+                    if (displayIcon) {
+                        this.tooltipsDisplayIcon = displayIcon;
+                    }
+                    else {
+                        this.tooltipsDisplayIcon = this.tooltipsInfo.Icon;
+                    }
                 }
                 else {
-                    return 'question-circle';
+                    this.tooltipsDisplayIcon = 'question-circle';
                 }
             }
-            return false;
         };
-        ZtextComponent.prototype.setTooltipsDisplayText = function () {
+        ZtextComponent.prototype.setTooltipsDisplayText = function (displayText) {
             if (this.tooltipsInfo) {
-                return this.tooltipsInfo.DisplayText;
+                if (displayText) {
+                    this.tooltipsDisplayText = displayText;
+                }
+                else {
+                    this.tooltipsDisplayText = this.tooltipsInfo.DisplayText;
+                }
+            }
+            else {
+                this.tooltipsDisplayText = '<Display text error>';
             }
-            return '<Display text error>';
         };
         ZtextComponent.prototype.setTooltipsInfoSideBySide = function () {
             if (this.tooltipsInfo) {
@@ -9548,7 +9627,7 @@
     ZtextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-ztext",
-                    template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <!-- add icon for tooltips -->\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  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide && isMobileScreen()\"\r\n               [text]=\"setTooltipsDisplayText()\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <!-- <ion-input [name]=\"data.Name\" [required]=\"data.IsRequired\" [placeholder]=\"data.PlaceHolder\" [type]=\"mapInputType(data.Type)\"\r\n    [(ngModel)]=\"group.zModel[data.Value]\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n    [readonly]=\"data.ReadOnly\" [inputmode]=\"mapInputMode(data.Type)\"></ion-input> -->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <ion-input *ngIf=\"isMobileScreen()\"\r\n                 [id]=\"data.Value\"\r\n                 [formControlName]=\"data.Value\"\r\n                 [type]=\"mapInputType(data.Type)\"\r\n                 [placeholder]=\"data.PlaceHolder\"\r\n                 clearOnEdit\r\n                 [minlength]=\"data.MinLength\"\r\n                 [maxlength]=\"data.MaxLength\"\r\n                 [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                 [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n                 [inputmode]=\"mapInputMode(data.Type)\"\r\n                 (click)='textboxOnClick()'\r\n                 (ionChange)=\"onChange($event)\">\r\n      </ion-input>\r\n      <kendo-textbox *ngIf=\"!isMobileScreen()\"\r\n                     [id]=\"data.Value\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [type]=\"mapInputType(data.Type)\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [clearButton]=\"showClearButton\"\r\n                     [minlength]=\"data.MinLength\"\r\n                     [maxlength]=\"data.MaxLength\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n                     (input)=\"onChange($event)\"\r\n                     (click)=\"textboxOnClick()\"\r\n                     [class]=\"setTextboxClass()\">\r\n\r\n        <ng-template kendoTextBoxSuffixTemplate\r\n                     *ngIf=\"adornmentList\">\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          <button kendoButton\r\n                  *ngIf=\"data.OnClick\"\r\n                  look=\"clear\"\r\n                  icon=\"close-circle\"\r\n                  class=\"textbox-clearbutton\"\r\n                  (click)=\"readOnlyOnClear()\"></button>\r\n          <!-- For Adornments feature -->\r\n          <div *ngFor=\"let adornment of adornmentList\">\r\n            <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\"\r\n                                     class=\"textbox-separator\"></kendo-textbox-separator>\r\n            <button kendoButton\r\n                    [look]=\"adornmentLook(adornment)\"\r\n                    [icon]=\"adornment.Icon\"\r\n                    (click)=\"onAdornmentClick(adornment)\"\r\n                    [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-textbox>\r\n    </div>\r\n    <!-- For Validation feature pending change to inner textbox  -->\r\n    <app-uivalidationmessage *ngIf=\"!isMobileScreen()\"\r\n                             [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\" ></app-uivalidationmessage>\r\n\r\n    <!-- For Mobile Validation feature -->\r\n    <app-uivalidationmessage *ngIf=\"isMobileScreen()\"\r\n                             [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"\r\n                             class=\"validation-icon-mobile\"></app-uivalidationmessage>\r\n\r\n    <!-- mobile section for Adornments feature -->\r\n    <div *ngFor=\"let adornment of adornmentList\">\r\n      <button kendoButton\r\n              *ngIf=\"isMobileScreen()\"\r\n              [look]=\"adornmentLook(adornment)\"\r\n              [icon]=\"adornment.Icon\"\r\n              (click)=\"onAdornmentClick(adornment)\"\r\n              [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"\r\n              class=\"adornments-icon-mobile\"></button>\r\n    </div>\r\n\r\n    <!-- Icon button feature -->\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip\r\n           class=\"icon-button\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n\r\n        <span *ngIf=\"!!item \"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n\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    <!-- 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  </div>\r\n</ion-item>\r\n",
+                    template: "<ion-item [formGroup]=\"form\"\r\n          *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n          [ngClass]=\"getIon_InvalidClass(form, data)\">\r\n  <ion-label [attr.for]=\"data.Value\"\r\n             *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\"\r\n             [position]=\"data.LabelPosition ? data.LabelPosition : 'stacked'\">\r\n    {{data.Label}}\r\n    <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n    <!-- add icon for tooltips -->\r\n    <span kendoTooltip\r\n          *ngIf=\"data.TooltipsInfo && showTooltipsInfoIcon\"\r\n          [title]=\"tooltipsDisplayText\">\r\n      <fa-icon [icon]=\"tooltipsDisplayIcon\"\r\n               class=\"tooltipsinfo-icon\">\r\n      </fa-icon>\r\n    </span>\r\n  </ion-label>\r\n  <!-- mobile tooltipsinfo below label-->\r\n  <kendo-label *ngIf=\"data.TooltipsInfo && !showTooltipsInfoIcon && !showTooltipsInfoBySide && isMobileScreen()\"\r\n               [text]=\"tooltipsDisplayText\"\r\n               [class]=\"setTooltipsInfoClass()\"\r\n               [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  <!-- <ion-input [name]=\"data.Name\" [required]=\"data.IsRequired\" [placeholder]=\"data.PlaceHolder\" [type]=\"mapInputType(data.Type)\"\r\n    [(ngModel)]=\"group.zModel[data.Value]\" [minlength]=\"data.MinLength\" [maxlength]=\"data.MaxLength\"\r\n    [readonly]=\"data.ReadOnly\" [inputmode]=\"mapInputMode(data.Type)\"></ion-input> -->\r\n  <div [class]=\"setTooltipsInfoSideBySide()\">\r\n    <div style=\"flex: 1;\">\r\n      <ion-input *ngIf=\"isMobileScreen()\"\r\n                 [id]=\"data.Value\"\r\n                 [formControlName]=\"data.Value\"\r\n                 [type]=\"mapInputType(data.Type)\"\r\n                 [placeholder]=\"data.PlaceHolder\"\r\n                 clearOnEdit\r\n                 [minlength]=\"data.MinLength\"\r\n                 [maxlength]=\"data.MaxLength\"\r\n                 [attr.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                 [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n                 [inputmode]=\"mapInputMode(data.Type)\"\r\n                 (click)='textboxOnClick()'\r\n                 (ionChange)=\"onChange($event)\">\r\n      </ion-input>\r\n      <kendo-textbox *ngIf=\"!isMobileScreen()\"\r\n                     [id]=\"data.Value\"\r\n                     [formControlName]=\"data.Value\"\r\n                     [type]=\"mapInputType(data.Type)\"\r\n                     [placeholder]=\"data.PlaceHolder\"\r\n                     [clearButton]=\"showClearButton\"\r\n                     [minlength]=\"data.MinLength\"\r\n                     [maxlength]=\"data.MaxLength\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     [ngStyle]=\"{'text-align': getStyle(data.RightAlign ? true : false)}\"\r\n                     (input)=\"onChange($event)\"\r\n                     (click)=\"textboxOnClick()\"\r\n                     [class]=\"setTextboxClass()\">\r\n\r\n        <ng-template kendoTextBoxSuffixTemplate\r\n                     *ngIf=\"adornmentList\">\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          <button kendoButton\r\n                  *ngIf=\"data.OnClick\"\r\n                  look=\"clear\"\r\n                  icon=\"close-circle\"\r\n                  class=\"textbox-clearbutton\"\r\n                  (click)=\"readOnlyOnClear()\"></button>\r\n          <!-- For Adornments feature -->\r\n          <div *ngFor=\"let adornment of adornmentList\">\r\n            <kendo-textbox-separator *ngIf=\"!adornment.HideSeperator\"\r\n                                     class=\"textbox-separator\"></kendo-textbox-separator>\r\n            <button kendoButton\r\n                    [look]=\"adornmentLook(adornment)\"\r\n                    [icon]=\"adornment.Icon\"\r\n                    (click)=\"onAdornmentClick(adornment)\"\r\n                    [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"></button>\r\n          </div>\r\n        </ng-template>\r\n      </kendo-textbox>\r\n    </div>\r\n    <!-- For Validation feature pending change to inner textbox  -->\r\n    <app-uivalidationmessage *ngIf=\"!isMobileScreen()\"\r\n                             [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\" ></app-uivalidationmessage>\r\n\r\n    <!-- For Mobile Validation feature -->\r\n    <app-uivalidationmessage *ngIf=\"isMobileScreen()\"\r\n                             [group]=\"group\"\r\n                             [data]=\"data\"\r\n                             [form]=\"form\"\r\n                             class=\"validation-icon-mobile\"></app-uivalidationmessage>\r\n\r\n    <!-- mobile section for Adornments feature -->\r\n    <div *ngFor=\"let adornment of adornmentList\">\r\n      <button kendoButton\r\n              *ngIf=\"isMobileScreen()\"\r\n              [look]=\"adornmentLook(adornment)\"\r\n              [icon]=\"adornment.Icon\"\r\n              (click)=\"onAdornmentClick(adornment)\"\r\n              [style.background-color]=\"getAdornmentBackgroundColor(adornment)\"\r\n              class=\"adornments-icon-mobile\"></button>\r\n    </div>\r\n\r\n    <!-- Icon button feature -->\r\n    <div *ngFor=\"let item of iconList\">\r\n      <div kendoTooltip\r\n           class=\"icon-button\"\r\n           showOn=\"hover\"\r\n           [tooltipWidth]=\"item.Width\"\r\n           [position]=\"item.Position\">\r\n\r\n        <span *ngIf=\"!!item \"\r\n              (click)=\"onIconClick(item.Click)\"\r\n              [title]=\"item.Tooltip\"\r\n              style=\"margin-top: 10px;\">\r\n\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    <!-- side by side and desktop tooltipsinfo -->\r\n    <kendo-label *ngIf=\"tooltipsInfo && !showTooltipsInfoIcon && ((showTooltipsInfoBySide && isMobileScreen()) || !isMobileScreen())\"\r\n                 [text]=\"tooltipsDisplayText\"\r\n                 [class]=\"setTooltipsInfoClass()\"\r\n                 [style.color]=\"setTooltipsInfoColor()\"></kendo-label>\r\n  </div>\r\n</ion-item>\r\n",
                     styles: [".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)}.divtextbox{justify-content:space-between;width:100%}.k-textbox{color:var(--z-text-color)}.notmobile-textbox{margin:7px 0 0;width:100%}.notmobile-textbox-onfocus{margin:7px 0 0;width:100%;color:var(--z-text-color)!important;background-color:#fff!important}.validation-icon{margin-top:0;margin-right:5px}.validation-icon-mobile{margin-top:5px;margin-right:5px}.textbox-separator{margin-top:0}.textbox-clearbutton{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;outline:0;cursor:pointer;opacity:.5}.textbox-clearbutton:hover{opacity:1!important}.icon-button{text-align:center;padding-top:10px}.adornments-icon-mobile{margin-bottom:0;margin-left:5px;width:28px;height:28px}.tooltipsinfo-text{margin-left:5px;width:50%}.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:3fr 1fr 2fr;grid-gap:0}.tooltipsinfo-icon{padding-left:10px;color:#3880ff}"]
                 },] }
     ];
@@ -10639,6 +10718,169 @@
         form: [{ type: i0.Input }]
     };
 
+    /********** Angular **********/
+    var ZudfComponent = /** @class */ (function () {
+        function ZudfComponent(alertService, authService, fieldService, resourceApiService, toastService, webApiService) {
+            var _this = this;
+            this.alertService = alertService;
+            this.authService = authService;
+            this.fieldService = fieldService;
+            this.resourceApiService = resourceApiService;
+            this.toastService = toastService;
+            this.webApiService = webApiService;
+            this.componentProperties = new i3.ZComponentProperties();
+            this.setEnable = function (status) {
+                _this.componentProperties.isReadOnly = !status;
+            };
+            this.setVisible = function (status) {
+                _this.componentProperties.isVisible = status;
+                _this.data.Visible = status;
+            };
+            this.setRequire = function (status) {
+                _this.componentProperties.isRequired = status;
+                i3.ZComponentHelper.changeValidator(status, _this.group, _this.data.Value, _this.componentProperties, forms.Validators.required);
+            };
+        }
+        ZudfComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            i3.ZComponentHelper.setComponentProperties(this);
+            i3.ZComponentHelper.registerComponent(this);
+            rxjs.of(true).pipe(operators.concatMap(function (fieldElements) {
+                var asyncSubject = new rxjs.AsyncSubject();
+                _this.fieldService.getFormFieldCode(_this.data.Value, 'FormField', _this, 'fields').pipe(operators.map(function (formFieldResult) {
+                    // rename add prefix to all udf field to prevent duplicate from main form
+                    _this.appendPrefix(formFieldResult, 'zudf');
+                    // change the value to the result field form 
+                    _this.data.Value = formFieldResult;
+                    // change zudf to zdiv
+                    _this.data.Type = 'zdiv';
+                    // end subject
+                    asyncSubject.next(true);
+                    asyncSubject.complete();
+                })).subscribe();
+                return asyncSubject.asObservable();
+            }), operators.tap(function () {
+                if (!_this.group._zudf) {
+                    _this.group._zudf = new i3.ZGroup;
+                }
+                _this.group._zudf.zModel = {};
+                // create as new Form Group
+                _this.form = _this.toFormGroup(_this.data.Value);
+                // set to zGroup scope
+                _this.group._zudf.form = _this.form;
+            }), operators.tap(function () {
+                // set to formField for display
+                _this.formField = _this.data.Value;
+            })).subscribe(function () {
+                // set Field div class
+                i3.ZComponentHelper.setFieldsDivClass(_this.group._projectName, _this.group.fieldName, _this.data, _this.authService);
+                // get saved record
+                _this.getFormFieldzModel();
+            });
+        };
+        ZudfComponent.prototype.getFormFieldzModel = function () {
+            var form = this.group._zudf.form;
+            var zModel = this.group._zudf.zModel;
+            var url = this.resourceApiService.getURL('field');
+            var respData = { 'parentFormId': 5722, 'zudf_Name': 'test' };
+            Object.assign(zModel, respData);
+            form.patchValue(zModel);
+            form.markAsPristine();
+            //return this.webApiService.httpGet$(url, { name: this.group.fieldName, type: 'FormField' }).pipe(
+            //  tap((respData: any) => {
+            //    debugger;
+            //    Object.assign(zModel, respData);
+            //    form.patchValue(zModel);
+            //    form.markAsPristine();
+            //  })
+            //);
+        };
+        ZudfComponent.prototype.toFormGroup = function (fieldElements) {
+            var formControls = {};
+            this.getFormControls(fieldElements, formControls);
+            var newFormGroup = new forms.FormGroup(formControls);
+            return newFormGroup;
+        };
+        ZudfComponent.prototype.getFormControls = function (fieldArray, formControls) {
+            var _this = this;
+            fieldArray.forEach(function (field) {
+                if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
+                    if (['zgrid', 'ztree', 'zimg', 'textareajson'].indexOf(field.Type) === -1) {
+                        console.warn("FormControl - invalid field value", field.Value);
+                    }
+                }
+                else {
+                    if (Array.isArray(field.Value)) {
+                        _this.getFormControls(field.Value, formControls);
+                    }
+                    else {
+                        var isFormControl = i3.ZComponentHelper.isFormControl(field);
+                        var isVisible = i3.ZComponentHelper.isVisibleFormControl(_this, field);
+                        var isRequired = i3.ZComponentHelper.isRequiredFormControl(_this, field);
+                        if (isFormControl === true) {
+                            var validators = i3.ZComponentHelper.getValidators(field, isVisible, isRequired);
+                            formControls[field.Value] = new forms.FormControl(_this.group._zudf.zModel[field.Value], validators);
+                            if (i3.ZComponentHelper.hasCCField(field.Type)) {
+                                var ccValidators = i3.ZComponentHelper.getCCValidators(field, isVisible, isRequired);
+                                formControls[field.CCValue] = new forms.FormControl(_this.group._zudf.zModel[field.CCValue], ccValidators);
+                            }
+                        }
+                    }
+                }
+            });
+        };
+        ZudfComponent.prototype.appendPrefix = function (fields, prefix) {
+            var _this = this;
+            fields.forEach(function (field) {
+                if (Array.isArray(field.Value)) {
+                    _this.appendPrefix(field.Value, prefix);
+                }
+                else {
+                    field.Name = prefix + '_' + field.Name;
+                    if (field.Type != 'zbuttons') {
+                        field.Value = prefix + '_' + field.Value;
+                    }
+                    field.SubType = prefix;
+                }
+            });
+        };
+        ZudfComponent.prototype.ComponentIsVisible = function (field) {
+            return i3.ZComponentHelper.ComponentIsVisible(field, this.group);
+        };
+        ZudfComponent.prototype.allowDrop = function (ev) {
+            ev.preventDefault();
+        };
+        ZudfComponent.prototype.drag = function (ev) {
+            ev.dataTransfer.setData("text", ev.target.id);
+        };
+        ZudfComponent.prototype.drop = function (ev) {
+            ev.preventDefault();
+            var data = ev.dataTransfer.getData("text");
+            ev.target.appendChild(document.getElementById(data));
+        };
+        return ZudfComponent;
+    }());
+    ZudfComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-zudf',
+                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n                    *ngFor=\"let field of formField | divzlayout: data.zlayout\"\r\n                    [field]=\"field\"\r\n                    [group]=\"group\"\r\n                    [form]=\"form\"\r\n                    id=\"zudf-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n\r\n  <h2>Drag and Drop</h2>\r\n  <div id=\"div1\"\r\n       (drop)=\"drop($event)\"\r\n       (dragover)=\"allowDrop($event)\">\r\n\r\n    <img src=\"https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350\"\r\n         draggable=\"true\"\r\n         (dragstart)=\"drag($event)\"\r\n         id=\"drag1\"\r\n         width=\"88\"\r\n         height=\"31\">\r\n  </div>\r\n\r\n  <div id=\"div2\"\r\n       (drop)=\"drop($event)\"\r\n       (dragover)=\"allowDrop($event)\">\r\n  </div>\r\n\r\n</div>\r\n",
+                    styles: ["#div1,#div2{float:left;width:100px;height:35px;margin:10px;padding:10px;border:1px solid #000}"]
+                },] }
+    ];
+    ZudfComponent.ctorParameters = function () { return [
+        { type: i3.AlertService },
+        { type: i3.AuthService },
+        { type: i3.FieldService },
+        { type: i3.ResourceApiService },
+        { type: i3.ToastService },
+        { type: i3.WebApiService }
+    ]; };
+    ZudfComponent.propDecorators = {
+        data: [{ type: i0.Input }],
+        group: [{ type: i0.Input }],
+        form: [{ type: i0.Input }]
+    };
+
     /********** Angular **********/
     var ZunknownComponent = /** @class */ (function () {
         function ZunknownComponent() {
@@ -10703,6 +10945,8 @@
             this.showFileList = true;
             this.fileList = [];
             this.restrictions = {
+                minFileSize: 1,
+                maxFileSize: 4194304,
                 allowedExtensions: [
                     "jpg",
                     "jpeg",
@@ -10750,6 +10994,12 @@
                 this.restrictions.allowedExtensions = this.data
                     .SelectOptions;
             }
+            if (this.data.MinFileSize) {
+                this.restrictions.minFileSize = this.data.MinFileSize;
+            }
+            if (this.data.MaxFileSize) {
+                this.restrictions.maxFileSize = this.data.MaxFileSize;
+            }
             this.isAutoUpload = this.data.AutoUpload || false;
             if (!this.data.AllowRemove) {
                 this.uploadRemoveUrl = "";
@@ -10984,17 +11234,21 @@
                             } // file type check
                         }); // loop each file
                     } // imagecompression check
-                    // add to group scope 
+                    // add to group scope
                     me.group['zupload_' + me.data.Value] = e.files;
                 }
             }
         };
+        ZuploadComponent.prototype.clearFiles = function () {
+            this.uploadComponent.clearFiles();
+            this.group['zupload_' + this.data.Value] = this.fileList;
+        };
         return ZuploadComponent;
     }());
     ZuploadComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zupload",
-                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload *ngIf=\"!data.SelectFileOnly\"\r\n                    [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\"\r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n\r\n      <kendo-fileselect *ngIf=\"data.SelectFileOnly\"\r\n                        (select)=\"selectEventHandler($event)\"\r\n                        (remove)=\"onRemove($event)\"\r\n                        (valueChange)=\"onChange($event)\"\r\n                        [restrictions]=\"restrictions\" >\r\n      </kendo-fileselect>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
+                    template: "<ion-item [formGroup]=\"form\" *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" [ngClass]=\"getIon_InvalidClass(form, data)\" style=\"margin-left: -15px;\">\r\n  <ion-label [attr.for]=\"data.Value\" *ngIf=\"data.ShowLabel === undefined || data.ShowLabel\" position=\"stacked\" style=\"margin-bottom: 10px;\">\r\n    {{data.Label}} <ion-text *ngIf=\"(!!componentProperties.isRequiredField ? group[componentProperties.isRequiredField] : componentProperties.isRequired)\" color=\"danger\">*</ion-text>\r\n  </ion-label>\r\n  <div class=\"ion-row\" style=\"justify-content: space-between; width: 100%\">\r\n    <span style=\"flex: 1;\">\r\n      <kendo-upload #uploadComponent\r\n                    *ngIf=\"!data.SelectFileOnly\"\r\n                    [id]=\"data.Value\"\r\n                    [autoUpload]=\"isAutoUpload\"\r\n                    [saveUrl]=\"uploadSaveUrl\"\r\n                    [removeUrl]=\"uploadRemoveUrl\"\r\n                    [restrictions]=\"restrictions\"\r\n                    [formControlName]=\"data.Value\"\r\n                    [multiple]=\"isMultiple\"\r\n                    [chunkable]=\"chunkSettings\"\r\n                    [showFileList]=\"showFileList\"\r\n                    (select)=\"selectEventHandler($event)\"\r\n                    (remove)=\"onRemove($event)\" \r\n                    (success)=\"onSuccess($event)\"\r\n                    (upload)=\"uploadEventHandler($event)\">\r\n      </kendo-upload>\r\n\r\n      <kendo-fileselect #uploadComponent\r\n                        *ngIf=\"data.SelectFileOnly\"\r\n                        [id]=\"data.Value\"\r\n                        (select)=\"selectEventHandler($event)\"\r\n                        (remove)=\"onRemove($event)\" \r\n                        (valueChange)=\"onChange($event)\"\r\n                        [restrictions]=\"restrictions\" >\r\n      </kendo-fileselect>\r\n    </span>\r\n  </div>\r\n</ion-item>\r\n<br />\r\n<!--<div class=\"wrap\" *ngIf=\"data.EnableCompression\">\r\n  <ion-label>Enable Compression: </ion-label>\r\n  <ion-checkbox style=\"margin: -5px 0;\" color=\"primary\" (ionChange)=\"toogleEnableCompression($event)\"></ion-checkbox>\r\n</div>-->\r\n<ion-label *ngIf=\"imagePreviews.length\" position=\"stacked\">\r\n  Image Preview:\r\n</ion-label>\r\n<div *ngIf=\"imagePreviews.length\" >\r\n  <img *ngFor=\"let image of imagePreviews\"\r\n       [src]=\"image.src\"\r\n       alt=\"image preview\"\r\n       height=\"100\"\r\n       style=\"margin: 5px; border: 1px solid gray;\"/>\r\n</div>\r\n",
                     styles: [""]
                 },] }
     ];
@@ -11007,7 +11261,8 @@
     ZuploadComponent.propDecorators = {
         data: [{ type: i0.Input }],
         group: [{ type: i0.Input }],
-        form: [{ type: i0.Input }]
+        form: [{ type: i0.Input }],
+        uploadComponent: [{ type: i0.ViewChild, args: ["uploadComponent",] }]
     };
 
     /********** Angular **********/
@@ -11278,6 +11533,7 @@
                 ktree_list: ZtreelistComponent,
                 ztrendcard: ZtrendcardComponent,
                 unknown: ZunknownComponent,
+                zudf: ZudfComponent,
                 zupload: ZuploadComponent,
                 zworkflowbuttons: ZworkflowbuttonsComponent
                 // kdate_rangepicker: ZdaterangeComponent
@@ -11461,6 +11717,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11560,6 +11817,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11609,6 +11867,7 @@
                         ZtreelistComponent,
                         ZtrendcardComponent,
                         ZunknownComponent,
+                        ZudfComponent,
                         ZuploadComponent,
                         ZworkflowbuttonsComponent
                     ],
@@ -11684,6 +11943,7 @@
     exports.ZtreeComponent = ZtreeComponent;
     exports.ZtreelistComponent = ZtreelistComponent;
     exports.ZtrendcardComponent = ZtrendcardComponent;
+    exports.ZudfComponent = ZudfComponent;
     exports.ZunknownComponent = ZunknownComponent;
     exports.ZuploadComponent = ZuploadComponent;
     exports.ZworkflowbuttonsComponent = ZworkflowbuttonsComponent;