@stemy/ngx-dynamic-form 19.6.4 → 19.6.6

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

@@ -2,11 +2,11 @@ import * as i2 from '@stemy/ngx-utils';
 import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, ForbiddenZone, API_SERVICE, StringUtils, TOASTER_SERVICE, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
 import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import * as i1 from '@angular/forms';
-import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
 import { Inject, Injectable, untracked, input, output, inject, Renderer2, ElementRef, computed, signal, effect, HostListener, HostBinding, Directive, Type, Component, Injector, ChangeDetectionStrategy, ViewEncapsulation, makeEnvironmentProviders, NgModule } from '@angular/core';
-import { outputToObservable, toSignal, rxResource } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { outputToObservable, toSignal, rxResource, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i3 from '@ngx-formly/core';
 import { FieldType, ɵobserve as _observe, FieldArrayType, FieldWrapper, provideFormlyConfig, provideFormlyCore, FormlyModule } from '@ngx-formly/core';
 import * as i1$1 from '@angular/common';
@@ -214,8 +214,8 @@ function maxLengthValidation(maxLength, each) {
 function minValueValidation(min, each) {
     return validateEach(each, v => {
         if (min instanceof Date) {
-            v = new Date(v);
-            return isNaN(v) || v >= min;
+            const date = new Date(v);
+            return isNaN(date) || date >= min;
         }
         return v == null || v >= min;
     }, "minValue");
@@ -223,130 +223,13 @@ function minValueValidation(min, each) {
 function maxValueValidation(max, each) {
     return validateEach(each, v => {
         if (max instanceof Date) {
-            v = new Date(v);
-            return isNaN(v) || v <= max;
+            const date = new Date(v);
+            return isNaN(date) || date <= max;
         }
         return v == null || v <= max;
     }, "maxValue");
 }
 
-class ConfigForSchemaWrap {
-    opts;
-    mode;
-    injector;
-    schema;
-    get labelPrefix() {
-        return this.opts.labelPrefix;
-    }
-    get labelCustomizer() {
-        return this.opts.labelCustomizer;
-    }
-    get testId() {
-        return this.opts.testId;
-    }
-    get context() {
-        return this.opts.context;
-    }
-    fieldCustomizer;
-    constructor(opts, mode, injector, schema) {
-        this.opts = opts;
-        this.mode = mode;
-        this.injector = injector;
-        this.schema = schema;
-        this.fieldCustomizer = this.mode !== "wrap" || !ObjectUtils.isFunction(this.opts.fieldCustomizer)
-            ? field => field
-            : this.opts.fieldCustomizer;
-    }
-    async customize(field, property, schema) {
-        field.defaultValue = property.format?.startsWith("date")
-            ? convertToDateFormat(property.default, property.format) : property.default;
-        const res = await ForbiddenZone.run("customizer", () => this.fieldCustomizer(field, this.forCustomizer(), this.injector, property, schema));
-        return !res ? [field] : handleConfigs(res);
-    }
-    forCustomizer() {
-        return new ConfigForSchemaWrap(this.opts, "customizer", this.injector, this.schema);
-    }
-    forSchema(schema) {
-        return new ConfigForSchemaWrap(this.opts, this.mode, this.injector, schema);
-    }
-}
-async function toWrapOptions(customizeOrOptions, injector, schema, errorMsg) {
-    if (errorMsg && ForbiddenZone.isForbidden("customizer")) {
-        throw new Error(errorMsg);
-    }
-    if (customizeOrOptions instanceof ConfigForSchemaWrap) {
-        return customizeOrOptions;
-    }
-    let schemaOptions = customizeOrOptions;
-    if (!ObjectUtils.isObject(schemaOptions)) {
-        schemaOptions = {
-            fieldCustomizer: customizeOrOptions
-        };
-    }
-    return new ConfigForSchemaWrap(schemaOptions, "wrap", injector, schema);
-}
-function convertToDateFormat(value, format) {
-    if (!ObjectUtils.isDefined(value))
-        return undefined;
-    value = ObjectUtils.isDate(value) ? value : new Date(value);
-    const date = isNaN(value) ? new Date() : value;
-    return format === "datetime-local" || format === "date-time"
-        ? new Date(date.getTime() - date.getTimezoneOffset() * 60000)
-            .toISOString()
-            .slice(0, 16)
-        : date.toISOString().slice(0, 10);
-}
-function handleConfigs(configs) {
-    return Array.isArray(configs) ? configs : [configs];
-}
-function arrayItemActionToExpression(actionName) {
-    return (field) => {
-        const action = field.parent?.props?.[actionName];
-        // Needed to immediately reflect the changes on the view
-        field.options.detectChanges(field);
-        if (action === false)
-            return false;
-        // Returns the actual calculated value
-        return ObjectUtils.isFunction(action)
-            ? action(field.formControl?.value, Number(field.key), field)
-            : true;
-    };
-}
-function mergeFormFields(formFields) {
-    const res = [];
-    for (const formModel of formFields) {
-        for (const subModel of formModel) {
-            const index = res.findIndex(t => t.key == subModel.key);
-            if (index >= 0) {
-                res[index] = subModel;
-                continue;
-            }
-            res.push(subModel);
-        }
-    }
-    return res;
-}
-function getFormValidationErrors(controls, parentPath = "") {
-    const errors = [];
-    Object.entries(controls).forEach(([name, control], ix) => {
-        const path = !parentPath ? name : `${parentPath}.${name}`;
-        if (control instanceof FormGroup$1) {
-            getFormValidationErrors(control.controls, path).forEach(error => errors.push(error));
-            return;
-        }
-        if (control instanceof FormArray$1) {
-            control.controls.forEach((control, ix) => {
-                getFormValidationErrors(control.controls, `${path}.${ix}`).forEach(error => errors.push(error));
-            });
-            return;
-        }
-        Object.entries(control.errors || {}).forEach(([errorKey, errorValue]) => {
-            errors.push({ control, path, errorKey, errorValue });
-        });
-    });
-    return errors;
-}
-
 function replaceSpecialChars(str, to = "-") {
     return `${str}`.replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
 }
@@ -370,6 +253,32 @@ function controlStatus(control, timeout = 10) {
     const changes$ = control.statusChanges.pipe(debounceTime(timeout));
     return merge(initial$, changes$);
 }
+/**
+ * Convert value to a string with corrected date format (date, date-time)
+ * @param value Value to convert to date string
+ * @param format Expected date format (date, date-time)
+ */
+function convertToDateFormat(value, format) {
+    if (!ObjectUtils.isDefined(value) || format?.includes("date"))
+        return value;
+    value = ObjectUtils.isDate(value) ? value : new Date(value);
+    const date = isNaN(value) ? new Date() : value;
+    return format === "datetime-local" || format === "date-time"
+        ? new Date(date.getTime() - date.getTimezoneOffset() * 60000)
+            .toISOString()
+            .slice(0, 16)
+        : date.toISOString().slice(0, 10);
+}
+/**
+ * Convert value to date object with format (date, date-time)
+ * @param value Value to convert to date string
+ * @param format Expected date format (date, date-time)
+ */
+function convertToDate(value, format) {
+    return (!ObjectUtils.isDefined(value) || format?.includes("date"))
+        ? value
+        : new Date(convertToDateFormat(value, format));
+}
 function getFieldByPath(field, path) {
     if (field.path === path) {
         return field;
@@ -469,12 +378,108 @@ const MIN_INPUT_NUM = -1999999999;
 const MAX_INPUT_NUM = 1999999999;
 const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
 
+class ConfigForSchemaWrap {
+    get labelPrefix() {
+        return this.opts.labelPrefix;
+    }
+    get labelCustomizer() {
+        return this.opts.labelCustomizer;
+    }
+    get testId() {
+        return this.opts.testId;
+    }
+    get context() {
+        return this.opts.context;
+    }
+    constructor(opts, mode, injector, schema) {
+        this.opts = opts;
+        this.mode = mode;
+        this.injector = injector;
+        this.schema = schema;
+        this.fieldCustomizer = this.mode !== "wrap" || !ObjectUtils.isFunction(this.opts.fieldCustomizer)
+            ? field => field
+            : this.opts.fieldCustomizer;
+    }
+    async customize(field, property, schema) {
+        field.defaultValue = property.format?.startsWith("date")
+            ? convertToDateFormat(property.default, property.format) : property.default;
+        const res = await ForbiddenZone.run("customizer", () => this.fieldCustomizer(field, this.forCustomizer(), this.injector, property, schema));
+        return !res ? [field] : handleConfigs(res);
+    }
+    forCustomizer() {
+        return new ConfigForSchemaWrap(this.opts, "customizer", this.injector, this.schema);
+    }
+    forSchema(schema) {
+        return new ConfigForSchemaWrap(this.opts, this.mode, this.injector, schema);
+    }
+}
+async function toWrapOptions(customizeOrOptions, injector, schema, errorMsg) {
+    if (errorMsg && ForbiddenZone.isForbidden("customizer")) {
+        throw new Error(errorMsg);
+    }
+    if (customizeOrOptions instanceof ConfigForSchemaWrap) {
+        return customizeOrOptions;
+    }
+    let schemaOptions = customizeOrOptions;
+    if (!ObjectUtils.isObject(schemaOptions)) {
+        schemaOptions = {
+            fieldCustomizer: customizeOrOptions
+        };
+    }
+    return new ConfigForSchemaWrap(schemaOptions, "wrap", injector, schema);
+}
+function handleConfigs(configs) {
+    return Array.isArray(configs) ? configs : [configs];
+}
+function arrayItemActionToExpression(actionName) {
+    return (field) => {
+        const action = field.parent?.props?.[actionName];
+        // Needed to immediately reflect the changes on the view
+        field.options.detectChanges(field);
+        if (action === false)
+            return false;
+        // Returns the actual calculated value
+        return ObjectUtils.isFunction(action)
+            ? action(field.formControl?.value, Number(field.key), field)
+            : true;
+    };
+}
+function mergeFormFields(formFields) {
+    const res = [];
+    for (const formModel of formFields) {
+        for (const subModel of formModel) {
+            const index = res.findIndex(t => t.key == subModel.key);
+            if (index >= 0) {
+                res[index] = subModel;
+                continue;
+            }
+            res.push(subModel);
+        }
+    }
+    return res;
+}
+function getFormValidationErrors(controls, parentPath = "") {
+    const errors = [];
+    Object.entries(controls).forEach(([name, control], ix) => {
+        const path = !parentPath ? name : `${parentPath}.${name}`;
+        if (control instanceof FormGroup$1) {
+            getFormValidationErrors(control.controls, path).forEach(error => errors.push(error));
+            return;
+        }
+        if (control instanceof FormArray$1) {
+            control.controls.forEach((control, ix) => {
+                getFormValidationErrors(control.controls, `${path}.${ix}`).forEach(error => errors.push(error));
+            });
+            return;
+        }
+        Object.entries(control.errors || {}).forEach(([errorKey, errorValue]) => {
+            errors.push({ control, path, errorKey, errorValue });
+        });
+    });
+    return errors;
+}
+
 class DynamicFormBuilderService {
-    injector;
-    events;
-    api;
-    languages;
-    language;
     constructor(injector, events, api, languages) {
         this.injector = injector;
         this.events = events;
@@ -836,8 +841,8 @@ class DynamicFormBuilderService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
             type: Injectable
@@ -850,9 +855,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }] }] });
 
 class DynamicFormSchemaService {
-    openApi;
-    injector;
-    builder;
     get api() {
         return this.openApi.api;
     }
@@ -1182,10 +1184,10 @@ class DynamicFormSchemaService {
             validators.maxLength = maxLengthValidation(property.maxLength);
         }
         if (!isNaN(property.minimum)) {
-            validators.min = minValueValidation(property.minimum);
+            validators.min = minValueValidation(convertToDate(property.minimum, property.format));
         }
         if (!isNaN(property.maximum)) {
-            validators.max = maxValueValidation(property.maximum);
+            validators.max = maxValueValidation(convertToDate(property.maximum, property.format));
         }
         // if (isString(property.pattern) && property.pattern.length) {
         //     validators.pattern = property.pattern;
@@ -1212,18 +1214,14 @@ class DynamicFormSchemaService {
             validators.itemsMaxValue = maxValueValidation(items.maximum, true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.14", ngImport: i0, type: DynamicFormSchemaService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2.OpenApiService }, { type: i0.Injector }, { type: DynamicFormBuilderService }] });
 
 class DynamicFormService {
-    fs;
-    fb;
-    injector;
-    api;
     constructor(fs, fb, injector, api) {
         this.fs = fs;
         this.fb = fb;
@@ -1355,8 +1353,8 @@ class DynamicFormService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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.14", ngImport: i0, type: DynamicFormService });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, deps: [{ token: DynamicFormSchemaService }, { token: DynamicFormBuilderService }, { token: i0.Injector }, { token: API_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable
@@ -1366,25 +1364,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }] }] });
 
 class AsyncSubmitDirective {
-    method = input(null, { alias: "async-submit" });
-    mode = input("click");
-    form = input();
-    context = input();
-    onSuccess = output();
-    onError = output();
-    toaster = inject(TOASTER_SERVICE);
-    renderer = inject(Renderer2);
-    elem = inject(ElementRef);
-    status = computed(() => {
-        const form = this.form();
-        return form?.status() || null;
-    });
-    group = computed(() => {
-        const form = this.form();
-        return form?.group() || null;
-    });
-    loading = signal(false);
-    callback = signal(null);
     get isDisabled() {
         return this.status() !== "VALID";
     }
@@ -1392,6 +1371,25 @@ class AsyncSubmitDirective {
         return this.loading();
     }
     constructor() {
+        this.method = input(null, { alias: "async-submit" });
+        this.mode = input("click");
+        this.form = input();
+        this.context = input();
+        this.onSuccess = output();
+        this.onError = output();
+        this.toaster = inject(TOASTER_SERVICE);
+        this.renderer = inject(Renderer2);
+        this.elem = inject(ElementRef);
+        this.status = computed(() => {
+            const form = this.form();
+            return form?.status() || null;
+        });
+        this.group = computed(() => {
+            const form = this.form();
+            return form?.group() || null;
+        });
+        this.loading = signal(false);
+        this.callback = signal(null);
         if (this.elem.nativeElement.tagName === "BUTTON") {
             this.renderer.setAttribute(this.elem.nativeElement, "type", "button");
         }
@@ -1446,8 +1444,8 @@ class AsyncSubmitDirective {
             this.toaster.error(reason.message, reason.context);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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 }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", 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 }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
             type: Directive,
@@ -1468,9 +1466,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class DynamicFieldType extends FieldType {
-    stateChanges = new Subject();
-    _errorState = false;
-    _focused = false;
+    constructor() {
+        super(...arguments);
+        this.stateChanges = new Subject();
+        this._errorState = false;
+        this._focused = false;
+    }
     ngOnDestroy() {
         delete this.formField?._control;
         this.stateChanges.complete();
@@ -1557,8 +1558,8 @@ class DynamicFieldType extends FieldType {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFieldType, isStandalone: false, selector: "dynamic-field-type", usesInheritance: true, ngImport: i0, template: "", isInline: true });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFieldType, isStandalone: false, selector: "dynamic-field-type", usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, decorators: [{
             type: Component,
@@ -1570,56 +1571,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormComponent {
-    builder = inject(DynamicFormBuilderService);
-    events = inject(EventsService);
-    languages = inject(LANGUAGE_SERVICE);
-    labelPrefix = input("label");
-    labelCustomizer = input(null);
-    testId = input("");
-    useTabs = input(false);
-    data = input({});
-    fields = input(null);
-    fieldChanges = new Subject();
-    language = toSignal(this.events.languageChanged, {
-        initialValue: this.languages.currentLanguage
-    });
-    enableTranslations = toSignal(this.events.translationsEnabled, {
-        initialValue: this.languages.enableTranslations
-    });
-    config = computed(() => {
-        const options = {
-            labelPrefix: this.labelPrefix(),
-            labelCustomizer: this.labelCustomizer(),
-            testId: this.testId(),
-        };
-        const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
-        return [
-            this.builder.createFormGroup(null, () => fields, {
-                label: "",
-                useTabs: this.useTabs(),
-                hidden: false,
-                className: "dynamic-form-root-group"
-            }, null, options)
-        ];
-    });
-    group = computed(() => {
-        this.config();
-        return new FormGroup$1({});
-    });
-    status$ = rxResource({
-        request: () => this.group(),
-        loader: p => controlStatus(p.request),
-        defaultValue: "PENDING"
-    });
-    status = computed(() => this.status$.value());
-    onSubmit = output();
-    options = {
-        fieldChanges: this.fieldChanges,
-        formState: {
-            injector: inject(Injector)
-        }
-    };
     constructor() {
+        this.builder = inject(DynamicFormBuilderService);
+        this.events = inject(EventsService);
+        this.languages = inject(LANGUAGE_SERVICE);
+        this.labelPrefix = input("label");
+        this.labelCustomizer = input(null);
+        this.testId = input("");
+        this.useTabs = input(false);
+        this.data = input({});
+        this.fields = input(null);
+        this.fieldChanges = new Subject();
+        this.language = toSignal(this.events.languageChanged, {
+            initialValue: this.languages.currentLanguage
+        });
+        this.enableTranslations = toSignal(this.events.translationsEnabled, {
+            initialValue: this.languages.enableTranslations
+        });
+        this.config = computed(() => {
+            const options = {
+                labelPrefix: this.labelPrefix(),
+                labelCustomizer: this.labelCustomizer(),
+                testId: this.testId(),
+            };
+            const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
+            return [
+                this.builder.createFormGroup(null, () => fields, {
+                    label: "",
+                    useTabs: this.useTabs(),
+                    hidden: false,
+                    className: "dynamic-form-root-group"
+                }, null, options)
+            ];
+        });
+        this.group = computed(() => {
+            this.config();
+            return new FormGroup$1({});
+        });
+        this.status$ = rxResource({
+            request: () => this.group(),
+            loader: p => controlStatus(p.request),
+            defaultValue: "PENDING"
+        });
+        this.status = computed(() => this.status$.value());
+        this.onSubmit = output();
+        this.onChanges = outputFromObservable(this.fieldChanges);
+        this.options = {
+            fieldChanges: this.fieldChanges,
+            formState: {
+                injector: inject(Injector)
+            }
+        };
         effect(() => {
             this.language();
             this.enableTranslations();
@@ -1636,8 +1638,8 @@ class DynamicFormComponent {
     reset() {
         this.options?.resetModel?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onChanges: "onChanges" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
@@ -1645,7 +1647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }], ctorParameters: () => [] });
 
 class DynamicFormArrayComponent extends FieldArrayType {
-    currentTab = signal(0);
+    constructor() {
+        super(...arguments);
+        this.currentTab = signal(0);
+    }
     clearItems() {
         const control = this.formControl;
         while (control.length > 0) {
@@ -1663,8 +1668,8 @@ 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.14", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
@@ -1672,8 +1677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormChipsComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
             type: Component,
@@ -1681,8 +1686,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormUploadComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
             type: Component,
@@ -1693,8 +1698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * This is just a test wrapper component
  */
 class DynamicFormAlertComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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.14", ngImport: i0, type: DynamicFormAlertComponent, decorators: [{
             type: Component,
@@ -1702,8 +1707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormFieldComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "@if (props.label && props.hideLabel !== true) {\n    <label class=\"field-label\" [for]=\"id\">\n        {{ props.label | translate }}\n        <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        @if (props.required && props.hideRequiredMarker !== true) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "@if (props.label && props.hideLabel !== true) {\n    <label class=\"field-label\" [for]=\"id\">\n        {{ props.label | translate }}\n        <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        @if (props.required && props.hideRequiredMarker !== true) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.14", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
@@ -1711,8 +1716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
@@ -1720,8 +1725,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormGroupComponent extends FieldWrapper {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
@@ -1783,16 +1788,16 @@ class NgxDynamicFormModule {
     static provideForms(config) {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, providers: [
+            FormlyModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, providers: [
             ...pipes
         ], imports: [CommonModule,
             FormsModule,
@@ -1801,7 +1806,7 @@ class NgxDynamicFormModule {
             FormlyModule, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule] });
+            FormlyModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
             type: NgModule,
@@ -1837,5 +1842,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, addFieldValidators, clearFieldArray, controlStatus, controlValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, translationValidation };
+export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, addFieldValidators, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map