mmhglobal-dynamicform 1.1.41 → 1.1.44

package/README.md

@@ -3,6 +3,17 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.13.
 
 ## Changelog
+`1.1.44`<br/> 
+[zudf] - enhance zudf<br/>
+[zcard] - enhance to handle disablecollapse<br/>
+[zbutton] - enhance to have kendo color, fill<br/>
+
+`1.1.43`<br/> 
+[ztree] - enhance to have expand & select 1 node and collapse 1 node<br/>
+
+`1.1.42`<br/> 
+[zselectmultiple] - enhance to support ButtonList for zselectmultiple.<br/>
+
 `1.1.41`<br/> 
 [mainservice] check event if not null, check for zudf form if applicable.<br/>
 

package/bundles/mmhglobal-dynamicform.umd.js

@@ -4069,6 +4069,8 @@
                         if (button.Disabled != "" && button.Disabled) {
                             buttonDisabled = button.Disabled === 'true' ? true : i3.ZComponentHelper.getGroupEvalValue.call(_this, button.Disabled);
                         }
+                        var fill = button['Fill'] ? button['Fill'] : 'outline';
+                        var color = button.Color ? button.Color : 'dark';
                         _this.items.push({
                             name: button.Name,
                             text: label,
@@ -4079,6 +4081,8 @@
                             iconName: button.Icon,
                             dismissType: button.DismissType,
                             disableTriggerTimer: button.DisableTriggerTimer,
+                            fill: fill,
+                            color: color,
                             SubType: _this.data.SubType,
                             click: function (y) {
                                 _this.buttonClick(button);
@@ -4129,14 +4133,19 @@
             });
         };
         ZbuttonsComponent.prototype.getButtonLabel = function (button) {
-            var labelExpr = button.Label.match(/^{{.*}}$/gi);
-            if (labelExpr) {
-                labelExpr = labelExpr[0].slice(2, -2);
-                var label = i3.ZComponentHelper.getGroupValue(labelExpr, this.group);
-                return label;
+            if (button.Label) {
+                var labelExpr = button.Label.match(/^{{.*}}$/gi);
+                if (labelExpr) {
+                    labelExpr = labelExpr[0].slice(2, -2);
+                    var label = i3.ZComponentHelper.getGroupValue(labelExpr, this.group);
+                    return label;
+                }
+                else {
+                    return button.Label;
+                }
             }
             else {
-                return button.Label;
+                return null;
             }
         };
         ZbuttonsComponent.prototype.getButtonRole = function (button, label) {
@@ -4167,7 +4176,7 @@
     ZbuttonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zbuttons",
-                    template: "<!-- <p>\r\n  zbuttons {{data.Value}}\r\n</p> -->\r\n<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\">\r\n\r\n  <div class=\"ion-margin-vertical\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span>{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" style=\"padding: 10px 0px;\" [class]=\"data.DivClass\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"BtnClick(item.clickEvent)\"\r\n    kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n    style=\"margin-right: 5px;\">{{item.text}}</button> -->\r\n    <ion-button fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                [expand]=\"expand\"\r\n                *ngFor=\"let item of items; let i = index\"\r\n                class=\"button-container\"\r\n                (click)=\"BtnClick(item)\"\r\n                [hidden]=\"!isBtnVisible(item.visible)\"\r\n                [disabled]=\"group.isTriggered || item.disabled\">\r\n      <fa-icon [icon]=\"getFontAwesome(item.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{item.text}}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n",
+                    template: "<!-- <p>\r\n  zbuttons {{data.Value}}\r\n</p> -->\r\n<div *ngIf=\"data.AlignButton\" style=\"padding-top: 13px\"></div>\r\n<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible) && items.length > 0\">\r\n\r\n  <div class=\"ion-margin-vertical\" *ngIf=\"isMobileScreen() && items.length > 1 && FirstZbtn === false\">\r\n    <kendo-dropdownbutton [data]=\"items\" size=\"large\" [look]=\"'outline'\" class=\"ion-activatable ripple-parent\">\r\n      Actions\r\n      <ng-template kendoDropDownButtonItemTemplate let-dataItem>\r\n        <!-- <span class=\"k-icon k-i-{{ dataItem.icon }}\"></span> -->\r\n        <span>{{ dataItem.text }}</span>\r\n      </ng-template>\r\n      <ion-ripple-effect></ion-ripple-effect>\r\n    </kendo-dropdownbutton>\r\n  </div>\r\n\r\n  <div *ngIf=\"!isMobileScreen() || items.length === 1 \" style=\"padding: 10px 0px;\" [class]=\"data.DivClass\">\r\n    <!-- <button *ngFor=\"let item of items; let i = index\" (click)=\"BtnClick(item.clickEvent)\"\r\n    kendoButton [togglable]=\"true\" [icon]=\"item.icon\" [hidden]=\"!isBtnVisible(item.visible)\"\r\n    style=\"margin-right: 5px;\">{{item.text}}</button> -->\r\n    <ion-button *ngFor=\"let item of items; let i = index\"\r\n                [fill]=\"item.fill\"\r\n                [color]=\"item.color\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                (click)=\"BtnClick(item)\"\r\n                [expand]=\"expand\"\r\n                [hidden]=\"!isBtnVisible(item.visible)\"\r\n                [disabled]=\"group.isTriggered || item.disabled\">\r\n      <fa-icon [icon]=\"getFontAwesome(item.icon)\"></fa-icon>\r\n      <div *ngIf=\"item.text\" style=\"padding-right: 5px;\"></div>\r\n      <span class=\"ion-text-capitalize\">{{item.text}}</span>\r\n    </ion-button>\r\n  </div>\r\n</div>\r\n",
                     styles: [".ripple-parent{position:relative;overflow:hidden}:host ::ng-deep span.ion-text-capitalize{font-weight:600}.button-container,.button:hover{font-size:12px;height:30px}.button:hover{border-radius:5px}"]
                 },] }
     ];
