mmhglobal-dynamicform 2.9.1 → 2.10.1

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -1499,7 +1499,7 @@ class ZformComponent {
     }
     getFormControls(fieldArray, formControls, containerIsVisible = true) {
         fieldArray.forEach(field => {
-            if (!field.SubType) {
+            if (!field.SubType && field.Type != 'zloop') {
                 this.addToFieldIndex(field);
                 this.fieldService.patchFieldProperty(field);
                 if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
@@ -2654,31 +2654,23 @@ class MainService {
         if (resp) {
             if (resp.Data) {
                 Object.assign(group.zModel, resp.Data);
-                const resultData = this.removeTextEditorValueFromFormPatching(resp.Data, group);
+                const resultData = ZComponentHelper.removeTextEditorValueFromFormPatching(resp.Data, group);
                 fg.patchValue(resultData);
             }
             else if (resp["Id"]) {
                 Object.assign(group.zModel, resp);
-                const resultData = this.removeTextEditorValueFromFormPatching(resp, group);
+                const resultData = ZComponentHelper.removeTextEditorValueFromFormPatching(resp, group);
                 fg.patchValue(resultData);
             }
+            else {
+                console.log("Failed to patchUpdatedzModel to the formgroup");
+            }
         }
         group.referenceId = group.zModel.Id;
         this.tryUpdateGroupTrigger(false);
         group.isTriggered = false;
         fg.markAsPristine();
     }
-    removeTextEditorValueFromFormPatching(data, group) {
-        const resultData = JSON.parse(JSON.stringify(data));
-        const allFields = ZComponentHelper.getFieldListFromFieldsWithoutHierarchy(group.fields);
-        const textEditors = allFields.filter(x => x.Type === 'ztexteditor');
-        if (textEditors && textEditors.length > 0) {
-            for (const comp of textEditors) {
-                delete resultData[comp.Value];
-            }
-        }
-        return resultData;
-    }
     isTypeCodeFunction(event) {
         return event?.data?.TypeCode === 'FUNCTION';
     }
@@ -4944,6 +4936,19 @@ class ContainerFieldBase extends FieldBase {
     getClass(form, data) {
         return `${data.DivClass} ${data.Class}`;
     }
+    onClick(event, fieldValue) {
+        this.triggerEvent("inputfield-onClick", this.data.OnClick, event, fieldValue);
+    }
+    triggerEvent(type, target, event, fieldValue) {
+        if (target) {
+            this.group.subject.next({
+                type: type,
+                target: target,
+                event,
+                data: { value: fieldValue, field: this.data, comp: this }
+            });
+        }
+    }
 }
 ContainerFieldBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContainerFieldBase, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
 ContainerFieldBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContainerFieldBase, selector: "ng-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true });
@@ -5014,10 +5019,10 @@ class ZdivComponent extends ContainerFieldBase {
     }
 }
 ZdivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\">\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                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+ZdivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZdivComponent, selector: "app-zdiv", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\">\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                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZdivComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zdiv', template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\">\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                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"] }]
+            args: [{ selector: 'app-zdiv', template: "<div *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n     [fxLayout]=\"this.data.zlayout\" [fxLayoutAlign]=\"this.data.zlayoutAlign\" [style]=\"componentProperties.style.style\"\r\n     class=\"e1tag-style\" [ngClass]=\"data.Class\" (click)=\"onClick($event)\">\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                    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n                    [fxFlex]=\"getFlexSize(field)\" [fxFlex.xs]=\"getFlexSize(field, 'xs')\" [fxFlex.sm]=\"getFlexSize(field, 'sm')\"\r\n                    [fxFlex.md]=\"getFlexSize(field, 'md')\" [fxFlex.lg]=\"getFlexSize(field, 'lg')\"\r\n                    [fxFlex.xl]=\"getFlexSize(field, 'xl')\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n", styles: [".col-1,.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xl-1{width:8.333%}.col-2,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xl-2{width:16.666%}.col-3,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xl-3{width:25%}.col-4,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xl-4{width:33.333%}.col-5,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xl-5{width:41.666%}.col-6,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xl-6{width:50%}.col-7,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xl-7{width:58.333%}.col-8,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xl-8{width:66.666%}.col-9,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xl-9{width:75%}.col-10,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xl-10{width:83.333%}.col-11,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xl-11{width:91.666%}.col-12,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12,.col-xl-12{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
 
 /********** Angular **********/
@@ -6582,6 +6587,7 @@ class ZselectmultipleComponent extends InputFieldBase {
     }
     ngOnInit() {
         this.isLoading = true;
+        this.setComponentToUse();
         super.setupInnerField();
         ZComponentHelper.setSelectMultipleTextValue(this.data.SelectOptions, this);
         // [Dropdownlist Multiple] - auto close menu when lose focus.
@@ -7006,17 +7012,38 @@ class ZselectmultipleComponent extends InputFieldBase {
             this.multiselecttree.focus();
             return true;
         }
+        if (this.dropdownlistComponent) {
+            this.dropdownlistComponent.focus();
+            return true;
+        }
         return false;
     }
+    setComponentToUse() {
+        if (!this.data.Multiple && this.data.Filterable == false) {
+            this.componentType = 'dropdownlist';
+        }
+        else if (!this.data.Multiple) {
+            this.componentType = 'combobox';
+        }
+        else if (this.data.Multiple && !this.data.EnableCheckbox) {
+            this.componentType = 'multiselect';
+        }
+        else if (this.data.Multiple && this.data.EnableCheckbox) {
+            this.componentType = 'multiselecttree';
+        }
+    }
 }
 ZselectmultipleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZselectmultipleComponent, deps: [{ token: ZComponentService }, { token: i2.ResourceApiService }, { token: i2.WebApiService }, { token: i2.CacheService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
-ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></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\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\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      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && !data.Multiple\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"true\"\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)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && data.Multiple && !data.EnableCheckbox\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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]=\"true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen() && data.Multiple && data.EnableCheckbox\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!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:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$2.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$2.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5$1.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
+ZselectmultipleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZselectmultipleComponent, selector: "app-zselectmultiple", viewQueries: [{ propertyName: "comboboxComponent", first: true, predicate: ["comboboxComponent"], descendants: true }, { propertyName: "dropdownlistComponent", first: true, predicate: ["dropdownlistComponent"], descendants: true }, { propertyName: "multiselect", first: true, predicate: ["multiselect"], descendants: true }, { propertyName: "multiselecttree", first: true, predicate: ["multiselecttree"], descendants: true }, { propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></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\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\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      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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.enableFiltering == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!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:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: i3$6.IonicSelectableComponent, selector: "ionic-selectable", inputs: ["items", "modalCssClass", "modalEnterAnimation", "modalLeaveAnimation", "isConfirmButtonEnabled", "itemValueField", "itemTextField", "groupValueField", "groupTextField", "canSearch", "hasInfiniteScroll", "hasVirtualScroll", "virtualScrollApproxItemHeight", "searchPlaceholder", "placeholder", "searchFailText", "clearButtonText", "addButtonText", "confirmButtonText", "closeButtonText", "shouldFocusSearchbar", "headerColor", "groupColor", "closeButtonSlot", "itemIconSlot", "searchDebounce", "disabledItems", "shouldStoreItemValue", "canSaveItem", "canDeleteItem", "virtualScrollHeaderFn", "isEnabled", "shouldBackdropClose", "hasConfirmButton", "isOnSearchEnabled", "canClear", "isMultiple", "canAddItem"], outputs: ["itemsChange", "onChange", "onSearch", "onSearchFail", "onSearchSuccess", "onInfiniteScroll", "onOpen", "onClose", "onSelect", "onClear", "onSaveItem", "onDeleteItem", "onAddItem"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { type: i6$2.ComboBoxComponent, selector: "kendo-combobox", inputs: ["focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "popupSettings", "listHeight", "iconClass", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoComboBox"] }, { type: i6$2.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { type: i6$2.MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: ["tabindex", "size", "rounded", "fillMode", "popupSettings", "checkableSettings", "data", "value", "dataItems", "textField", "valueField", "valueDepth", "loading", "placeholder", "listHeight", "disabled", "readonly", "valuePrimitive", "loadOnDemand", "focusableId", "clearButton", "filterable", "checkAll", "hasChildren", "fetchChildren", "isNodeExpanded", "isNodeVisible", "itemDisabled", "tagMapper"], outputs: ["focus", "blur", "open", "opened", "close", "closed", "nodeExpand", "nodeCollapse", "valueChange", "removeTag", "filterChange"], exportAs: ["kendoMultiSelectTree"] }, { type: i6$2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$6.IonicSelectableItemIconTemplateDirective, selector: "[ionicSelectableItemIconTemplate]" }, { type: i3$6.IonicSelectableCloseButtonTemplateDirective, selector: "[ionicSelectableCloseButtonTemplate]" }, { type: i3$6.IonicSelectableTitleTemplateDirective, selector: "[ionicSelectableTitleTemplate]" }, { type: i3$6.IonicSelectableItemTemplateDirective, selector: "[ionicSelectableItemTemplate]" }, { type: OpenOnFocusDirective, selector: "kendo-combobox[openOnFocus]", inputs: ["openOnFocus"] }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6$2.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i6$2.DropDownTreesExpandDirective, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: ["isNodeExpanded"] }, { type: i6$2.MultiSelectTreeHierarchyBindingDirective, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: ["kendoMultiSelectTreeHierarchyBinding"] }, { type: i6$2.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }], pipes: { "async": i5$1.AsyncPipe, "zselectTranslationParser": ZSelectTranslationParser } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZselectmultipleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zselectmultiple", template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></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\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\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      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && !data.Multiple\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"true\"\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)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && data.Multiple && !data.EnableCheckbox\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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]=\"true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen() && data.Multiple && data.EnableCheckbox\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"{'disabled' : (!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)}\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!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:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: "app-zselectmultiple", template: "<div [formGroup]=\"form\" class=\"zselectmultiple-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <ionic-selectable *ngIf=\"isMobileScreen()\" #selectComponent item-content searchFailText=\"Nothing found :(\"\r\n                    headerColor=\"primary\" clearButtonText=\"Clear\" [(ngModel)]=\"group.zModel[data.Value]\" [id]=\"data.Value\"\r\n                    [items]=\"getItemsData()\" [itemValueField]=\"itemValueField\" [itemTextField]=\"itemTextField\"\r\n                    [canAddItem]=\"!!data.OnAddItem\" [canClear]=\"true\" [placeholder]=\"data.PlaceHolder\"\r\n                    [canSearch]=\"!data['disable-search']\" [shouldFocusSearchbar]=\"!data['disable-search']\"\r\n                    [hasInfiniteScroll]=\"!!data.HasInfiniteScroll\" [isMultiple]=\"data.Multiple\"\r\n                    [isEnabled]=\"!(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                    [shouldStoreItemValue]=\"true\" (onSearch)=\"onSearch($event)\" (onInfiniteScroll)=\"getInfiniteData($event)\"\r\n                    (onAddItem)=\"onAddItem($event)\" (onChange)=\"onChange_mobile($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n\r\n    <ng-template ionicSelectableItemIconTemplate let-item=\"item\" let-isItemSelected=\"isItemSelected\">\r\n      <fa-icon slot=\"start\" class=\"isItemSelected e1tag-style2\" size=\"sm\" [icon]=\"['far', isItemSelected ? 'check-circle': 'circle']\"\r\n               [styles]=\"{'color': isItemSelected ? 'dodgerBlue' : 'lightGray'}\" [style]=\"componentProperties.style.style2\"></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\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\"></fa-icon>\r\n    </ng-template>\r\n\r\n    <ng-template ionicSelectableTitleTemplate>\r\n      <span class=e1tag-style4 [style]=\"componentProperties.style.style4\">{{data.Label}}</span>\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      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(item, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </ionic-selectable>\r\n  <kendo-combobox *ngIf=\"!isMobileScreen() && componentType == 'combobox'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #comboboxComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoComboBoxItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-combobox>\r\n  <kendo-multiselect *ngIf=\"!isMobileScreen() && componentType == 'multiselect'\"\r\n                     class=\"input-field e1tag-style1\"\r\n                     #multiselect\r\n                     [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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.enableFiltering == false ? false : true\"\r\n                     [checkboxes]=\"data.EnableCheckbox\"\r\n                     [loading]=\"isLoading\"\r\n                     [autoClose]=\"autoClose\"\r\n                     [kendoDropDownFilter]=\"filterSettings\"\r\n                     [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                     [ngClass]=\"data.Class\"\r\n                     (valueChange)=\"onChange_desktop($event)\"\r\n                     (filterChange)=\"handleFilter($event)\"\r\n                     (open)=\"handleOpen()\"\r\n                     (close)=\"handleClose()\"\r\n                     (blur)=\"handleBlur()\"\r\n                     [style]=\"componentProperties.style.style1\"\r\n                     [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n    </ng-template>\r\n  </kendo-multiselect>\r\n  <kendo-multiselecttree *ngIf=\"!isMobileScreen()  && componentType == 'multiselecttree'\"\r\n                         class=\"input-field e1tag-style1\"\r\n                         #multiselecttree\r\n                         kendoMultiSelectTreeExpandable\r\n                         [placeholder]=\"data.PlaceHolder\"\r\n                         [kendoMultiSelectTreeHierarchyBinding]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\r\n                         childrenField=\"Value\"\r\n                         [hasChildren]=\"hasChildren\"\r\n                         [textField]=\"itemTextField\"\r\n                         [valueField]=\"itemValueField\"\r\n                         [valuePrimitive]=\"true\"\r\n                         (valueChange)=\"onChange_desktop($event)\"\r\n                         [dataItems]=\"data.Value\"\r\n                         [loading]=\"isLoading\"\r\n                         [autoClose]=\"autoClose\"\r\n                         [expandOnFilter]=\"filterExpandSettings\"\r\n                         [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                         (filterChange)=\"handleMultiSelectTreeFilter($event)\"\r\n                         [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                         [ngClass]=\"data.Class\"\r\n                         (open)=\"handleOpen()\"\r\n                         (close)=\"handleClose()\"\r\n                         (blur)=\"handleBlur()\"\r\n                         [style]=\"componentProperties.style.style1\"\r\n                         [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoMultiSelectTreeNoDataTemplate>\r\n      <h4>\r\n        <span class=\"k-icon k-i-warning\"></span><br /><br />\r\n        No record found.\r\n      </h4>\r\n    </ng-template>\r\n  </kendo-multiselecttree>\r\n  <kendo-dropdownlist  *ngIf=\"!isMobileScreen()  && componentType == 'dropdownlist'\"\r\n                  class=\"input-field e1tag-style1\"\r\n                  #dropdownlistComponent\r\n                  [data]=\"getItemsData() | zselectTranslationParser : itemTextField : data : group | async\"\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                  [kendoDropDownFilter]=\"filterSettings\"\r\n                  [suggest]=\"true\"\r\n                  [filterable]=\"data.enableFiltering == false ? false : true\"\r\n                  [openOnFocus]=\"disableOpenOnFocus(comboboxComponent)\"\r\n                  [readonly]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [class.disabled]=\"(!!componentProperties.isReadOnlyField ? group[componentProperties.isReadOnlyField] : componentProperties.isReadOnly)\"\r\n                  [ngClass]=\"data.Class\"\r\n                  [loading]=\"isLoading\"\r\n                  (valueChange)=\"onChange_desktop($event)\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [virtual]=\"data.IsEnableVirtualization == true ? virtual : null\"\r\n                  (open)=\"handleOpen()\"\r\n                  (close)=\"handleClose()\"\r\n                  (blur)=\"handleBlur()\"\r\n                  [style]=\"componentProperties.style.style1\"\r\n                  [clearButton]=\"data.ClearButton == false ? false : true\">\r\n    <ng-template kendoDropDownListItemTemplate let-dataItem>\r\n      <span class=\"e1tag-style5\" [class.zselect-virtualization]=\"data.IsEnableVirtualization\" [style]=\"componentProperties.style.style5\">{{ getItemTemplate(dataItem, data, group, itemValueField, itemTextField) }}</span>\r\n      <!-- <span class=\"template\">{{ dataItem.value }}</span> {{ dataItem.text }} -->\r\n    </ng-template>\r\n  </kendo-dropdownlist>\r\n</div>\r\n", styles: [":host ::ng-deep kendo-combobox.k-multiselect,:host ::ng-deep kendo-dropdownlist.k-multiselect,:host ::ng-deep kendo-multiselect.k-multiselect{height:auto}:host ::ng-deep kendo-combobox .k-searchbar,:host ::ng-deep kendo-dropdownlist .k-searchbar,:host ::ng-deep kendo-multiselect .k-searchbar{margin:auto}:host ::ng-deep kendo-combobox .k-searchbar+.k-icon,:host ::ng-deep kendo-dropdownlist .k-searchbar+.k-icon,:host ::ng-deep kendo-multiselect .k-searchbar+.k-icon{margin:auto}:host ::ng-deep kendo-combobox .kendo-combobox-item-template,:host ::ng-deep kendo-dropdownlist .kendo-combobox-item-template,:host ::ng-deep kendo-multiselect .kendo-combobox-item-template{height:var(--input-field-height)!important}:host ::ng-deep kendo-combobox.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-dropdownlist.disabled>.k-dropdown-wrap,:host ::ng-deep kendo-multiselect.disabled>.k-dropdown-wrap{background:transparent}:host ::ng-deep kendo-combobox:focus-within,:host ::ng-deep kendo-dropdownlist:focus-within,:host ::ng-deep kendo-multiselect:focus-within{box-shadow:0 0 3px 1px var(--ion-color-primary)}:host ::ng-deep kendo-combobox.no-border,:host ::ng-deep kendo-dropdownlist.no-border,:host ::ng-deep kendo-multiselect.no-border{box-shadow:none!important;border:none!important}:host ::ng-deep kendo-combobox.no-border>.k-input-button,:host ::ng-deep kendo-dropdownlist.no-border>.k-input-button,:host ::ng-deep kendo-multiselect.no-border>.k-input-button{background:none;border:none}:host ::ng-deep kendo-combobox.no-background,:host ::ng-deep kendo-dropdownlist.no-background,:host ::ng-deep kendo-multiselect.no-background{background:none}:host ::ng-deep kendo-combobox.right-align>kendo-searchbar>input,:host ::ng-deep kendo-dropdownlist.right-align>kendo-searchbar>input,:host ::ng-deep kendo-multiselect.right-align>kendo-searchbar>input{text-align:right}:host ::ng-deep kendo-combobox.right-align>.k-input-inner,:host ::ng-deep kendo-dropdownlist.right-align>.k-input-inner,:host ::ng-deep kendo-multiselect.right-align>.k-input-inner{text-align:right}fa-icon.isItemSelected{display:inline-block;width:1em;height:1em;contain:strict;fill:currentcolor;box-sizing:content-box!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:99%;color:#000}.zselect-virtualization{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.ResourceApiService }, { type: i2.WebApiService }, { type: i2.CacheService }, { type: i2.FieldService }]; }, propDecorators: { comboboxComponent: [{
                 type: ViewChild,
                 args: ["comboboxComponent"]
+            }], dropdownlistComponent: [{
+                type: ViewChild,
+                args: ["dropdownlistComponent"]
             }], multiselect: [{
                 type: ViewChild,
                 args: ["multiselect"]
@@ -11028,10 +11055,10 @@ class ZtreeComponent extends DataListingFieldBase {
     }
 }
 ZtreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
-ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\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                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\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)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                style=\"zoom: 0.6; margin: 0 0 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator\"></span>\r\n\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n        </ion-label>\r\n        <!--dom to display the tree row properly if there no button to show.-->\r\n        <!-- <div *ngIf=\"(!data.OnAddNode && !data.OnRemoveNode) && data.doubleHeight\" style=\"zoom: 0.6; margin: 15px 0 15px 0;\">\r\n          &nbsp;\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.3);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}\n"], components: [{ type: i2$9.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$9.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$9.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$9.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$9.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$9.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$9.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }] });
+ZtreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZtreeComponent, selector: "app-ztree", viewQueries: [{ propertyName: "nodetemplate", first: true, predicate: ["nodetemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\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                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\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)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                style=\"zoom: 0.6; margin: 0 0 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n        </ion-label>\r\n        <!--dom to display the tree row properly if there no button to show.-->\r\n        <!-- <div *ngIf=\"(!data.OnAddNode && !data.OnRemoveNode) && data.doubleHeight\" style=\"zoom: 0.6; margin: 15px 0 15px 0;\">\r\n          &nbsp;\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.3);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"], components: [{ type: i2$9.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i5.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$9.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i2$9.DragAndDropDirective, selector: "[kendoTreeViewDragAndDrop]", inputs: ["allowCopy", "dropZoneTreeViews", "startDragAfter", "autoScroll"] }, { type: i2$9.DragAndDropEditingDirective, selector: "[kendoTreeViewDragAndDropEditing]", inputs: ["editService"] }, { type: i2$9.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { type: i2$9.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$9.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZtreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\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                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\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)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                style=\"zoom: 0.6; margin: 0 0 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator\"></span>\r\n\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n        </ion-label>\r\n        <!--dom to display the tree row properly if there no button to show.-->\r\n        <!-- <div *ngIf=\"(!data.OnAddNode && !data.OnRemoveNode) && data.doubleHeight\" style=\"zoom: 0.6; margin: 15px 0 15px 0;\">\r\n          &nbsp;\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.3);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}\n"] }]
+            args: [{ selector: "app-ztree", template: "<div style=\"width:100%\" [style]=\"componentProperties.style.style\" class=\"e1tag-style\"\r\n     *ngIf=\"(!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <kendo-treeview [nodes]=\"getItems()\"\r\n                  kendoTreeViewExpandable\r\n                  [kendoTreeViewSelectable]=\"selection\"\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                  textField=\"Name\"\r\n                  [selectBy]=\"data.SelectOptions\"\r\n                  [filterable]=\"data.Filterable\"\r\n                  (filterChange)=\"handleFilter($event)\"\r\n                  [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\"\r\n                  [ngClass]=\"data.Class\">\r\n    <ng-template kendoTreeViewNodeTemplate let-dataItem #nodetemplate>\r\n      <div class=\"tree-content-container\">\r\n        <ion-button *ngIf=\"!!data.OnAddNode && !data.isHideAllAddNode\"\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)\" [style]=\"componentProperties.style.style2\" class=\"e1tag-style2\">\r\n          <fa-icon [icon]=\"'plus'\"></fa-icon>\r\n        </ion-button>\r\n        <ion-button *ngIf=\"!!data.OnRemoveNode && !data.isHideAllRemoveNode\" (click)=\"onRemoveNode($event, dataItem, data, group)\"\r\n                style=\"zoom: 0.6; margin: 0 0 0 10px;\" color=\"danger\" mat-raised-button size=\"medium\"\r\n                [hidden]=\"(!!dataItem.OnRemoveNodeVisible)\" [style]=\"componentProperties.style.style3\" class=\"e1tag-style3\">\r\n        <fa-icon [icon]=\"'minus'\"></fa-icon>\r\n        </ion-button>\r\n        <span class=\"btn-seperator\"></span>\r\n        <span *ngFor=\"let icon of dataItem.IconList\">\r\n          <fa-icon class=\"e1tag-style5 left-icon\" [icon]=\"icon\" [style]=\"componentProperties.style.style5\"></fa-icon>\r\n        </span>\r\n        <ion-label [style]=\"componentProperties.style.style4\" class=\"e1tag-style4\" [ngClass]=\"dataItem.class\">\r\n        {{ getTemplate(dataItem, data, group) }}\r\n        </ion-label>\r\n        <!--dom to display the tree row properly if there no button to show.-->\r\n        <!-- <div *ngIf=\"(!data.OnAddNode && !data.OnRemoveNode) && data.doubleHeight\" style=\"zoom: 0.6; margin: 15px 0 15px 0;\">\r\n          &nbsp;\r\n        </div> -->\r\n      </div>\r\n    </ng-template>\r\n  </kendo-treeview>\r\n</div>\r\n", styles: [":host ::ng-deep .k-treeview .k-treeview-leaf{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.15);color:var(--ion-color-primary-shade);border:1px solid rgba(var(--ion-color-primary-rgb),1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf.k-selected,:host ::ng-deep .k-treeview .k-treeview-leaf.k-state-selected{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.3);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .k-treeview-leaf:hover,:host ::ng-deep .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf.k-state-hover{width:100%;margin:5px;padding:9px 20px 9px 8px;border-radius:2px;background:rgba(var(--ion-color-primary-rgb),.1);font-size:13px;cursor:pointer}:host ::ng-deep .k-treeview .tree-content-container{display:flex;align-items:center;justify-content:center}:host ::ng-deep .k-treeview .btn-seperator{width:10px;display:inline-block}.left-icon{margin-right:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: ZComponentService }]; }, propDecorators: { nodetemplate: [{
                 type: ViewChild,
                 args: ["nodetemplate", { static: true }]
@@ -13203,6 +13230,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+/********** Angular **********/
+class ZloopComponent extends ContainerFieldBase {
+    constructor(componentService, fieldService) {
+        super(componentService);
+        this.componentService = componentService;
+        this.fieldService = fieldService;
+        this.clonedFields = [];
+        this.clonedFormControlList = new Array();
+        this.initField = {};
+        this.conponentTypesToNotUpdateValue = ['zbuttons'];
+    }
+    ngOnInit() {
+        this.initField = ZComponentHelper.deepClone(this.data);
+        this.setupLoopingElement();
+        super.initComponent().subscribe(() => { this.isLoading = false; });
+    }
+    refreshFieldElement() {
+        this.data = ZComponentHelper.deepClone(this.initField);
+        this.setupLoopingElement();
+    }
+    setupLoopingElement() {
+        if (this.data.LoopingElementConfig) {
+            // Remove previously cloned fields from form controls (if any)
+            if (this.clonedFormControlList.length > 0) {
+                for (const fgName of this.clonedFormControlList) {
+                    this.group.form.removeControl(fgName);
+                }
+            }
+            // Clone zloop's child
+            this.clonedFields = this.cloneFieldElementChild(this.data);
+            // Append cloned fields to group.fields for error message displaying
+            const thisField = ZComponentHelper.getFieldFromFieldsByName(this.group.fields, this.data.Name);
+            thisField.Value = this.clonedFields;
+        }
+    }
+    cloneFieldElementChild(field) {
+        const loopingElementConfig = typeof field.LoopingElementConfig == 'string' ? ZComponentHelper.getGroupValue(field.LoopingElementConfig, this.group) : field.LoopingElementConfig;
+        if (loopingElementConfig == undefined) {
+            return field.Value;
+        }
+        let fieldToInsert = new Array();
+        for (let configIndex = 0; configIndex < loopingElementConfig.Count; configIndex++) {
+            const clonedFields = JSON.parse(JSON.stringify(field.Value));
+            this.updateFieldPropertiesToMakeThemDistinct(clonedFields, loopingElementConfig, configIndex);
+            fieldToInsert = fieldToInsert.concat(clonedFields);
+        }
+        return fieldToInsert;
+    }
+    updateFieldPropertiesToMakeThemDistinct(fields, loopingElementConfig, index) {
+        for (const field of fields) {
+            const elementConfig = loopingElementConfig.ToReplace.find(x => x.ElementName == field.Name);
+            const elementConfigProperty = elementConfig && elementConfig.Property && elementConfig.Property.length > index ? elementConfig.Property[index] : {};
+            field.Name = `${field.Name}_${index + 1}`;
+            if (field.Label) {
+                field.Label = `${field.Label}`;
+            }
+            if (Array.isArray(field.Value)) {
+                this.updateFieldPropertiesToMakeThemDistinct(field.Value, loopingElementConfig, index);
+            }
+            else {
+                if (elementConfigProperty.Value != undefined) {
+                    field.Value = elementConfigProperty.Value;
+                }
+                else if (!this.conponentTypesToNotUpdateValue.includes(field.Type)) {
+                    field.Value = `${field.Value}_${index + 1}`;
+                }
+            }
+            for (const key of Object.keys(elementConfigProperty)) {
+                field[key] = elementConfigProperty[key];
+            }
+            this.setClonedFieldsToFormControls(field);
+        }
+    }
+    setClonedFieldsToFormControls(field) {
+        if (!field.SubType) {
+            this.fieldService.patchFieldProperty(field);
+            if (typeof field.Value === "string" && field.Value.indexOf(".") !== -1) {
+                if (['zgrid', 'ztree', 'textareajson'].indexOf(field.Type) === -1) {
+                    console.warn("FormControl - invalid field value", field.Value);
+                }
+            }
+            else {
+                const isFormControl = ZComponentHelper.isFormControl(field);
+                const isVisible = ZComponentHelper.isVisibleFormControl(this, field);
+                const isRequired = ZComponentHelper.isRequiredFormControl(this, field);
+                if (isFormControl === true) {
+                    const validators = ZComponentHelper.getValidators(field, isVisible, isRequired);
+                    this.group.form.addControl(field.Value, new FormControl(this.group.zModel[field.Value], validators));
+                    this.clonedFormControlList.push(field.Value);
+                    if (ZComponentHelper.hasCCField(field.Type)) {
+                        const ccValidators = ZComponentHelper.getCCValidators(field, isVisible, isRequired);
+                        this.group.form.addControl(field.CCValue, new FormControl(this.group.zModel[field.CCValue], ccValidators));
+                        this.clonedFormControlList.push(field.CCValue);
+                    }
+                }
+            }
+        }
+    }
+}
+ZloopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZloopComponent, deps: [{ token: ZComponentService }, { token: i2.FieldService }], target: i0.ɵɵFactoryTarget.Component });
+ZloopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZloopComponent, selector: "app-zloop", usesInheritance: true, ngImport: i0, template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n\r\n", styles: [""], components: [{ type: ZformcontrolComponent, selector: "app-zformcontrol", inputs: ["field", "group", "form", "containerField"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZloopComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-zloop', template: "<div [style]=\"componentProperties.containerStyle.style\" class=\"e1tag-container-style\"\r\n    *ngIf=\"(!!componentProperties.isVisibleField? group[componentProperties.isVisibleField] : componentProperties.isVisible)\">\r\n  <app-zformcontrol [ngClass]=\"group[field.isVisibleField] ? field.DivClass : ((field.Visible === true) ?  field.DivClass : 'flex-hide')\"\r\n    *ngFor=\"let field of clonedFields\"\r\n    [field]=\"field\"\r\n    [containerField]=\"data\" [group]=\"group\" [form]=\"form\" id=\"{{field.Type}}-{{field.Name}}\"\r\n    [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </app-zformcontrol>\r\n</div>\r\n\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.FieldService }]; } });
+
+class KsplitterComponent extends ContainerFieldBase {
+    constructor(compService) {
+        super(compService);
+    }
+    ngOnInit() {
+        super.initComponent().pipe(tap(() => this.isLoading = false)).subscribe();
+    }
+}
+KsplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, deps: [{ token: ZComponentService }], target: i0.ɵɵFactoryTarget.Component });
+KsplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: KsplitterComponent, selector: "app-ksplitter", usesInheritance: true, ngImport: i0, template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.TabItems; let i = index\" [resizable]=\"item.Resizable || true\"\r\n      [collapsible]=\"item.AllowCollapse || true\" [size]=\"item.Size\" class=\"e1tag-container-style2\"\r\n      [style]=\"componentProperties.containerStyle.style2\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""], components: [{ type: i3$4.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i3$4.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: ZdivComponent, selector: "app-zdiv" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "tabfilter": TabFilter } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: KsplitterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-ksplitter", template: "<div class=\"ksplitter-container e1tag-container-style\"\r\n  *ngIf=\"!isLoading && (!!componentProperties.isVisibleField ? group[componentProperties.isVisibleField] : componentProperties.isVisible)\"\r\n  [ngClass]=\"data.Class\" [style]=\"componentProperties.containerStyle.style\" [class]=\"data.ComponentStyleType\">\r\n  <kendo-splitter [orientation]=\"data.Orientation || 'horizontal'\" class=\"e1tag-container-style1\"\r\n    [style]=\"componentProperties.containerStyle.style1\">\r\n    <kendo-splitter-pane *ngFor=\"let item of data.TabItems; let i = index\" [resizable]=\"item.Resizable || true\"\r\n      [collapsible]=\"item.AllowCollapse || true\" [size]=\"item.Size\" class=\"e1tag-container-style2\"\r\n      [style]=\"componentProperties.containerStyle.style2\">\r\n      <app-zdiv [style]=\"componentProperties.containerStyle.style3\" class=\"e1tag-container-style3\"\r\n        [data]=\"data | tabfilter: i + ''\" [form]=\"form\" [group]=\"group\" [containerField]=\"containerField\">\r\n      </app-zdiv>\r\n    </kendo-splitter-pane>\r\n  </kendo-splitter>\r\n</div>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }]; } });
+
 /********** Angular **********/
 class MmhglobalDynamicformModule {
 }
@@ -13281,7 +13429,9 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         DateKendoFormatParser,
         DateIonicFormatParser,
         DateIonicMinMaxParser,
-        SfquerybuilderComponent], imports: [IonicModule,
+        SfquerybuilderComponent,
+        ZloopComponent,
+        KsplitterComponent], imports: [IonicModule,
         IonicSelectableModule,
         CommonModule,
         RouterModule,
@@ -13397,7 +13547,9 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         DateKendoFormatParser,
         DateIonicFormatParser,
         DateIonicMinMaxParser,
-        SfquerybuilderComponent] });
+        SfquerybuilderComponent,
+        ZloopComponent,
+        KsplitterComponent] });
 MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MmhglobalDynamicformModule, providers: [
         ModalService
     ], imports: [[
@@ -13524,7 +13676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DateKendoFormatParser,
                         DateIonicFormatParser,
                         DateIonicMinMaxParser,
-                        SfquerybuilderComponent
+                        SfquerybuilderComponent,
+                        ZloopComponent,
+                        KsplitterComponent
                     ],
                     imports: [
                         IonicModule,
@@ -13646,7 +13800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DateKendoFormatParser,
                         DateIonicFormatParser,
                         DateIonicMinMaxParser,
-                        SfquerybuilderComponent
+                        SfquerybuilderComponent,
+                        ZloopComponent,
+                        KsplitterComponent
                     ],
                     providers: [
                         ModalService
@@ -13663,5 +13819,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonFieldBase, ContainerFieldBase, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KcardComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
+export { ButtonFieldBase, ContainerFieldBase, DataListingFieldBase, DateIonicFormatParser, DateIonicMinMaxParser, DateKendoFormatParser, DateParserFilter, DateRangeFilterCellComponent, DivzLayout, EditorFilter, ElementContainerDirective, FieldBase, FieldElementDirective, HtmlSanitizePipe, InputErrorMessageComponent, InputFieldAddOnsComponent, InputFieldBase, KcardComponent, KsplitterComponent, MainService, MmhglobalDynamicformModule, MyFileInfo, OpenOnFocusDirective, PageLoaderComponent, ProcessingRecordLoaderComponent, ScrollbarThemeDirective, SfquerybuilderComponent, TabFilter, UiactionbuttonComponent, UiappmenucontentComponent, UibulletinComponent, UicontainerComponent, UicontentComponent, UiheaderComponent, UimenubuttonComponent, UimenucontentComponent, UipageComponent, UivalidationmessageComponent, ZBulletComponent, ZChipComponent, ZGridBindingDirective, ZGridPopupAnchorDirective, ZInputContainerComponent, ZInputParser, ZNumericParser, ZSchedulerToolBarComponent, ZSelectTranslationParser, ZTreeListOptions, ZbuttonsComponent, ZcardComponent, ZchartComponent, ZcheckboxComponent, ZcodeeditorComponent, ZdaterangeComponent, ZdatetimeComponent, ZdivComponent, ZformComponent, ZformcontrolComponent, ZgaugeComponent, ZgridComponent, ZgridContainerComponent, ZimgComponent, ZkcardComponent, ZlabelComponent, ZloopComponent, ZmfbComponent, ZmodalComponent, ZmodalMobileComponent, ZnumericComponent, ZpostselectinputComponent, ZprogressbarComponent, ZquerybuilderComponent, ZreportComponent, ZschedulerComponent, ZselectmultipleComponent, ZtabComponent, ZtextComponent, ZtextareaComponent, ZtexteditorComponent, ZtreeComponent, ZtreelistComponent, ZtrendcardComponent, ZudfComponent, ZunknownComponent, ZuploadComponent, ZworkflowbuttonsComponent, refreshGrid, toQueryRule };
 //# sourceMappingURL=mmhglobal-dynamicform.mjs.map