@stemy/ngx-dynamic-form 19.6.8 → 19.7.0

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

@@ -11,6 +11,8 @@ import * as i3 from '@ngx-formly/core';
 import { FieldType, ɵobserve as _observe, FieldArrayType, FieldWrapper, provideFormlyConfig, provideFormlyCore, FormlyModule } from '@ngx-formly/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i5 from '@ngx-formly/core/select';
+import { FormlySelectModule } from '@ngx-formly/core/select';
 
 // --- Basic frm constants ---
 const FORM_ROOT_ID = "__root";
@@ -35,10 +37,12 @@ function customizeFormField(...providers) {
 function defineFormControl(target, propertyKey, cb) {
     const fields = ReflectUtils.getMetadata("dynamicFormFields", target) || new Set();
     const existing = ReflectUtils.getMetadata("dynamicFormField", target, propertyKey);
-    const builder = !ObjectUtils.isFunction(existing) ? cb : ((fb, opts, path) => {
-        const data = existing(fb, opts, path);
-        return ObjectUtils.assign(data || {}, cb(fb, opts, path) || {});
-    });
+    const builder = (fb, opts, path) => {
+        const data = ObjectUtils.isFunction(existing) ? existing(fb, opts, path) : {
+            priority: Number.MAX_SAFE_INTEGER
+        };
+        return ObjectUtils.assign(data, cb(fb, opts, path) || {});
+    };
     fields.add(propertyKey);
     ReflectUtils.defineMetadata("dynamicFormField", builder, target, propertyKey);
     ReflectUtils.defineMetadata("dynamicFormFields", fields, target);
@@ -426,7 +430,7 @@ async function toWrapOptions(customizeOrOptions, injector, schema, errorMsg) {
         throw new Error(errorMsg);
     }
     if (customizeOrOptions instanceof ConfigForSchemaWrap) {
-        return customizeOrOptions;
+        return customizeOrOptions.forSchema(schema);
     }
     let schemaOptions = customizeOrOptions;
     if (!ObjectUtils.isObject(schemaOptions)) {
@@ -524,48 +528,48 @@ class DynamicFormBuilderService {
         }, data, parent, options);
     }
     createFieldSets(fields, parent, options) {
-        const others = [];
+        const result = [];
         const groups = {};
-        fields = fields.filter(f => {
+        fields = Array.from(fields || [])
+            .sort((a, b) => a.priority - b.priority);
+        fields.forEach(f => {
             if (Array.isArray(f.fieldGroup) && Array.isArray(f.wrappers) && f.wrappers[0] === "form-fieldset") {
                 // This field is an already existing set
                 groups[f.id] = f.fieldGroup;
-                return false;
             }
-            return true;
         });
         for (const field of fields) {
             const fsName = String(field.fieldSet || "");
             // If we have a fieldset name defined, then push the property fields into a group
             if (fsName) {
-                const fsId = !parent?.path ? fsName : `${parent.path}.${fsName}`;
-                const group = groups[fsId] || [];
-                groups[fsId] = group;
-                group.push(field);
+                const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
+                let fieldGroup = groups[id];
+                if (!fieldGroup) {
+                    fieldGroup = [];
+                    const fieldSet = {
+                        id,
+                        parent,
+                        fieldGroup,
+                        wrappers: ["form-fieldset"],
+                        props: {
+                            label: this.getLabel(fsName, fsName, parent, options),
+                            hidden: false,
+                            className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
+                        },
+                        hooks: {},
+                        expressions: {}
+                    };
+                    this.setExpressions(fieldSet, options);
+                    groups[id] = fieldGroup;
+                    result.push(fieldSet);
+                }
+                fieldGroup.push(field);
                 continue;
             }
-            // Otherwise, push the fields to the others
-            others.push(field);
+            // Otherwise just push to result
+            result.push(field);
         }
-        // Create a field-set wrapper for each group and concat the other fields to the end
-        return Object.keys(groups).map(id => {
-            const key = id.split(".").pop();
-            const fieldSet = {
-                id,
-                parent,
-                fieldGroup: groups[id],
-                wrappers: ["form-fieldset"],
-                props: {
-                    label: this.getLabel(key, key, parent, options),
-                    hidden: false,
-                    className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
-                },
-                hooks: {},
-                expressions: {}
-            };
-            this.setExpressions(fieldSet, options);
-            return fieldSet;
-        }).concat(others);
+        return result;
     }
     createFormInput(key, data, parent, options) {
         data = data || {};
@@ -608,9 +612,11 @@ class DynamicFormBuilderService {
     createFormSelect(key, data, parent, options) {
         data = data || {};
         const type = `${data.type || "select"}`;
-        const field = this.createFormField(key, type === "radio" ? type : "select", data, {
+        const fieldType = type === "radio" ? type : (data.strict === false ? "chips" : "select");
+        const field = this.createFormField(key, fieldType, data, {
             type,
             multiple: data.multiple === true,
+            strict: data.strict !== false,
             allowEmpty: data.allowEmpty === true,
             groupBy: data.groupBy,
             invert: data.invert === true
@@ -762,10 +768,11 @@ class DynamicFormBuilderService {
         const disabled = ReflectUtils.resolve(data.disabled, this.injector);
         const hidden = ReflectUtils.resolve(data.hidden, this.injector);
         const field = {
-            key,
-            wrappers,
-            type: data.componentType || type,
+            serializer: data.serializer,
+            serialize: data.serialize || false,
             fieldSet: String(data.fieldSet || ""),
+            priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
+            type: data.componentType || type,
             resetOnHide: false,
             validators: {},
             validation: {},
@@ -789,8 +796,6 @@ class DynamicFormBuilderService {
             },
             hooks: {},
             expressions: {
-                serializer: () => data.serializer,
-                serialize: () => data.serialize,
                 "props.hideRequiredMarker": target => target.type === "checkbox",
                 "props.required": target => !!target.validators?.required,
                 "props.disabled": target => {
@@ -801,7 +806,9 @@ class DynamicFormBuilderService {
                     const hidden = target.props?.__hidden;
                     return !!hidden(target, this.injector);
                 }
-            }
+            },
+            key,
+            wrappers,
         };
         // Parent object will be available for customizers as a property, until it gets redefined by formly
         Object.defineProperty(field, "parent", {
@@ -964,6 +971,7 @@ class DynamicFormSchemaService {
             layout: property.layout,
             serialize: property.serialize === true,
             fieldSet: property.fieldSet,
+            priority: property.priority,
             componentType: property.componentType,
             wrappers: property.wrappers,
             props: property,
@@ -1079,6 +1087,7 @@ class DynamicFormSchemaService {
             options: field => this.getFormSelectOptions($enum, property, options, field),
             type: property.format || "select",
             multiple: property.type == "array",
+            strict: property.strict,
             groupBy: property.groupBy,
             invert: property.invert,
             allowEmpty: property.allowEmpty
@@ -1703,11 +1712,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DynamicFormChipsComponent extends DynamicFieldType {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["testId", "value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "strict", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
         }] });
 
 class DynamicFormUploadComponent extends DynamicFieldType {
@@ -1818,20 +1827,24 @@ class NgxDynamicFormModule {
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
+            FormlyModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule] });
+            FormlyModule,
+            FormlySelectModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, providers: [
             ...pipes
         ], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule, FormsModule,
+            FormlyModule,
+            FormlySelectModule, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule] });
+            FormlyModule,
+            FormlySelectModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
             type: NgModule,
@@ -1846,7 +1859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgxUtilsModule,
-                        FormlyModule
+                        FormlyModule,
+                        FormlySelectModule
                     ],
                     exports: [
                         ...components,
@@ -1855,7 +1869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgxUtilsModule,
-                        FormlyModule
+                        FormlyModule,
+                        FormlySelectModule
                     ],
                     providers: [
                         ...pipes