@@ -4232,8 +4241,8 @@
     ZcardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-zcard",
-                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <kendo-panelbar keepItemContent=\"true\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title\">{{options.Title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n          <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                            *ngFor=\"let field of data.Value\"\r\n                            [field]=\"field\"\r\n                            [group]=\"group\"\r\n                            [form]=\"form\"\r\n                            id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n</div>\r\n",
-                    styles: [".zcard-header-icon{color:#fff!important;padding-right:3px;font-size:11pt}.zcard-header-title{color:#fff!important;font-weight:500;font-size:11pt}"]
+                    template: "<div *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" style=\"margin: 10px 0 6px 0;\">\r\n  <kendo-panelbar keepItemContent=\"true\" *ngIf=\"!data.DisableCollapse\">\r\n    <kendo-panelbar-item [expanded]=\"!data.DefaultCollapse\" [disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\">\r\n      <ng-template kendoPanelBarItemTitle>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"zcard-header-title\">{{options.Title}}</ion-label>\r\n      </ng-template>\r\n      <ng-template kendoPanelBarContent>\r\n        <div class=\"ion-row\" style=\"padding: 6px 12px;\">\r\n          <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                            *ngFor=\"let field of data.Value\"\r\n                            [field]=\"field\"\r\n                            [group]=\"group\"\r\n                            [form]=\"form\"\r\n                            id=\"{{field.Type}}-{{field.Name}}\">\r\n          </app-zformcontrol>\r\n        </div>\r\n      </ng-template>\r\n    </kendo-panelbar-item>\r\n  </kendo-panelbar>\r\n\r\n  <kendo-card *ngIf=\"data.DisableCollapse\" width=\"100%\">\r\n    <kendo-card-header>\r\n      <div>\r\n        <span *ngIf=\"data.Icon\">\r\n          <fa-icon [icon]=\"data.Icon\" class=\"zcard-header-icon\"></fa-icon>\r\n        </span>\r\n        <span *ngIf=\"!data.Icon\">\r\n          <i class=\"fas fa-folder\" style=\"color: #000000\"></i>\r\n        </span>\r\n        <ion-label class=\"card-header-title\">{{options.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\r\n        <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ? field.DivClass : 'flex-hide')\"\r\n                          *ngFor=\"let field of data.Value\"\r\n                          [field]=\"field\"\r\n                          [group]=\"group\"\r\n                          [form]=\"form\"\r\n                          id=\"{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body>\r\n  </kendo-card>\r\n</div>\r\n",
+                    styles: [".zcard-header-icon{color:#fff!important;padding-right:3px;font-size:11pt}:host ::ng-deep kendo-card-header{background-color:#5596e6;color:#fff}.card-header-title{font-weight:500;font-size:10.5pt}"]
                 },] }
     ];
     ZcardComponent.ctorParameters = function () { return [
@@ -8726,6 +8735,16 @@
                     });
                 }
             }
