@stemy/ngx-dynamic-form 19.8.13 → 19.8.15

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

@@ -1,6 +1,6 @@
 import * as i2 from '@stemy/ngx-utils';
 import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, FactoryDependencies, ForbiddenZone, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
-import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject } from 'rxjs';
+import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, filter } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
@@ -256,6 +256,9 @@ function setFieldProps(field, values) {
 function setFieldProp(field, prop, value) {
     return setFieldProps(field, { [prop]: value });
 }
+function setFieldSerialize(field, serialize = true) {
+    field.serialize = ObjectUtils.isFunction(serialize) ? serialize : () => serialize;
+}
 function setFieldHidden(field, hidden = true) {
     setFieldProp(field, "__hidden", ObjectUtils.isFunction(hidden) ? hidden : () => hidden);
 }
@@ -541,11 +544,15 @@ async function toWrapOptions(customizeOrOptions, injector, schema, errorMsg) {
     let schemaOptions = customizeOrOptions;
     if (!ObjectUtils.isObject(schemaOptions)) {
         schemaOptions = {
+            context: {},
             fieldCustomizer: customizeOrOptions
         };
     }
     return new ConfigForSchemaWrap(schemaOptions, "wrap", injector, schema);
 }
+function toStringArray(value) {
+    return (Array.isArray(value) ? value : String(value || "").split(",")).filter(ObjectUtils.isStringWithValue);
+}
 function handleConfigs(configs) {
     return Array.isArray(configs) ? configs : [configs];
 }
@@ -838,8 +845,8 @@ class DynamicFormBuilderService {
                 if (lang && translation) {
                     // Use translation component if the sub items are correct
                     array.type = "translation";
-                    lang.serialize = () => true;
                     setFieldHidden(lang);
+                    setFieldSerialize(lang);
                     setFieldProp(translation, "label", "");
                 }
                 this.setExpressions(array.fieldArray, options);
@@ -939,6 +946,7 @@ class DynamicFormBuilderService {
         const field = {
             ...this.createFormSerializer(key, data),
             fieldSet: String(data.fieldSet || ""),
+            purposes: toStringArray(data.purposes),
             priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
             wrappers: wrappers.filter(ObjectUtils.isDefined),
             type: data.componentType || type,
@@ -1145,6 +1153,7 @@ class DynamicFormSchemaService {
             layout: property.layout,
             serialize: property.serialize,
             fieldSet: property.fieldSet,
+            purposes: property.purposes || property.purpose,
             priority: property.priority,
             componentType: property.componentType,
             wrappers: wrappers.filter(ObjectUtils.isStringWithValue),
@@ -1508,24 +1517,26 @@ class DynamicFormService {
             group.updateValueAndValidity();
         });
     }
-    async serializeForm(form, validate = true) {
+    async serializeForm(form, validate = true, ...purposes) {
         const fields = untracked(() => form.config());
         if (!fields)
             return null;
         if (validate) {
             await this.validateForm(form);
         }
-        return this.serialize(fields);
+        return this.serialize(fields, purposes);
     }
-    async serialize(fields) {
+    async serialize(fields, purposes = []) {
         const result = {};
+        purposes = purposes ?? [];
         if (!fields)
             return result;
         for (const field of fields) {
             const serializer = field.serializer;
             const key = `${field.key}`;
             const shouldSerialize = field.serialize?.(field, this.injector) ?? field.props?.hidden !== true;
-            if (!shouldSerialize) {
+            const includes = purposes.length > 0 ? Array.prototype.includes.bind(field.purposes ?? []) : null;
+            if (!shouldSerialize || (includes && !includes(purposes))) {
                 continue;
             }
             if (ObjectUtils.isFunction(serializer)) {
@@ -1534,7 +1545,7 @@ class DynamicFormService {
             }
             const control = field.formControl;
             if (field.fieldGroup) {
-                const group = await this.serialize(field.fieldGroup);
+                const group = await this.serialize(field.fieldGroup, purposes);
                 if (field.key && !field.asFieldSet) {
                     result[key] = !field.fieldArray ? group : Object.values(group);
                     continue;
@@ -1778,6 +1789,8 @@ class DynamicFormComponent {
     data = input({});
     fields = input(null);
     fieldChanges = new Subject();
+    init = this.fieldChanges.pipe(first());
+    valueChanges = this.fieldChanges.pipe(filter(c => c.type === "valueChanges"));
     language = toSignal(this.events.languageChanged, {
         initialValue: this.languages.currentLanguage
     });
@@ -1814,7 +1827,9 @@ class DynamicFormComponent {
     });
     status = computed(() => this.status$.value());
     onSubmit = output();
-    onChanges = outputFromObservable(this.fieldChanges);
+    onFieldChanges = outputFromObservable(this.fieldChanges);
+    onValueChanges = outputFromObservable(this.valueChanges);
+    onInit = outputFromObservable(this.init);
     options = {
         fieldChanges: this.fieldChanges,
         formState: {
@@ -1839,8 +1854,8 @@ class DynamicFormComponent {
     reset() {
         this.options?.resetModel?.();
     }
-    serialize(validate = true) {
-        return this.forms.serializeForm(this, validate);
+    serialize(validate = true, ...purposes) {
+        return this.forms.serializeForm(this, validate, ...purposes);
     }
     getField(path) {
         const config = untracked(() => this.config());
@@ -1851,7 +1866,7 @@ class DynamicFormComponent {
         return field?.formControl ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onChanges: "onChanges" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onFieldChanges: "onFieldChanges", onValueChanges: "onValueChanges", onInit: "onInit" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -2121,5 +2136,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldValue, translationValidation };
+export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map