@stemy/ngx-dynamic-form 13.2.4 → 13.2.6

package/fesm2020/stemy-ngx-dynamic-form.mjs

@@ -1,6 +1,6 @@
 import * as i1 from '@ng-dynamic-forms/core';
-import { DynamicInputControlModel, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, serializable, DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicCheckboxModel, DynamicDatePickerModel, DynamicFormGroupModel, DynamicInputModel, DynamicTextAreaModel, DynamicFileUploadModel, DynamicFormService as DynamicFormService$1, DynamicFormValueControlModel, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
-export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicDatePickerModel, DynamicFileUploadModel, DynamicFormControlComponent, DynamicFormGroupModel, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
+import { DynamicInputControlModel, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, serializable, DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormGroupModel as DynamicFormGroupModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicCheckboxModel, DynamicDatePickerModel, DynamicInputModel, DynamicTextAreaModel, DynamicFileUploadModel, DynamicFormService as DynamicFormService$1, DynamicFormValueControlModel, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
+export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicDatePickerModel, DynamicFileUploadModel, DynamicFormControlComponent, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import * as i2 from '@stemy/ngx-utils';
 import { ObjectUtils, TimerUtils, StringUtils, OpenApiService, TOASTER_SERVICE, ObservableUtils, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
 import { __decorate } from 'tslib';
@@ -148,6 +148,31 @@ class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
     }
 }
 
+class DynamicFormGroupModel extends DynamicFormGroupModel$1 {
+    constructor(config, layout) {
+        super(config, layout);
+        const controls = [...config.group];
+        const groups = [];
+        const sets = config.fieldSets || [];
+        for (const fs of sets) {
+            const fields = [];
+            for (const f of fs.fields) {
+                const ix = controls.findIndex(c => c.id === f);
+                if (ix < 0)
+                    continue;
+                fields.push(controls.splice(ix, 1)[0]);
+            }
+            if (fields.length === 0)
+                continue;
+            groups.push({ id: fs.id, legend: fs.legend, fields });
+        }
+        if (controls.length > 0) {
+            groups.unshift({ id: "root-controls", legend: config.legend, fields: controls });
+        }
+        this.groups = groups;
+    }
+}
+
 const ignoredKeys = ["disabled", "label", "value", "classes"];
 class DynamicFormOption extends DynamicFormOption$1 {
     constructor(config) {
@@ -429,11 +454,13 @@ class DynamicFormService extends DynamicFormService$1 {
         return this.api.language;
     }
     patchGroup(value, formModel, formGroup) {
+        value = ObjectUtils.copy(value);
         this.patchValueRecursive(value, formModel, formGroup);
-        formGroup.patchValue(ObjectUtils.copy(value));
+        formGroup.patchValue(value);
         this.detectChanges();
     }
     patchForm(value, component) {
+        value = ObjectUtils.copy(value);
         this.patchValueRecursive(value, component.model, component.group);
         component.group.patchValue(value);
         this.detectChanges(component);
@@ -451,11 +478,9 @@ class DynamicFormService extends DynamicFormService$1 {
     patchValueRecursive(value, formModel, formGroup) {
         if (!value)
             return;
-        Object.keys(value).forEach(key => {
-            const subModel = this.findModelById(key, formModel);
+        formModel?.forEach(subModel => {
+            const key = subModel.id;
             const subValue = value[key];
-            if (!subModel)
-                return;
             const subControl = this.findControlByModel(subModel, formGroup);
             if (subModel instanceof DynamicSelectModel && ObjectUtils.isObject(subValue)) {
                 value[key] = subValue.id || subValue._id || subValue;
@@ -510,16 +535,16 @@ class DynamicFormService extends DynamicFormService$1 {
                 result[subModel.id] = resArray;
                 continue;
             }
-            if (subModel instanceof DynamicFormGroupModel) {
-                result[subModel.id] = await this.serializeRecursive(subModel.group, subControl);
-                continue;
-            }
             if (subModel instanceof DynamicInputModel && !ObjectUtils.isNullOrUndefined(subControl.value)) {
                 result[subModel.id] = subModel.inputType == "number"
                     ? parseFloat((`${subControl.value}` || "0").replace(/,/gi, ".")) ?? null
                     : subControl.value;
                 continue;
             }
+            if (subModel instanceof DynamicFormGroupModel) {
+                result[subModel.id] = await this.serializeRecursive(subModel.group, subControl);
+                continue;
+            }
             result[subModel.id] = subControl.value;
         }
         return result;
@@ -589,8 +614,12 @@ class DynamicFormService extends DynamicFormService$1 {
         return isNaN(date) ? new Date() : date;
     }
     async getFormModelForSchema(name, customizeModel) {
+        return (await this.getFormGroupModelForSchema(name, customizeModel)).group;
+    }
+    async getFormGroupModelForSchema(name, customizeModel) {
         this.api.cache = {};
         this.schemas = await this.openApi.getSchemas();
+        const fieldSets = [];
         const customizeModels = async (property, schema, modelType, config) => {
             const model = new modelType(config);
             if (model instanceof DynamicFormValueControlModel) {
@@ -608,13 +637,12 @@ class DynamicFormService extends DynamicFormService$1 {
             return Array.isArray(res) ? res : [res];
         };
         const schema = this.schemas[name];
-        const controls = await this.getFormModelForSchemaDef(schema, customizeModels);
-        // Check if we have controls to customize
-        if (!controls || controls.length == 0) {
-            return [];
-        }
-        // If we have then lets create a root wrapper that contains them
-        const config = { id: "root", group: [...controls] };
+        const controls = await this.getFormModelForSchemaDef(schema, fieldSets, customizeModels);
+        const config = {
+            id: "root",
+            group: [...controls],
+            fieldSets
+        };
         const root = await customizeModels({
             id: "root",
             type: "object",
@@ -624,23 +652,36 @@ class DynamicFormService extends DynamicFormService$1 {
         if (Array.isArray(root)) {
             controls.length = 0;
             for (const model of root) {
-                if (model instanceof DynamicFormGroupModel) {
-                    controls.push(...model.group);
+                if (model instanceof DynamicFormGroupModel && model.id === "root") {
+                    return model;
                 }
                 else {
                     controls.push(model);
                 }
             }
         }
-        return controls.filter(t => null !== t);
+        return new DynamicFormGroupModel({
+            ...config,
+            group: controls
+        });
     }
-    async getFormModelForSchemaDef(schema, customizeModels) {
+    async getFormModelForSchemaDef(schema, fieldSets, customizeModels) {
         if (!schema)
             return [];
         const keys = Object.keys(schema.properties || {});
         const controls = [];
         for (const p of keys) {
             const property = schema.properties[p];
+            const fsName = property.hidden ? null : String(property.fieldSet || "");
+            if (fsName) {
+                const fs = fieldSets.find(t => t.id === fsName);
+                if (fs) {
+                    fs.fields.push(p);
+                }
+                else {
+                    fieldSets.push({ id: fsName, legend: `legend.${fsName}`, fields: [p] });
+                }
+            }
             const models = await this.getFormControlModels(property, schema, customizeModels);
             controls.push(...models);
         }
@@ -722,8 +763,9 @@ class DynamicFormService extends DynamicFormService$1 {
         };
     }
     async getFormArrayConfig(property, schema, customizeModels) {
+        const fieldSets = [];
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, customizeModels)));
+        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, customizeModels)));
         return Object.assign(this.getFormControlConfig(property, schema), {
             groupFactory: () => mergeFormModels(ObjectUtils.copy(subModels)),
             initialCount: property.initialCount || 0,
@@ -738,9 +780,11 @@ class DynamicFormService extends DynamicFormService$1 {
         });
     }
     async getFormGroupConfig(property, schema, customizeModels) {
+        const fieldSets = [];
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, customizeModels)));
+        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, customizeModels)));
         return Object.assign(this.getFormControlConfig(property, schema), {
+            fieldSets,
             group: mergeFormModels(subModels)
         });
     }
@@ -1143,6 +1187,12 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
                 this.onValueChange.emit({ ...ev, form: this });
             }));
         }
+        if (changes.groupModel) {
+            this.model = this.groupModel?.group;
+        }
+        if (changes.model) {
+            this.groupModel = new DynamicFormGroupModel({ id: "root", group: this.model });
+        }
     }
     ngAfterViewInit() {
         this.subscription = ObservableUtils.multiSubscription(ObservableUtils.subscribe({
@@ -1221,7 +1271,7 @@ class DynamicBaseFormComponent extends DynamicFormComponent {
     }
 }
 DynamicBaseFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormComponent, deps: [{ token: DynamicFormService }, { token: EventsService }, { token: i0.ChangeDetectorRef }, { token: i1.DynamicFormComponentService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormComponent, selector: "dynamic-base-form", inputs: { group: "group", model: "model", layout: "layout", labelPrefix: "labelPrefix", getComponentType: "getComponentType" }, outputs: { blur: "blur", change: "change", focus: "focus", onValueChange: "onValueChange", onStatusChange: "onStatusChange", onSubmit: "onSubmit", onDetectChanges: "onDetectChanges" }, queries: [{ propertyName: "contentTemplates", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "viewTemplates", predicate: DynamicTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default });
+DynamicBaseFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: DynamicBaseFormComponent, selector: "dynamic-base-form", inputs: { group: "group", groupModel: "groupModel", model: "model", layout: "layout", labelPrefix: "labelPrefix", getComponentType: "getComponentType" }, outputs: { blur: "blur", change: "change", focus: "focus", onValueChange: "onValueChange", onStatusChange: "onStatusChange", onSubmit: "onSubmit", onDetectChanges: "onDetectChanges" }, queries: [{ propertyName: "contentTemplates", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "viewTemplates", predicate: DynamicTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: DynamicBaseFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -1237,6 +1287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                     args: [EventsService]
                 }] }, { type: i0.ChangeDetectorRef }, { type: i1.DynamicFormComponentService }]; }, propDecorators: { group: [{
                 type: Input
+            }], groupModel: [{
+                type: Input
             }], model: [{
                 type: Input
             }], layout: [{
@@ -1429,7 +1481,7 @@ class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
         const parts = collectPathAble(model, p => p.id);
         if (parts.length == 0)
             return "";
-        if (model instanceof DynamicFormGroupModel) {
+        if (model instanceof DynamicFormGroupModel$1) {
             return `form-group-${parts.join("-")}`;
         }
         return `form-control-${parts.join("-")}`;
@@ -1783,5 +1835,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, DynamicEditorModel, DynamicFormArrayGroupModel, DynamicFormArrayModel, DynamicFormOption, DynamicFormService, DynamicSelectModel, EDITOR_FORMATS, FormSelectSubject, FormSubject, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, createFormArray, createFormCheckbox, createFormDate, createFormEditor, createFormFile, createFormGroup, createFormInput, createFormSelect, createFormTextarea, mergeFormModels, replaceSpecialChars, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation };
+export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, DynamicEditorModel, DynamicFormArrayGroupModel, DynamicFormArrayModel, DynamicFormGroupModel, DynamicFormOption, DynamicFormService, DynamicSelectModel, EDITOR_FORMATS, FormSelectSubject, FormSubject, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, createFormArray, createFormCheckbox, createFormDate, createFormEditor, createFormFile, createFormGroup, createFormInput, createFormSelect, createFormTextarea, mergeFormModels, replaceSpecialChars, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map