@stemy/ngx-dynamic-form 19.6.9 → 19.7.1

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)) {
@@ -526,6 +530,8 @@ class DynamicFormBuilderService {
     createFieldSets(fields, parent, options) {
         const result = [];
         const groups = {};
+        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
@@ -606,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
@@ -760,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: {},
@@ -787,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 => {
@@ -799,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", {
@@ -811,23 +820,25 @@ class DynamicFormBuilderService {
         this.setExpressions(field, options);
         return field;
     }
+    shouldDisplay(field) {
+        const display = field.props?.hidden !== true;
+        if (Array.isArray(field.fieldGroup) && field.fieldGroup.length) {
+            return display && field.fieldGroup.some(f => this.shouldDisplay(f));
+        }
+        return display;
+    }
+    isValid(field) {
+        const control = field.formControl;
+        const valid = field.key && control ? (control.disabled || control.valid) !== false : true;
+        if (Array.isArray(field.fieldGroup) && field.fieldGroup.length) {
+            return valid && field.fieldGroup.every(f => this.isValid(f));
+        }
+        return valid;
+    }
     setExpressions(field, options) {
         const expressions = {
-            display: target => {
-                const display = target.props?.hidden !== true;
-                if (Array.isArray(target.fieldGroup) && target.fieldGroup.length) {
-                    return display && target.fieldGroup.some(f => f.display);
-                }
-                return display;
-            },
-            valid: target => {
-                const control = target.formControl;
-                const valid = target.key && control ? control.disabled || control.valid : true;
-                if (Array.isArray(target.fieldGroup) && target.fieldGroup.length) {
-                    return valid && target.fieldGroup.every(f => f.valid);
-                }
-                return valid;
-            },
+            display: target => this.shouldDisplay(target),
+            valid: target => this.isValid(target),
             className: (target) => {
                 if (!target.display) {
                     return `dynamic-form-field dynamic-form-hidden`;
@@ -962,6 +973,7 @@ class DynamicFormSchemaService {
             layout: property.layout,
             serialize: property.serialize === true,
             fieldSet: property.fieldSet,
+            priority: property.priority,
             componentType: property.componentType,
             wrappers: property.wrappers,
             props: property,
@@ -1077,6 +1089,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
@@ -1701,11 +1714,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 {
@@ -1749,11 +1762,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DynamicFormGroupComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
         }] });
 
 // --- Components ---
@@ -1816,20 +1829,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,
@@ -1844,7 +1861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgxUtilsModule,
-                        FormlyModule
+                        FormlyModule,
+                        FormlySelectModule
                     ],
                     exports: [
                         ...components,
@@ -1853,7 +1871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgxUtilsModule,
-                        FormlyModule
+                        FormlyModule,
+                        FormlySelectModule
                     ],
                     providers: [
                         ...pipes