@stemy/ngx-dynamic-form 19.9.22 → 19.9.24

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Inject, Injectable, untracked, input, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Optional, Pipe, Type, Component, Injector, output, ChangeDetectionStrategy, ViewEncapsulation, viewChild, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@stemy/ngx-utils';
-import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, ForbiddenZone, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
-import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, map, filter } from 'rxjs';
+import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, ForbiddenZone, SetUtils, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
+import { of, merge, map, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, filter } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { __decorate } from 'tslib';
 import * as i1 from '@angular/forms';
@@ -131,7 +131,10 @@ function replaceSpecialChars(str, to = "-") {
 function controlValues(control, timeout = 500) {
     const initial$ = of(control.value); // Emit immediately
     const changes$ = control.valueChanges.pipe(debounceTime(timeout));
-    return merge(initial$, changes$);
+    return merge(initial$, changes$).pipe(map(value => {
+        console.log(value, "why");
+        return value;
+    }));
 }
 /**
  * Creates a new observable that always starts with the controls current status.
@@ -289,8 +292,17 @@ function isFieldVisible(field) {
     let visible = true;
     let current = field;
     while (current && visible) {
+        // Discriminator based visibility
+        let parent = current.parent;
+        while (parent && !parent.key) {
+            parent = parent.parent;
+        }
+        const discriminator = parent?.discriminator;
+        const schema = !discriminator ? null : discriminator(parent.parent?.model || {});
+        visible = visible && (!schema || current.schemas.size === 0 || current.schemas.has(schema));
+        // Field based visibility
         const hiddenFn = current.props?.__hidden;
-        const injector = field.options?.formState?.injector;
+        const injector = current.options?.formState?.injector;
         visible = visible && (!injector || !hiddenFn?.(current, injector));
         current = current.parent;
     }
@@ -304,7 +316,8 @@ function isFieldHidden(field) {
 }
 const MIN_INPUT_NUM = -1999999999;
 const MAX_INPUT_NUM = 1999999999;
-const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
+const EDITOR_TYPES = ["php", "json", "html", "css", "scss"];
+const CUSTOM_INPUT_TYPES = ["checkbox", "textarea", "wysiwyg", "password"];
 
 function validationMessage(errorKey) {
     const key = `form.error.${errorKey}`;
@@ -611,7 +624,6 @@ function getFormValidationErrors(controls, parentPath = "") {
     return errors;
 }
 
-const customInputTypes = ["checkbox", "textarea", "wysiwyg", "password"];
 class DynamicFormBuilderService {
     injector;
     events;
@@ -657,7 +669,8 @@ class DynamicFormBuilderService {
         return this.setExpressions({
             id,
             parent,
-            schemas: [],
+            schemas: new Set(),
+            discriminator: parent.discriminator,
             fieldGroup: fields,
             wrappers: ["form-fieldset"],
             props: {
@@ -670,15 +683,15 @@ class DynamicFormBuilderService {
             expressions: {}
         }, options);
     }
-    createFieldSets(fields, parent, options, sets = []) {
+    createFieldSets(fields, parent, options, data = []) {
         const result = [];
-        const groups = {};
+        const fieldSets = {};
         fields = Array.from(fields || [])
             .sort((a, b) => a.priority - b.priority);
         fields.forEach(field => {
             if (this.isFieldset(field)) {
                 // This field is an already existing set
-                groups[field.id] = field.fieldGroup;
+                fieldSets[field.id] = field;
             }
         });
         for (const field of fields) {
@@ -686,19 +699,20 @@ 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) || { id: fsName, layout: "" };
-                let fieldGroup = groups[id];
-                if (!fieldGroup) {
-                    fieldGroup = [];
-                    groups[id] = fieldGroup;
-                    result.push(this.createFieldSet(set, fieldGroup, parent, options));
+                const setData = data.find(s => s.id === fsName) || { id: fsName, layout: "" };
+                let fieldSet = fieldSets[id];
+                if (!fieldSet) {
+                    fieldSet = this.createFieldSet(setData, [], parent, options);
+                    fieldSets[id] = fieldSet;
+                    result.push(fieldSet);
                 }
-                fieldGroup.push(field);
+                SetUtils.merge(fieldSet.schemas, field.schemas);
+                fieldSet.fieldGroup.push(field);
                 continue;
             }
-            else if (field.asFieldSet && !groups[field.id]) {
+            else if (field.asFieldSet && !fieldSets[field.id]) {
                 const fsName = String(field.key);
-                const set = sets.find(s => s.id === fsName);
+                const set = data.find(s => s.id === fsName);
                 field.id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
                 field.wrappers = ["form-fieldset"];
                 field.props = {
@@ -717,7 +731,7 @@ class DynamicFormBuilderService {
     }
     createFormInput(key, data, parent, options) {
         data = data || {};
-        const type = `${data.type || "text"}`;
+        const type = String(data.type || "text");
         const autocomplete = data.autocomplete || (type === "password" ? "new-password" : "none");
         const props = {
             type,
@@ -755,7 +769,10 @@ class DynamicFormBuilderService {
                 props.maxLength = isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength;
                 break;
         }
-        return this.createFormField(key, customInputTypes.includes(type) ? type : "input", data, props, parent, options);
+        const fieldType = CUSTOM_INPUT_TYPES.includes(type)
+            ? type
+            : (EDITOR_TYPES.includes(type) ? "editor" : "input");
+        return this.createFormField(key, fieldType, data, props, parent, options);
     }
     createFormSelect(key, data, parent, options) {
         data = data || {};
@@ -779,6 +796,7 @@ class DynamicFormBuilderService {
                 setFieldProp(target, "options", options instanceof Observable
                     ? options
                     : controlValues(root).pipe(combineLatestWith(this.language), switchMap(async (a, b) => {
+                        console.log(a, b, "????", target.key, target.formControl?.value);
                         const results = await factory(target, this.injector) || [];
                         return this.fixSelectOptions(target, results);
                     })));
@@ -926,10 +944,10 @@ class DynamicFormBuilderService {
         const control = field.formControl;
         const multiple = field.props.multiple;
         if (multiple) {
+            if (Array.isArray(control.value))
+                return options;
             // Handle if current control value is not an array
-            const value = Array.isArray(control.value)
-                ? control.value
-                : String(control.value || "").split(",");
+            const value = String(control.value || "").split(",");
             control.setValue(value);
             return options;
         }
@@ -981,7 +999,7 @@ class DynamicFormBuilderService {
             prefixTemplateKey: String(data.prefixTemplateKey || ""),
             suffixTemplateKey: String(data.suffixTemplateKey || ""),
             purposes: toStringArray(data.purposes),
-            schemas: toStringArray(data.schemas),
+            schemas: new Set(toStringArray(data.schemas)),
             discriminator: data.discriminator,
             priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
             wrappers: wrappers.filter(ObjectUtils.isDefined),
@@ -1089,10 +1107,10 @@ class DynamicFormBuilderService {
         });
         return field;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }, { token: DEFAULT_NUMERIC_STEP }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }, { token: DEFAULT_NUMERIC_STEP }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormBuilderService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i2.EventsService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -1128,47 +1146,60 @@ class DynamicFormSchemaService {
         if (!schema)
             return [];
         const options = await toWrapOptions(customizeOrOptions, this.injector, schema);
-        const keys = Object.keys(schema.properties || {});
-        const fields = [];
-        // Collect all properties of this schema def
-        let priority = Number.MAX_SAFE_INTEGER - (keys.length * PRIORITY_DIFF);
-        for (const key of keys) {
-            const property = schema.properties[key];
-            // Property priority is necessary when merging different schemas
-            property.priority = property.priority ?? (priority += PRIORITY_DIFF);
-            const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
-            fields.push(...propFields);
-        }
-        return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
-    }
-    async getFormFieldsForRefs(subSchemas, parent, options) {
-        const subFields = await Promise.all(subSchemas.map(async (s) => this.getFormFieldsForSchema(s, parent, options)));
+        return this.getFormFieldsForSchemas(parent, options, schema);
+    }
+    async getFormFieldsForSchemas(parent, options, ...schemas) {
+        const sets = [];
+        const fieldsForSchemas = await Promise.all(schemas.map(async (schema) => {
+            const keys = Object.keys(schema.properties || {});
+            const fields = [];
+            // Collect field set definitions for this schema
+            const schemaSets = Array.isArray(schema.sets) ? schema.sets : [];
+            for (const set of schemaSets) {
+                const existing = sets.find(s => s.id === set.id);
+                if (!existing) {
+                    Object.assign(existing, set);
+                    continue;
+                }
+                sets.push(set);
+            }
+            // Collect all properties of this schema def
+            let priority = Number.MAX_SAFE_INTEGER - (keys.length * PRIORITY_DIFF);
+            for (const key of keys) {
+                const property = schema.properties[key];
+                // Property priority is necessary when merging different schemas
+                property.priority = property.priority ?? (priority += PRIORITY_DIFF);
+                // Generate sub-fields for property
+                const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
+                fields.push(...propFields);
+            }
+            return fields.filter(ObjectUtils.isObject);
+        }));
         const res = [];
-        for (const ix in subSchemas) {
-            const schema = subSchemas[ix];
-            const fields = subFields[ix];
+        for (const ix in schemas) {
+            const schema = schemas[ix];
+            const fields = fieldsForSchemas[ix];
             for (const field of fields) {
-                const index = field.key
-                    ? res.findIndex(t => t.key === field.key)
-                    : res.findIndex(t => t.id === field.id);
+                const index = res.findIndex(t => t.key === field.key);
                 if (index >= 0) {
-                    res[index].schemas.push(schema.name);
+                    res[index].schemas.add(schema.name);
                     continue;
                 }
-                field.schemas.push(schema.name);
+                field.schemas.add(schema.name);
                 res.push(field);
             }
         }
-        return this.builder.createFieldSets(res, parent, options);
+        return this.builder.createFieldSets(res, parent, options, sets);
     }
     async getFormFieldsForProp(property, schema, options, parent) {
         const field = await this.getFormFieldForProp(property, options, parent);
         return !field ? [] : options.customize(field, property, schema);
     }
     async getFormFieldForProp(property, options, parent) {
+        console.log(property, property.id);
         switch (property.type) {
-            // case "object":
-            //     return this.getFormEditorConfig(property, options, parent);
+            case "object":
+                return this.getFormEditorConfig(property, options, parent);
             case "file":
             case "upload":
                 return this.getFormUploadConfig(property, options, parent);
@@ -1197,11 +1228,16 @@ class DynamicFormSchemaService {
         if (refs.length > 0) {
             return this.getFormGroupConfig(property, options, parent);
         }
-        // if (this.checkIsEditorProperty(property)) {
-        //     return this.getFormEditorConfig(property, options, parent);
-        // }
+        if (this.checkIsEditorProperty(property)) {
+            return this.getFormEditorConfig(property, options, parent);
+        }
         return this.getFormInputConfig(property, options, parent);
     }
+    checkIsEditorProperty(property) {
+        if (!property.format)
+            return false;
+        return EDITOR_TYPES.indexOf(property.format) >= 0 || property.format.endsWith("script");
+    }
     getFormFieldData(property, options) {
         const validators = {};
         const schema = options.schema;
@@ -1226,7 +1262,7 @@ class DynamicFormSchemaService {
             fieldSet: property.fieldSet,
             labelPrefix: property.labelPrefix,
             purposes: property.purposes || property.purpose,
-            discriminator: property.discriminator,
+            discriminator: property.discriminatorFn,
             priority: property.priority,
             componentType: property.componentType,
             wrappers: wrappers.filter(ObjectUtils.isStringWithValue),
@@ -1241,7 +1277,7 @@ class DynamicFormSchemaService {
         return this.builder.createFormArray(property.id, async (sp) => {
             const subSchemas = await this.openApi.getReferences(property, options.schema);
             if (subSchemas.length > 0) {
-                return this.getFormFieldsForRefs(subSchemas, sp, options);
+                return this.getFormFieldsForSchemas(sp, options, ...subSchemas);
             }
             return this.getFormFieldForProp(property.items, options, sp);
         }, {
@@ -1261,9 +1297,10 @@ class DynamicFormSchemaService {
     async getFormGroupConfig(property, options, parent) {
         return this.builder.createFormGroup(property.id, async (sp) => {
             const subSchemas = await this.openApi.getReferences(property, options.schema);
-            return this.getFormFieldsForRefs(subSchemas, sp, options);
+            return this.getFormFieldsForSchemas(sp, options, ...subSchemas);
         }, {
             ...this.getFormFieldData(property, options),
+            useTabs: property.useTabs
         }, parent, options);
     }
     getFormInputConfig(property, options, parent) {
@@ -1311,25 +1348,12 @@ class DynamicFormSchemaService {
             placeholder: property.placeholder || ""
         }, parent, options);
     }
-    // getFormEditorConfig(property: OpenApiSchemaProperty, options: ConfigForSchemaWrap): DynamicEditorModelConfig {
-    //     const sub = property.type == "array" ? property.items || property : property;
-    //     return Object.assign(
-    //         this.getFormControlConfig(property, options),
-    //         {
-    //             inputType: property.format || "json",
-    //             convertObject: property.type !== "string",
-    //             autoComplete: property.autoComplete || "off",
-    //             multiple: property.type == "array",
-    //             accept: ObjectUtils.isString(property.accept) ? property.accept : null,
-    //             mask: ObjectUtils.isString(property.mask) ? property.mask : null,
-    //             pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
-    //             step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
-    //             minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
-    //             maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
-    //             placeholder: property.placeholder || ""
-    //         }
-    //     );
-    // }
+    getFormEditorConfig(property, options, parent) {
+        return this.builder.createFormInput(property.id, {
+            ...this.getFormFieldData(property, options),
+            type: property.format || "json"
+        }, parent, options);
+    }
     getFormDatepickerConfig(property, options, parent) {
         const type = property.format == "date-time" ? "datetime-local" : "date";
         return this.builder.createFormInput(property.id, {
@@ -1524,10 +1548,10 @@ class DynamicFormSchemaService {
             validators.enum = enumValidation(items.enum);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormSchemaService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormSchemaService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2.OpenApiService }, { type: i0.Injector }, { type: DynamicFormBuilderService }] });
 
@@ -1588,6 +1612,7 @@ class DynamicFormService {
         const root = await wrapOptions.customize(config, {
             id: FORM_ROOT_ID,
             type: "object",
+            discriminator: null,
             properties: schema?.properties || {}
         }, schema);
         // Check if the customized root wrapper returned an array
@@ -1689,10 +1714,10 @@ class DynamicFormService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormService, deps: [{ token: DynamicFormSchemaService }, { token: DynamicFormBuilderService }, { token: i0.Injector }, { token: API_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormService, deps: [{ token: DynamicFormSchemaService }, { token: DynamicFormBuilderService }, { token: i0.Injector }, { token: API_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DynamicFormSchemaService }, { type: DynamicFormBuilderService }, { type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
@@ -1745,10 +1770,10 @@ class DynamicFormTemplateService {
         this.templates.get(type).delete(key);
         this.templatesUpdated.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, deps: [{ token: i2.GlobalTemplateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplateService, deps: [{ token: i2.GlobalTemplateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplateService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2.GlobalTemplateService }] });
 
@@ -1817,12 +1842,12 @@ class AsyncSubmitDirective extends AsyncMethodBase {
     getArgs(ev) {
         return untracked(() => [this.form(), this.context(), ev]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.19", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: { classPropertyName: "method", publicName: "async-submit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.22", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: { classPropertyName: "method", publicName: "async-submit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, providers: [
             { provide: AsyncMethodBase, useExisting: AsyncSubmitDirective }
         ], exportAs: ["async-submit"], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: false,
@@ -1879,10 +1904,10 @@ class DynamicFormTemplateDirective {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateDirective, deps: [{ token: DynamicFormTemplateService, optional: true }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormTemplateDirective, isStandalone: false, selector: "ng-template[control],\n                ng-template[label],\n                ng-template[input],\n                ng-template[prefix],\n                ng-template[suffix],\n                ng-template[setPrefix],\n                ng-template[setSuffix]", inputs: { control: "control", label: "label", input: "input", prefix: "prefix", suffix: "suffix", setPrefix: "setPrefix", setSuffix: "setSuffix" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplateDirective, deps: [{ token: DynamicFormTemplateService, optional: true }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormTemplateDirective, isStandalone: false, selector: "ng-template[control],\n                ng-template[label],\n                ng-template[input],\n                ng-template[prefix],\n                ng-template[suffix],\n                ng-template[setPrefix],\n                ng-template[setSuffix]", inputs: { control: "control", label: "label", input: "input", prefix: "prefix", suffix: "suffix", setPrefix: "setPrefix", setSuffix: "setSuffix" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: false,
@@ -1946,10 +1971,10 @@ class DynamicFormTemplatePipe {
         }
         return this.cachedTemplate;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, deps: [{ token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, isStandalone: false, name: "dynamicFormTemplate", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplatePipe, deps: [{ token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplatePipe, isStandalone: false, name: "dynamicFormTemplate", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTemplatePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: false,
@@ -2048,10 +2073,10 @@ class DynamicFieldType extends FieldType {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFieldType, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFieldType, isStandalone: false, selector: "dynamic-field-type", usesInheritance: true, ngImport: i0, template: "", isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFieldType, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFieldType, isStandalone: false, selector: "dynamic-field-type", usesInheritance: true, ngImport: i0, template: "", isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFieldType, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFieldType, decorators: [{
             type: Component,
             args: [{
                     standalone: false,
@@ -2161,10 +2186,10 @@ class DynamicFormComponent {
         const field = this.getField(path);
         return field?.formControl ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }, { token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, 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", onExpressionChanges: "onExpressionChanges", onInit: "onInit" }, providers: [DynamicFormTemplateService], 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}.dynamic-form-field>.field-label{position:relative}.dynamic-form-field>.field-label>.field-description{font-size:.95em;font-weight:400;color:#777;margin:0}\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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }, { token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, 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", onExpressionChanges: "onExpressionChanges", onInit: "onInit" }, providers: [DynamicFormTemplateService], 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}.dynamic-form-field>.field-label{position:relative}.dynamic-form-field>.field-label>.field-description{font-size:.95em;font-weight:400;color:#777;margin:0}\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DynamicFormTemplateService], 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}.dynamic-form-field>.field-label{position:relative}.dynamic-form-field>.field-label>.field-description{font-size:.95em;font-weight:400;color:#777;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: DynamicFormService }, { type: DynamicFormTemplateService }] });
@@ -2188,23 +2213,32 @@ class DynamicFormArrayComponent extends FieldArrayType {
         const length = this.field.fieldGroup.length;
         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: "@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\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (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 [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn [attr.data-testid]=\"field.testId + '-add-item'\" 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", "path", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", 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\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (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 [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn [attr.data-testid]=\"field.testId + '-add-item'\" 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", "path", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
             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\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (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 [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn [attr.data-testid]=\"field.testId + '-add-item'\" 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 {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["testId", "value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "strict", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["testId", "value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "strict", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.LegacyFormlySelectOptionsPipe, name: "formlySelectOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
         }] });
 
+class DynamicFormEditorComponent extends DynamicFieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormEditorComponent, isStandalone: false, selector: "dynamic-form-editor", usesInheritance: true, ngImport: i0, template: "<code-editor [lang]=\"props.type\"\n             [formControl]=\"formControl\"\n             [formlyAttributes]=\"field\">\n</code-editor>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.CodeEditorComponent, selector: "code-editor", inputs: ["value", "lang", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormEditorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-editor", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<code-editor [lang]=\"props.type\"\n             [formControl]=\"formControl\"\n             [formlyAttributes]=\"field\">\n</code-editor>\n" }]
+        }] });
+
 class DynamicFormPasswordComponent extends DynamicFieldType {
     type = signal("password");
     icon = computed(() => {
@@ -2221,19 +2255,19 @@ class DynamicFormPasswordComponent extends DynamicFieldType {
             el.setSelectionRange(start, end);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.22", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormPasswordComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-password", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"] }]
         }] });
 
 class DynamicFormStaticComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormStaticComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormStaticComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<unordered-list [listStyle]=\"props.style\" [ngClass]=\"{disabled: props.disabled}\"\n                [data]=\"!props.properties ? {value: value} : props.properties | remap: value\">\n    <ng-template [type]=\"!props.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\n        {{ item.value | date }}\n    </ng-template>\n</unordered-list>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.UnorderedListTemplateDirective, selector: "ng-template[type][selector]", inputs: ["type", "selector"] }, { kind: "component", type: i2.UnorderedListComponent, selector: "unordered-list", inputs: ["data", "keyPrefix", "listStyle", "path", "level", "templates"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.RemapPipe, name: "remap" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormStaticComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormStaticComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<unordered-list [listStyle]=\"props.style\" [ngClass]=\"{disabled: props.disabled}\"\n                [data]=\"!props.properties ? {value: value} : props.properties | remap: value\">\n    <ng-template [type]=\"!props.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\n        {{ item.value | date }}\n    </ng-template>\n</unordered-list>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.UnorderedListTemplateDirective, selector: "ng-template[type][selector]", inputs: ["type", "selector"] }, { kind: "component", type: i2.UnorderedListComponent, selector: "unordered-list", inputs: ["data", "keyPrefix", "listStyle", "path", "level", "templates"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.RemapPipe, name: "remap" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormStaticComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormStaticComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<unordered-list [listStyle]=\"props.style\" [ngClass]=\"{disabled: props.disabled}\"\n                [data]=\"!props.properties ? {value: value} : props.properties | remap: value\">\n    <ng-template [type]=\"!props.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\n        {{ item.value | date }}\n    </ng-template>\n</unordered-list>\n" }]
         }] });
@@ -2267,10 +2301,10 @@ class DynamicFormTranslationComponent extends DynamicFormArrayComponent {
         }
         this.currentTab.set(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTranslationComponent, deps: [{ token: i2.EventsService }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormTranslationComponent, isStandalone: false, selector: "dynamic-form-translation", 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        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\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    </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: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTranslationComponent, deps: [{ token: i2.EventsService }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormTranslationComponent, isStandalone: false, selector: "dynamic-form-translation", 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        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\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    </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: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTranslationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormTranslationComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-translation", 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        @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n            @if (ix === currentTab()) {\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    </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"] }]
         }], ctorParameters: () => [{ type: i2.EventsService }, { type: undefined, decorators: [{
@@ -2279,19 +2313,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 }] }] });
 
 class DynamicFormUploadComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-upload", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n" }]
         }] });
 
 class DynamicFormWysiwygComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormWysiwygComponent, isStandalone: false, selector: "dynamic-form-wysiwyg", usesInheritance: true, ngImport: i0, template: "<wysiwyg [formControl]=\"formControl\"\n         [formlyAttributes]=\"field\">\n</wysiwyg>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.WysiwygComponent, selector: "wysiwyg", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormWysiwygComponent, isStandalone: false, selector: "dynamic-form-wysiwyg", usesInheritance: true, ngImport: i0, template: "<wysiwyg [formControl]=\"formControl\"\n         [formlyAttributes]=\"field\">\n</wysiwyg>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.WysiwygComponent, selector: "wysiwyg", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormWysiwygComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormWysiwygComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-wysiwyg", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<wysiwyg [formControl]=\"formControl\"\n         [formlyAttributes]=\"field\">\n</wysiwyg>\n" }]
         }] });
@@ -2300,39 +2334,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * This is just a test wrapper component
  */
 class DynamicFormAlertComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: DynamicFormAlertComponent, isStandalone: false, selector: "dynamic-form-alert", usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-alert\">\n    <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: DynamicFormAlertComponent, isStandalone: false, selector: "dynamic-form-alert", usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-alert\">\n    <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormAlertComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-alert", encapsulation: ViewEncapsulation.None, template: "<div class=\"dynamic-form-alert\">\n    <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"] }]
         }] });
 
 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 #innerLabelTemplate let-label=\"label\">\n    <label class=\"field-label\" [for]=\"id\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n        @if (props.markRequired) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n        @if (props.description) {\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\n        }\n    </label>\n</ng-template>\n<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n                      [context]=\"field\"\n                      [additionalContext]=\"{label: label}\"></ng-container>\n    }\n</ng-template>\n<ng-template #inputTemplate>\n    <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <div class=\"field-container\">\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></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    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n              [ngTemplateOutletContext]=\"field\"></ng-container>\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.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\n    <label class=\"field-label\" [for]=\"id\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n        @if (props.markRequired) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n        @if (props.description) {\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\n        }\n    </label>\n</ng-template>\n<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n                      [context]=\"field\"\n                      [additionalContext]=\"{label: label}\"></ng-container>\n    }\n</ng-template>\n<ng-template #inputTemplate>\n    <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <div class=\"field-container\">\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></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    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n              [ngTemplateOutletContext]=\"field\"></ng-container>\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.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\n    <label class=\"field-label\" [for]=\"id\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n        @if (props.markRequired) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n        @if (props.description) {\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\n        }\n    </label>\n</ng-template>\n<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n                      [context]=\"field\"\n                      [additionalContext]=\"{label: label}\"></ng-container>\n    }\n</ng-template>\n<ng-template #inputTemplate>\n    <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <div class=\"field-container\">\n        <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n                      [ngTemplateOutletContext]=\"field\"></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    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n              [ngTemplateOutletContext]=\"field\"></ng-container>\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: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\r\n@if (field.display) {\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n    <legend class=\"field-legend\" *ngIf=\"label\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n    </legend>\r\n    <div class=\"field-container\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                <formly-field [field]=\"itemField\"></formly-field>\r\n            }\r\n        }\r\n    </div>\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\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.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", 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;\r\n@if (field.display) {\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n    <legend class=\"field-legend\" *ngIf=\"label\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n    </legend>\r\n    <div class=\"field-container\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                <formly-field [field]=\"itemField\"></formly-field>\r\n            }\r\n        }\r\n    </div>\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\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.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
             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;\r\n@if (field.display) {\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n    <legend class=\"field-legend\" *ngIf=\"label\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n    </legend>\r\n    <div class=\"field-container\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                <formly-field [field]=\"itemField\"></formly-field>\r\n            }\r\n        }\r\n    </div>\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\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: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "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" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
+    get parent() {
+        return this.field?.parent;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "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.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\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: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel || parent?.props?.useTabs ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.fieldGroup) {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\n", styles: [".dynamic-form-group>.field-container{overflow:hidden}.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 ---
@@ -2341,6 +2378,7 @@ const components = [
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormEditorComponent,
     DynamicFormPasswordComponent,
     DynamicFormStaticComponent,
     DynamicFormTranslationComponent,
@@ -2369,6 +2407,7 @@ class NgxDynamicFormModule {
                 types: [
                     { name: "array", component: DynamicFormArrayComponent },
                     { name: "chips", component: DynamicFormChipsComponent },
+                    { name: "editor", component: DynamicFormEditorComponent },
                     { name: "password", component: DynamicFormPasswordComponent },
                     { name: "static", component: DynamicFormStaticComponent },
                     { name: "translation", component: DynamicFormTranslationComponent },
@@ -2380,6 +2419,9 @@ class NgxDynamicFormModule {
                     { name: "form-field", component: DynamicFormFieldComponent },
                     { name: "form-fieldset", component: DynamicFormFieldsetComponent },
                     { name: "form-group", component: DynamicFormGroupComponent },
+                    // These are just placeholders, so the sample app does not break when it is in a more complex context
+                    { name: "form-integration", component: DynamicFormFieldComponent },
+                    { name: "form-address", component: DynamicFormGroupComponent },
                 ],
                 extras: {
                     resetFieldOnHide: false,
@@ -2405,18 +2447,18 @@ class NgxDynamicFormModule {
     static provideForms(config) {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
-            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormEditorComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
             FormlySelectModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, providers: [
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, providers: [
             ...pipes
         ], imports: [CommonModule,
             FormsModule,
@@ -2429,7 +2471,7 @@ class NgxDynamicFormModule {
             FormlyModule,
             FormlySelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2465,5 +2507,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, 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, enumValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
+export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormEditorComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_TYPES, 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, enumValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map