@stemy/ngx-dynamic-form 19.8.11 → 19.8.13

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

@@ -118,134 +118,6 @@ function FormFieldSet(data) {
     };
 }
 
-function validationMessage(errorKey) {
-    const key = `form.error.${errorKey}`;
-    return (_, field) => {
-        const injector = field.options.formState?.injector;
-        const language = injector?.get(LANGUAGE_SERVICE);
-        return !language ? key : language.getTranslationSync(key, field);
-    };
-}
-function withName(fn, name) {
-    fn.validatorName = name;
-    return fn;
-}
-function validateEach(each, cb, name) {
-    return withName((control) => {
-        const value = control.value;
-        return each ? Array.isArray(value) && value.every(cb) : cb(value);
-    }, name);
-}
-function addFieldValidators(field, validators) {
-    field.validators = field.validators || {};
-    const validation = field.validation || {};
-    const messages = validation.messages || {};
-    if (Array.isArray(validators)) {
-        validators.forEach((validator, ix) => {
-            const name = validator.validatorName || `validator_${ix}`;
-            field.validators[name] = validator;
-            messages[name] = validationMessage(name);
-        });
-    }
-    else if (validators) {
-        Object.keys(validators).forEach(name => {
-            field.validators[name] = validators[name];
-            messages[name] = validationMessage(name);
-        });
-    }
-    field.validation = {
-        ...validation,
-        messages
-    };
-}
-function removeFieldValidators(field, ...names) {
-    const validators = Object.assign({}, field.validators || {});
-    const validation = field.validation || {};
-    const messages = Object.assign({}, validation.messages || {});
-    names.forEach(name => {
-        delete validators[name];
-        delete messages[name];
-    });
-    field.validators = validators;
-    field.validation = {
-        ...validation,
-        messages
-    };
-}
-function jsonValidation() {
-    return withName((control) => {
-        const value = control.value;
-        if (!value)
-            return false;
-        try {
-            JSON.parse(value);
-            return true;
-        }
-        catch (e) {
-            return false;
-        }
-    }, "json");
-}
-function requiredValidation() {
-    return withName((control) => ObjectUtils.isString(control.value) ? control.value.length > 0 : ObjectUtils.isDefined(control.value), "required");
-}
-function translationValidation(langs = ["de", "en"]) {
-    return withName((control) => {
-        const value = control.value;
-        if (!value || value.length == 0)
-            return false;
-        return value.findIndex(t => langs.includes(t.lang) && !t.translation) < 0;
-    }, "translation");
-}
-function phoneValidation() {
-    return withName((control) => {
-        const value = control.value;
-        if (!value)
-            return true;
-        const phoneRegexp = /^\d{10,12}$/;
-        return phoneRegexp.test(value);
-    }, "phone");
-}
-function emailValidation() {
-    return withName((control) => {
-        const value = control.value;
-        if (!value)
-            return true;
-        const emailRegexp = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
-        return emailRegexp.test(value);
-    }, "email");
-}
-function arrayLengthValidation(min = 1, max = Number.MAX_SAFE_INTEGER) {
-    return withName((control) => {
-        const value = control.value;
-        return !Array.isArray(value) || (min <= value.length && value.length <= max);
-    }, "arrayLength");
-}
-function minLengthValidation(minLength, each) {
-    return validateEach(each, v => typeof v == "string" && v.length >= minLength, "minLength");
-}
-function maxLengthValidation(maxLength, each) {
-    return validateEach(each, v => typeof v == "string" && v.length <= maxLength, "maxLength");
-}
-function minValueValidation(min, each) {
-    return validateEach(each, v => {
-        if (min instanceof Date) {
-            const date = new Date(v);
-            return isNaN(date) || date >= min;
-        }
-        return v == null || v >= min;
-    }, "minValue");
-}
-function maxValueValidation(max, each) {
-    return validateEach(each, v => {
-        if (max instanceof Date) {
-            const date = new Date(v);
-            return isNaN(date) || date <= max;
-        }
-        return v == null || v <= max;
-    }, "maxValue");
-}
-
 function replaceSpecialChars(str, to = "-") {
     return `${str}`.replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
 }
@@ -405,10 +277,158 @@ function setFieldHooks(field, hooks) {
             : hooks[name];
     });
 }
+function isFieldVisible(field) {
+    let visible = true;
+    let current = field;
+    while (current && visible) {
+        const hiddenFn = current.props?.__hidden;
+        const injector = field.options?.formState?.injector;
+        visible = visible && (!injector || !hiddenFn?.(current, injector));
+        current = current.parent;
+    }
+    if (Array.isArray(field.fieldGroup) && field.fieldGroup.length) {
+        return visible && field.fieldGroup.some(f => isFieldVisible(f));
+    }
+    return visible;
+}
+function isFieldHidden(field) {
+    return !isFieldVisible(field);
+}
 const MIN_INPUT_NUM = -1999999999;
 const MAX_INPUT_NUM = 1999999999;
 const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
 