+            // Handle Button beside dropdown
+            this.buttonList = this.data.ButtonList;
+            if (this.buttonList) {
+                this.buttonList.forEach(function (button) {
+                    if (button.tooltip) {
+                        button.tooltip = i3.ZComponentHelper.getGroupEvalValue.call(_this, button.tooltip);
+                    }
+                });
+            }
+            // dropdown configuration
             this.allowCustomValue = this.data.AllowCustomValue || false; // Allow enter text in dropdownbox
             var fieldValue = this.data.Value;
             var data = this.data;
@@ -9152,12 +9171,15 @@
             }
             return 'ion-row divselectmultiple';
         };
+        ZselectmultipleComponent.prototype.getFontAwesome = function (iconName) {
+            return i3.ZComponentHelper.getFontAwesome(iconName);
+        };
         return ZselectmultipleComponent;
     }());
     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]=\"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",
+                    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()\">\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    <ion-button *ngFor=\"let button of buttonList; let i = button\"\r\n                fill=\"outline\"\r\n                color=\"dark\"\r\n                size=\"small\"\r\n                strong=\"false\"\r\n                class=\"button-container\"\r\n                style=\"margin-top: 7px;\"\r\n                (click)=\"onIconClick(button.click)\"\r\n                [hidden]=\"!button.visible\"\r\n                [disabled]=\"group.isTriggered || button.disabled\">\r\n      <fa-icon *ngIf=\"button.icon\" [icon]=\"getFontAwesome(button.icon)\" style=\"padding-right: 5px;\"></fa-icon>\r\n      <span class=\"ion-text-capitalize\">{{ button.text }}</span>\r\n    </ion-button>\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}"]
                 },] }
     ];
@@ -9171,6 +9193,7 @@
         group: [{ type: i0.Input }],
         form: [{ type: i0.Input }],
         iconList: [{ type: i0.Input }],
+        buttonList: [{ type: i0.Input }],
         selectComponent: [{ type: i0.ViewChild, args: ["selectComponent",] }]
     };
 
@@ -9812,16 +9835,61 @@
             this.nodeCounter = 1;
             this.clickActName = null;
             this.state = { expandedkeys: [] };
+            this.itemIndex = [];
+            this.selectedKeys = [];
             this.componentProperties = new i3.ZComponentProperties();
             this.isExpanded = function (dataItem, index) {
                 // console.log(index);
                 return _this.state.expandedkeys.indexOf(index) > -1;
                 // return true;
             };
