@stemy/ngx-dynamic-form 19.8.10 → 19.8.12

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

@@ -48,10 +48,11 @@ function defineFormControl(target, propertyKey, cb) {
     ReflectUtils.defineMetadata("dynamicFormField", builder, target, propertyKey);
     ReflectUtils.defineMetadata("dynamicFormFields", fields, target);
 }
-function FormSerializable(data) {
-    return (target, key) => {
-        defineFormControl(target, key, (fb) => fb.createFormSerializer(key, data));
-    };
+function defineFormFieldSet(target, data) {
+    const fieldSets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
+    const existing = fieldSets.get(data.id) || data;
+    fieldSets.set(data.id, Object.assign({}, existing, data));
+    ReflectUtils.defineMetadata("dynamicFormFieldSets", fieldSets, target);
 }
 function FormInput(data) {
     data = data || {};
@@ -83,10 +84,6 @@ function FormUpload(data) {
         defineFormControl(target, key, (fb, path, options) => fb.createFormUpload(key, data, path, options));
     };
 }
-function FormFile(data) {
-    console.warn(`@FormFile decorator is deprecated, use @FormUpload instead`);
-    return FormUpload(data);
-}
 function FormStatic(data) {
     data = data || {};
     return (target, key) => {
@@ -110,138 +107,16 @@ function FormArray(itemType, data) {
         });
     };
 }