+function validationMessage(errorKey) {
+    const key = `form.error.${errorKey}`;
+    return (_, field) => {
+        const injector = field.options.formState?.injector;
+        const language = injector?.get(LANGUAGE_SERVICE);
+        return !language ? key : language.getTranslationSync(key, field);
+    };
+}
+function withName(fn, name) {
+    const mainFn = (control, field) => {
+        return isFieldHidden(field) || fn(control, field);
+    };
+    mainFn.validatorName = name;
+    return mainFn;
+}
+function validateEach(each, cb, name) {
+    return withName((control) => {
+        const value = control.value;
+        return each ? Array.isArray(value) && value.every(cb) : cb(value);
+    }, name);
+}
+function addFieldValidators(field, validators) {
+    field.validators = field.validators || {};
+    const validation = field.validation || {};
+    const messages = validation.messages || {};
+    if (Array.isArray(validators)) {
+        validators.forEach((validator, ix) => {
+            const name = validator.validatorName || `validator_${ix}`;
+            field.validators[name] = validator;
+            messages[name] = validationMessage(name);
+        });
+    }
+    else if (validators) {
+        Object.keys(validators).forEach(name => {
+            field.validators[name] = validators[name];
+            messages[name] = validationMessage(name);
+        });
+    }
+    field.validation = {
+        ...validation,
+        messages
+    };
+}
+function removeFieldValidators(field, ...names) {
+    const validators = Object.assign({}, field.validators || {});
+    const validation = field.validation || {};
+    const messages = Object.assign({}, validation.messages || {});
+    names.forEach(name => {
+        delete validators[name];
+        delete messages[name];
+    });
+    field.validators = validators;
+    field.validation = {
+        ...validation,
+        messages
+    };
+}
+function jsonValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return false;
+        try {
+            JSON.parse(value);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }, "json");
+}
+function requiredValidation() {
+    return withName((control) => ObjectUtils.isString(control.value) ? control.value.length > 0 : ObjectUtils.isDefined(control.value), "required");
+}
+function translationValidation(langs = ["de", "en"]) {
+    return withName((control) => {
+        const value = control.value;
+        if (!value || value.length == 0)
+            return false;
+        return value.findIndex(t => langs.includes(t.lang) && !t.translation) < 0;
+    }, "translation");
+}
+function phoneValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return true;
+        const phoneRegexp = /^\d{10,12}$/;
+        return phoneRegexp.test(value);
+    }, "phone");
+}
+function emailValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return true;
+        const emailRegexp = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
+        return emailRegexp.test(value);
+    }, "email");
+}
+function arrayLengthValidation(min = 1, max = Number.MAX_SAFE_INTEGER) {
+    return withName((control) => {
+        const value = control.value;
+        return !Array.isArray(value) || (min <= value.length && value.length <= max);
+    }, "arrayLength");
+}
+function minLengthValidation(minLength, each) {
+    return validateEach(each, v => typeof v == "string" && v.length >= minLength, "minLength");
+}
+function maxLengthValidation(maxLength, each) {
+    return validateEach(each, v => typeof v == "string" && v.length <= maxLength, "maxLength");
+}
+function minValueValidation(min, each) {
+    return validateEach(each, v => {
+        if (min instanceof Date) {
+            const date = new Date(v);
+            return isNaN(date) || date >= min;
+        }
+        return v == null || v >= min;
+    }, "minValue");
+}
+function maxValueValidation(max, each) {
+    return validateEach(each, v => {
+        if (max instanceof Date) {
+            const date = new Date(v);
+            return isNaN(date) || date <= max;
+        }
+        return v == null || v <= max;
+    }, "maxValue");
+}
+
 class ModelUtils {
     static getLanguages(language) {
         return async () => {
@@ -892,11 +912,13 @@ class DynamicFormBuilderService {
         options = options || { labelPrefix: "" };
         const labelPrefix = !ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix;
         if (ObjectUtils.isFunction(options.labelCustomizer)) {
-            return options.labelCustomizer(key, label, parent, labelPrefix) || "";
+            const customLabel = options.labelCustomizer(key, label, parent, labelPrefix);
+            if (ObjectUtils.isString(customLabel))
+                return customLabel;
         }
         // Exceptional case, to be able to have an "empty" label element in the HTML just to fill the space.
         if (label === " ")
-            return "\\s";
+            return "\u200B";
         const pathPrefix = options.legacyLabels
             ? String(legacyPrefix || labelPrefix)
             : String(parent?.props?.label || labelPrefix);
@@ -948,8 +970,7 @@ class DynamicFormBuilderService {
                     return !!disabled(target, this.injector);
                 },
                 "props.hidden": target => {
-                    const hidden = target.props?.__hidden;
-                    return !!hidden(target, this.injector);
+                    return isFieldHidden(target);
                 }
             }
         };
@@ -963,13 +984,6 @@ 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;
@@ -980,7 +994,7 @@ class DynamicFormBuilderService {
     }
     setExpressions(field, options) {
         const expressions = {
-            display: target => this.shouldDisplay(target),
+            display: target => isFieldVisible(target),
             valid: target => this.isValid(target),
             className: (target) => {
                 if (!target.display) {
@@ -1777,9 +1791,11 @@ class DynamicFormComponent {
             legacyLabels: this.legacyLabels(),
             testId: this.testId(),
         };
-        const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
         return [
-            this.builder.createFormGroup(null, () => fields, {
+            this.builder.createFormGroup(null, parent => {
+                const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, parent, options);
+                return this.builder.createFieldSets(fields, parent, options);
+            }, {
                 label: "",
                 useTabs: this.useTabs(),
                 hidden: false,
@@ -2105,5 +2121,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, 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, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map