+            this.expandNode = function (field, value, setAsSelected) {
+                _this.itemIndex = [];
+                var node = _this.getItems();
+                _this.searchNodeIndex(node, value, '', field);
+                var index = _this.itemIndex;
+                if (setAsSelected) {
+                    _this.selectedKeys = index;
+                }
+                var indexArr = [];
+                index.forEach(function (i) {
+                    var arr = i.split('_');
+                    var indexs = "";
+                    arr.forEach(function (x) {
+                        indexs = indexs.concat("_").concat(x);
+                        indexArr.push(indexs.substring(1));
+                    });
+                });
+                _this.state.expandedkeys = _this.state.expandedkeys.concat(indexArr);
+            };
+            this.collapseNode = function (field, value, collapseParent) {
+                _this.itemIndex = [];
+                var node = _this.getItems();
+                _this.searchNodeIndex(node, value, '', field);
+                var index = _this.itemIndex;
+                var indexArr = [];
+                if (collapseParent) {
+                    index.forEach(function (i) {
+                        var arr = i.split('_');
+                        var indexs = "";
+                        arr.forEach(function (x) {
+                            indexs = indexs.concat("_").concat(x);
+                            indexArr.push(indexs.substring(1));
+                        });
+                    });
+                }
+                else {
+                    indexArr = index;
+                }
+                _this.state.expandedkeys = _this.state.expandedkeys.filter(function (v) {
+                    return !indexArr.includes(v);
+                });
+            };
             this.expandAll = function () {
                 var node = _this.getItems();
-                _this.expandAllNode(node, '');
-                console.log(_this.state.expandedkeys);
+                if (node) {
+                    _this.expandAllNode(node, '');
+                }
             };
             this.collapseAll = function () {
                 _this.state.expandedkeys = [];
@@ -9841,14 +9909,14 @@
         ZtreeComponent.prototype.ngOnInit = function () {
             i3.ZComponentHelper.setComponentProperties(this);
             i3.ZComponentHelper.registerComponent(this);
+            if (this.data.TreeviewExpandAll) {
+                this.expandAll();
+            }
         };
         ZtreeComponent.prototype.ngAfterViewInit = function () {
             // const componentId = ZComponentHelper.getComponentId(this.data);
             // this.group.zComponents[componentId] = this;
             i3.ZComponentHelper.registerComponent(this);
-            if (this.data.TreeviewExpandAll) {
-                this.expandAll();
-            }
         };
         ZtreeComponent.prototype.getItems = function () {
             // if (this.modelName) {
@@ -9874,6 +9942,21 @@
             //   console.warn('ztree field Value is not set correctly. ', fieldValue);
             // }
         };
+        ZtreeComponent.prototype.searchNodeIndex = function (node, value, key, field) {
+            var _this = this;
+            if (key) {
+                key = key + '_';
+            }
+            node.forEach(function (d, i) {
+                if (d[field] === Number(value) || d[field] === value) {
+                    _this.itemIndex = _this.itemIndex.concat(key + '' + i);
+                }
+                if (Array.isArray(d.Value)) {
+                    var k = key + '' + i;
+                    _this.searchNodeIndex(d.Value, value, k, field);
+                }
+            });
+        };
         ZtreeComponent.prototype.expandAllNode = function (node, key) {
             var _this = this;
             if (key) {
@@ -10098,7 +10181,7 @@
     ZtreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: "app-ztree",
-                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n        <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n        <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      {{ getTemplate(dataItem, data, group) }}\r\n\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
+                    template: "<div style=\"width:100%\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  kendoTreeViewSelectable\r\n                  kendoTreeViewDragAndDrop\r\n                  kendoTreeViewDragAndDropEditing\r\n                  [isExpanded]=\"isExpanded\"\r\n                  (collapse)=\"handleCollapse($event)\"\r\n                  (expand)=\"handleExpand($event)\"\r\n                  (nodeDrop)=\"handleNodeDrop($event)\"\r\n                  (nodeDragEnd)=\"handleNodeDragEnd($event)\"\r\n                  (selectionChange)=\"onSelectionChange($event)\"\r\n                  [selectedKeys]=\"selectedKeys\"\r\n                  kendoTreeViewHierarchyBinding\r\n                  childrenField=\"Value\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  textField=\"Name\"\r\n                  (filterChange)=\"handleFilter($event)\">\r\n\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n\r\n      <ion-button *ngIf=\"!!data.OnAddNode\"\r\n                  (click)=\"onAddNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 0 0 2px;\" mat-raised-button color=\"primary\" size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnAddNodeVisible)\">\r\n        <!-- <ion-icon name=\"add\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n      </ion-button>\r\n      <ion-button *ngIf=\"!!data.OnRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                  style=\"zoom: 0.6;margin: 0 15px 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                  [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\">\r\n        <!-- <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon> -->\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n      </ion-button>\r\n\r\n      {{ getTemplate(dataItem, data, group) }}\r\n\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n",
                     styles: [":host{--ion-color-primary:#479400;--ion-color-primary-rgb:56,128,255;--ion-color-primary-contrast:#fff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3171e0;--ion-color-primary-tint:#4c8dff}:host ::ng-deep .k-treeview .k-in{border-radius:2px;border:1px solid #c8dbf5;background-color:#e3ecf8}:host ::ng-deep .k-treeview .k-in,:host ::ng-deep .k-treeview .k-in.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;color:#0a45ab;font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-in.k-state-selected{border-radius:2px;background-color:#a9c3e8}:host ::ng-deep .k-treeview .k-in.k-state-hover,:host ::ng-deep .k-treeview .k-in:hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background-color:#c9daf2;color:#0a45ab;font-size:13px;cursor:pointer}"]
                 },] }
     ];