-function FormModel(data) {
-    console.warn(`@FormModel decorator is deprecated, use @FormGroup instead`);
-    return FormGroup(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 FormSerializable(data) {
+    return (target, key) => {
+        defineFormControl(target, key, (fb) => fb.createFormSerializer(key, data));
     };
 }
-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 FormFieldSet(data) {
+    return (target) => {
+        defineFormFieldSet(target, data);
     };
 }
-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);
@@ -402,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 () => {
@@ -476,6 +499,9 @@ class ConfigForSchemaWrap {
     get labelCustomizer() {
         return this.opts.labelCustomizer;
     }
+    get legacyLabels() {
+        return this.opts.legacyLabels;
+    }
     get testId() {
         return this.opts.testId;
     }
@@ -584,9 +610,11 @@ class DynamicFormBuilderService {
         this.events.languageChanged.subscribe(value => lang.next(value));
         this.language = lang;
     }
-    resolveFormFields(target, parent, options) {
-        const prototype = target?.prototype || {};
-        const fields = ReflectUtils.getMetadata("dynamicFormFields", target?.prototype || {}) || new Set();
+    resolveFormFields(type, parent, options) {
+        const target = type || { prototype: null };
+        const prototype = target.prototype || target;
+        const fields = ReflectUtils.getMetadata("dynamicFormFields", prototype) || new Set();
+        const sets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
         const result = [];
         for (const key of fields) {
             const builder = ReflectUtils.getMetadata("dynamicFormField", prototype, key);
@@ -595,25 +623,25 @@ class DynamicFormBuilderService {
                 result.push(field);
             }
         }
-        return this.createFieldSets(result, parent, options);
+        return this.createFieldSets(result, parent, options, Array.from(sets.values()));
     }
-    resolveFormGroup(key, target, data, parent = null, options = {}) {
+    resolveFormGroup(key, target, data, parent = null, options) {
         return this.createFormGroup(key, sp => this.resolveFormFields(target, sp, options), data, parent, options);
     }
-    resolveFormArray(key, itemType, data, parent = null, options = {}) {
+    resolveFormArray(key, itemType, data, parent = null, options) {
         return this.createFormArray(key, sp => {
             return typeof itemType === "function" ? this.resolveFormFields(itemType, sp, options) : this.createFormInput("", typeof itemType === "string" ? { type: `${itemType}` } : itemType, sp, options);
         }, data, parent, options);
     }
-    createFieldSets(fields, parent, options) {
+    createFieldSets(fields, parent, options, sets = []) {
         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") {
+        fields.forEach(field => {
+            if (this.isFieldset(field)) {
                 // This field is an already existing set
-                groups[f.id] = f.fieldGroup;
+                groups[field.id] = field.fieldGroup;
             }
         });
         for (const field of fields) {
@@ -621,6 +649,7 @@ class DynamicFormBuilderService {
             // If we have a fieldset name defined, then push the property fields into a group
             if (fsName) {
                 const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
+                const set = sets.find(s => s.id === fsName);
                 let fieldGroup = groups[id];
                 if (!fieldGroup) {
                     fieldGroup = [];
@@ -630,9 +659,10 @@ class DynamicFormBuilderService {
                         fieldGroup,
                         wrappers: ["form-fieldset"],
                         props: {
-                            label: this.getLabel(fsName, fsName, parent, options),
+                            label: this.getLabel(fsName, null, parent, options, "title"),
                             hidden: false,
-                            className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
+                            classes: set?.classes,
+                            layout: set?.layout,
                         },
                         hooks: {},
                         expressions: {}
@@ -646,13 +676,14 @@ class DynamicFormBuilderService {
             }
             else if (field.asFieldSet && !groups[field.id]) {
                 const fsName = String(field.key);
-                const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
-                field.id = id;
+                const set = sets.find(s => s.id === fsName);
+                field.id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
                 field.wrappers = ["form-fieldset"];
                 field.props = {
-                    label: this.getLabel(fsName, fsName, parent, options),
+                    label: this.getLabel(fsName, null, parent, options, "title"),
                     hidden: false,
-                    className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
+                    classes: set?.classes,
+                    layout: set?.layout,
                 };
                 field.expressions = {};
                 this.setExpressions(field, options);
@@ -874,9 +905,21 @@ class DynamicFormBuilderService {
         control.setValue(field.defaultValue);
         return options;
     }
-    getLabel(key, label, parent, options) {
+    isFieldset(field) {
+        return Array.isArray(field.fieldGroup) && Array.isArray(field.wrappers) && field.wrappers[0] === "form-fieldset";
+    }
+    getLabel(key, label, parent, options, legacyPrefix = "") {
+        options = options || { labelPrefix: "" };
         const labelPrefix = !ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix;
-        const pathPrefix = `${parent?.props?.label || labelPrefix}`;
+        if (ObjectUtils.isFunction(options.labelCustomizer)) {
+            return options.labelCustomizer(key, label, parent, labelPrefix) || "";
+        }
+        // Exceptional case, to be able to have an "empty" label element in the HTML just to fill the space.
+        if (label === " ")
+            return "\u200B";
+        const pathPrefix = options.legacyLabels
+            ? String(legacyPrefix || labelPrefix)
+            : String(parent?.props?.label || labelPrefix);
         const labelItems = ObjectUtils.isString(label)
             ? (!label ? [] : [labelPrefix, label])
             : [pathPrefix, `${key || ""}`];
@@ -903,8 +946,7 @@ class DynamicFormBuilderService {
             props: {
                 ...(data.props || {}),
                 ...props,
-                label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
-                    ?? this.getLabel(key, data.label, parent, options),
+                label: this.getLabel(key, data.label, parent, options),
                 labelAlign: data.labelAlign === "after" ? "after" : "before",
                 description: data.description,
                 hideLabel: data.hideLabel === true,
@@ -926,8 +968,7 @@ class DynamicFormBuilderService {
                     return !!disabled(target, this.injector);
                 },
                 "props.hidden": target => {
-                    const hidden = target.props?.__hidden;
-                    return !!hidden(target, this.injector);
+                    return isFieldHidden(target);
                 }
             }
         };
@@ -941,13 +982,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;
@@ -958,7 +992,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) {
@@ -968,11 +1002,22 @@ class DynamicFormBuilderService {
                 if (className) {
                     return className;
                 }
-                const type = String(target.type || "group").replace("formly-", "");
-                const typeName = ObjectUtils.isConstructor(type)
-                    ? `${target.type.name}`.toLowerCase().replace("component", "")
-                    : type;
-                return [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${typeName}`].concat(Array.isArray(classes) ? classes : [classes || ""], (Array.isArray(layout) ? layout : [layout || ""]).map(layout => `dynamic-form-layout-${layout}`)).filter(c => c?.length > 0).join(" ");
+                const idName = String(field.id || field.key || "").replace(/\./, "-");
+                let baseName = `dynamic-form-fieldset dynamic-form-fieldset-${idName}`;
+                if (!this.isFieldset(target)) {
+                    const type = String(target.type || "group").replace("formly-", "");
+                    const typeName = ObjectUtils.isConstructor(type)
+                        ? `${target.type.name}`.toLowerCase().replace("component", "")
+                        : type;
+                    baseName = `dynamic-form-field dynamic-form-field-${target.key} dynamic-form-${typeName}`;
+                }
+                const classesName = Array.isArray(classes) ? classes : [classes];
+                const layoutName = Array.isArray(layout) ? layout : [layout];
+                return [
+                    baseName,
+                    ...classesName,
+                    ...layoutName.map(l => !l ? null : `dynamic-form-layout-${l}`)
+                ].filter(ObjectUtils.isStringWithValue).join(" ");
             },
             path: target => {
                 const tp = target.parent;
@@ -982,7 +1027,7 @@ class DynamicFormBuilderService {
             },
             testId: target => {
                 const tp = target.parent;
-                const prefix = !tp?.testId ? options.testId || "" : tp.testId;
+                const prefix = !tp?.testId ? options?.testId || "" : tp.testId;
                 const key = !target.key ? `` : `-${target.key}`;
                 return !prefix ? String(target.key ?? "") : `${prefix}${key}`;
             }
@@ -1038,7 +1083,7 @@ class DynamicFormSchemaService {
             const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
             fields.push(...propFields);
         }
-        return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options);
+        return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
     }
     async getFormFieldsForProp(property, schema, options, parent) {
         const field = await this.getFormFieldForProp(property, options, parent);
@@ -1727,6 +1772,7 @@ class DynamicFormComponent {
     labelCustomizer = input(null);
     testId = input("");
     useTabs = input(false);
+    legacyLabels = input(false);
     data = input({});
     fields = input(null);
     fieldChanges = new Subject();
@@ -1740,11 +1786,14 @@ class DynamicFormComponent {
         const options = {
             labelPrefix: this.labelPrefix(),
             labelCustomizer: this.labelCustomizer(),
+            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,
@@ -1800,7 +1849,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 }, 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", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -1827,11 +1876,11 @@ class DynamicFormArrayComponent extends FieldArrayType {
         this.currentTab.set(Math.min(this.currentTab(), length - 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", 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            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { 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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { 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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-array", 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            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\n        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"] }]
         }] });
 
 class DynamicFormChipsComponent extends DynamicFieldType {
@@ -1924,29 +1973,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class DynamicFormFieldComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"props.label | translate | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"props.label | translate | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <label class=\"field-label\" [for]=\"id\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\n        </label>\n    }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n@if (props.labelAlign === \"after\") {\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
         }] });
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n" }]
         }] });
 
 class DynamicFormGroupComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { 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.19", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", 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            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\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: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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        <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n            <formly-validation-message\n                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\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 ---
@@ -2070,5 +2119,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, FormFile, FormGroup, FormInput, FormModel, 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