mmhglobal-dynamicform 2.9.1 → 2.10.0

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) {
@@ -13203,6 +13203,112 @@ 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 }]; } });
+
 /********** Angular **********/
 class MmhglobalDynamicformModule {
 }
@@ -13281,7 +13387,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         DateKendoFormatParser,
         DateIonicFormatParser,
         DateIonicMinMaxParser,
-        SfquerybuilderComponent], imports: [IonicModule,
+        SfquerybuilderComponent,
+        ZloopComponent], imports: [IonicModule,
         IonicSelectableModule,
         CommonModule,
         RouterModule,
@@ -13397,7 +13504,8 @@ MmhglobalDynamicformModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         DateKendoFormatParser,
         DateIonicFormatParser,
         DateIonicMinMaxParser,
-        SfquerybuilderComponent] });
+        SfquerybuilderComponent,
+        ZloopComponent] });
 MmhglobalDynamicformModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MmhglobalDynamicformModule, providers: [
         ModalService
     ], imports: [[
@@ -13524,7 +13632,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DateKendoFormatParser,
                         DateIonicFormatParser,
                         DateIonicMinMaxParser,
-                        SfquerybuilderComponent
+                        SfquerybuilderComponent,
+                        ZloopComponent
                     ],
                     imports: [
                         IonicModule,
@@ -13646,7 +13755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DateKendoFormatParser,
                         DateIonicFormatParser,
                         DateIonicMinMaxParser,
-                        SfquerybuilderComponent
+                        SfquerybuilderComponent,
+                        ZloopComponent
                     ],
                     providers: [
                         ModalService
@@ -13663,5 +13773,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, 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