@@ -10758,45 +10841,86 @@
             };
         }
         ZudfComponent.prototype.ngOnInit = function () {
-            var _this = this;
             i3.ZComponentHelper.setComponentProperties(this);
             i3.ZComponentHelper.registerComponent(this);
+            // keep data Value
+            this.initialDataValue = this.data.Value;
+            if (i3.ZComponentHelper.isNullUndefinedEmpty(this.data.Value)) {
+                this.loadEmptyForm();
+            }
+            else {
+                this.loadZudfForm();
+            }
+        };
+        ZudfComponent.prototype.loadEmptyForm = function () {
+            var _this = this;
+            rxjs.of(true).pipe(operators.tap(function () {
+                _this.data.SubType = 'zudf';
+                // change the value to the result field form 
+                _this.data.Value = [];
+                // change zudf to zdiv
+                //this.data.Type = 'zdiv';
+            }), operators.tap(function () {
+                if (!_this.group['_zudf_' + _this.data.Name]) {
+                    _this.group['_zudf_' + _this.data.Name] = new i3.ZGroup;
+                }
+                var grp = _this.group['_zudf_' + _this.data.Name];
+                grp.zModel = {};
+                // create as new Form Group
+                _this.form = _this.toFormGroup(_this.data.Value);
+                // set to zGroup scope
+                grp.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);
+            });
+        };
+        ZudfComponent.prototype.loadZudfForm = function () {
+            var _this = 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');
+                    _this.appendPrefix(formFieldResult, 'zudf_' + _this.data.Name);
                     // change the value to the result field form 
                     _this.data.Value = formFieldResult;
                     // change zudf to zdiv
-                    _this.data.Type = '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;
+                if (!_this.group['_zudf_' + _this.data.Name]) {
+                    _this.group['_zudf_' + _this.data.Name] = new i3.ZGroup;
                 }
-                _this.group._zudf.zModel = {};
+                var grp = _this.group['_zudf_' + _this.data.Name];
+                grp.zModel = {};
                 // create as new Form Group
                 _this.form = _this.toFormGroup(_this.data.Value);
                 // set to zGroup scope
-                _this.group._zudf.form = _this.form;
+                grp.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();
+                // TODO: get saved record
+                //this.getFormFieldzModel();
+                // change back the data.Value
+                if (_this.data['DisableReplaceValue']) {
+                    _this.data.Value = _this.initialDataValue;
+                }
             });
         };
         ZudfComponent.prototype.getFormFieldzModel = function () {
-            var form = this.group._zudf.form;
-            var zModel = this.group._zudf.zModel;
+            var form = this.group['_zudf_' + this.data.Name].form;
+            var zModel = this.group['_zudf_' + this.data.Name].zModel;
             var url = this.resourceApiService.getURL('field');
             var respData = { 'parentFormId': 5722, 'zudf_Name': 'test' };
             Object.assign(zModel, respData);
@@ -10835,10 +10959,10 @@
                         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);
+                            formControls[field.Value] = new forms.FormControl(_this.group['_zudf_' + _this.data.Name].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);
+                                formControls[field.CCValue] = new forms.FormControl(_this.group['_zudf_' + _this.data.Name].zModel[field.CCValue], ccValidators);
                             }
                         }
                     }
@@ -10863,13 +10987,25 @@
         ZudfComponent.prototype.ComponentIsVisible = function (field) {
             return i3.ZComponentHelper.ComponentIsVisible(field, this.group);
         };
+        ZudfComponent.prototype.appendFormControl = function (zudfControlName, zudfControl, fieldData) {
+            this.form.addControl(zudfControlName, zudfControl);
+            this.formField.push(fieldData);
+        };
+        ZudfComponent.prototype.clearFormControl = function () {
+            var _this = this;
+            this.formField.forEach(function (data) {
+                _this.form.removeControl(data.Value);
+            });
+            this.data.Value = this.initialDataValue;
+            this.formField = [];
+        };
         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</div>\r\n",
-                    styles: ["#div1,#div2{float:left;width:100px;height:35px;margin:10px;padding:10px;border:1px solid #000}"]
+                    template: "<div style=\"padding: 15px\" *ngIf=\"data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\r\n   <kendo-card *ngIf=\"data.Title\" width=\"100%\" >\r\n    <kendo-card-header  >\r\n      <div>\r\n        <ion-label class=\"card-header-title\">{{data.Title}}</ion-label>\r\n      </div>\r\n    </kendo-card-header>\r\n    <kendo-card-body>\r\n      <div class=\"ion-row\">\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{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n        </app-zformcontrol>\r\n      </div>\r\n    </kendo-card-body> \r\n  </kendo-card>\r\n</div>\r\n\r\n<div *ngIf=\"!data.Title && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\" class=\"ion-row\">\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{{data.Name}}-{{field.Type}}-{{field.Name}}\">\r\n  </app-zformcontrol>\r\n</div>\r\n",
+                    styles: [".card-header-title{color:#fff!important;font-weight:500;font-size:11pt}"]
                 },] }
     ];
     ZudfComponent.ctorParameters = function () { return [