@stemy/ngx-dynamic-form 19.4.0 → 19.4.2

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

@@ -2,13 +2,13 @@ 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 { Subject, BehaviorSubject, startWith, distinctUntilChanged, switchMap, from, isObservable, firstValueFrom, first } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Inject, Injectable, input, output, inject, Renderer2, ElementRef, computed, signal, effect, HostListener, HostBinding, Directive, Injector, ChangeDetectionStrategy, ViewEncapsulation, Component, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { Inject, Injectable, input, output, inject, Renderer2, ElementRef, computed, signal, effect, HostListener, HostBinding, Directive, Type, Component, Injector, ChangeDetectionStrategy, ViewEncapsulation, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { outputToObservable, toSignal, rxResource } from '@angular/core/rxjs-interop';
 import { debounceTime } from 'rxjs/operators';
 import * as i3 from '@ngx-formly/core';
-import { FieldArrayType, FieldType, FieldWrapper, FormlyModule } 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';
 import { CommonModule } from '@angular/common';
 
@@ -560,9 +560,10 @@ class DynamicFormBuilderService {
             option.id = option.id ?? option.value;
         }
         const control = field.formControl;
+        field.defaultValue = options[0]?.value ?? null;
         if (field.props.multiple || options.length === 0 || options.findIndex(o => o.value === control.value) >= 0)
             return options;
-        control.setValue(options[0].value);
+        control.setValue(field.defaultValue);
         return options;
     }
     getLabel(key, label, parent, options) {
@@ -621,6 +622,19 @@ class DynamicFormBuilderService {
     }
     setExpressions(field, options) {
         const expressions = {
+            tabs: target => {
+                if (target.fieldArray) {
+                    const group = target.fieldGroup || [];
+                    return group.map((g, ix) => {
+                        const label = ObjectUtils.getValue(g.formControl?.value, target.props?.tabsLabel || "label", ix);
+                        return {
+                            value: ix,
+                            label: `${label}`
+                        };
+                    });
+                }
+                return [];
+            },
             path: target => {
                 const tp = target.parent;
                 const key = !target.key ? `` : `.${target.key}`;
@@ -1253,6 +1267,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ["click"]
             }] } });
 
+class DynamicFieldType extends FieldType {
+    stateChanges = new Subject();
+    _errorState = false;
+    _focused = false;
+    ngOnDestroy() {
+        delete this.formField?._control;
+        this.stateChanges.complete();
+    }
+    setDescribedByIds(_ids) {
+    }
+    onContainerClick(_event) {
+        this.field.focus = true;
+        this.stateChanges.next();
+    }
+    get errorState() {
+        const showError = this.options.showError(this);
+        if (showError !== this._errorState) {
+            this._errorState = showError;
+            this.stateChanges.next();
+        }
+        return showError;
+    }
+    get controlType() {
+        if (this.props.type) {
+            return this.props.type;
+        }
+        const type = this.field.type;
+        return type instanceof Type ? type.prototype.constructor.name : type;
+    }
+    get focused() {
+        const focused = !!this.field.focus && !this.disabled;
+        if (focused !== this._focused) {
+            this._focused = focused;
+            this.stateChanges.next();
+        }
+        return focused;
+    }
+    get disabled() {
+        return !!this.props.disabled;
+    }
+    get required() {
+        return !!this.props.required;
+    }
+    get placeholder() {
+        return this.props.placeholder || "";
+    }
+    get shouldPlaceholderFloat() {
+        return this.shouldLabelFloat;
+    }
+    get value() {
+        return this.formControl?.value;
+    }
+    set value(value) {
+        this.formControl?.patchValue(value);
+    }
+    get ngControl() {
+        return this.formControl;
+    }
+    get empty() {
+        return this.value == null || this.value?.length === 0;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get formField() {
+        return this.field?.["_formField"];
+    }
+    ngAfterViewInit() {
+        const control = this;
+        if (this.formField && control !== this.formField._control) {
+            this.formField._control = control;
+            // temporary fix for https://github.com/angular/material2/issues/6728
+            const ngControl = control?.ngControl;
+            if (ngControl?.valueAccessor?.hasOwnProperty("_formField")) {
+                ngControl.valueAccessor["_formField"] = this.formField;
+            }
+            if (ngControl?.valueAccessor?.hasOwnProperty("_parentFormField")) {
+                ngControl.valueAccessor["_parentFormField"] = this.formField;
+            }
+            ["prefix", "suffix", "textPrefix", "textSuffix"].forEach((type) => _observe(this.field, ["props", type], ({ currentValue }) => currentValue &&
+                Promise.resolve().then(() => {
+                    this.options.detectChanges(this.field);
+                })));
+            // https://github.com/angular/components/issues/16209
+            const setDescribedByIds = control.setDescribedByIds.bind(control);
+            control.setDescribedByIds = (ids) => {
+                setTimeout(() => setDescribedByIds(ids));
+            };
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: false,
+                    selector: "dynamic-field-type",
+                    template: ""
+                }]
+        }] });
+
 class DynamicFormComponent {
     builder = inject(DynamicFormBuilderService);
     events = inject(EventsService);
@@ -1312,7 +1428,7 @@ class DynamicFormComponent {
         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 }, 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", 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.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 }, 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", 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,
@@ -1321,23 +1437,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DynamicFormArrayComponent extends FieldArrayType {
     currentTab = signal(0);
-    clear() {
+    clearItems() {
         const control = this.formControl;
         while (control.length > 0) {
             this.remove(0);
         }
+        this.currentTab.set(0);
+    }
+    addItem(i) {
+        i = i == null ? this.field.fieldGroup.length : i;
+        this.add(i);
+        this.currentTab.set(i);
+    }
+    removeItem(i) {
+        this.remove(i);
+        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: "<label class=\"field-label\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n</label>\n<div class=\"field-container\">\n    @if (props.useTabs) {\n        <ul class=\"form-array-tabs\">\n            @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                <li>\n                    <a class=\"btn\" [ngClass]=\"[currentTab() === ix ? 'btn-primary' : 'btn-secondary']\"\n                       (click)=\"currentTab.set(ix)\">\n                        {{ (field.formControl.value | getValue : props.tabsLabel) || ix + 1 }}\n                    </a>\n                </li>\n            }\n        </ul>\n    }\n    @for (field of field.fieldGroup; track field.key; let ix = $index) {\n        @if (!props.useTabs || ix === currentTab()) {\n            <div class=\"form-array-item\">\n                <div class=\"form-array-buttons\">\n                    @if (props.removeItem) {\n                        <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"remove(ix)\">\n                            <i icon=\"trash-outline\"></i>\n                        </button>\n                    }\n                    @if (props.insertItem) {\n                        <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add(ix)\">\n                            <i icon=\"plus-outline\"></i>\n                        </button>\n                    }\n                </div>\n                <formly-field [field]=\"field\"></formly-field>\n            </div>\n        }\n    }\n    <div class=\"form-array-buttons\">\n        @if (props.clearItems) {\n            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"clear()\">\n                <i icon=\"trash-outline\"></i>\n                {{ 'button.clear-items' | translate }}\n            </button>\n        }\n        @if (props.addItem) {\n            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add()\">\n                <i icon=\"plus-outline\"></i>\n                {{ 'button.insert-item' | translate }}\n            </button>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "component", type: i3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "<label class=\"field-label\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n</label>\n<div class=\"field-container\">\n    @if (props.useTabs) {\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                <div class=\"form-array-item\"\n                     [tabsItem]=\"ix\"\n                     [label]=\"(field.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                    <div class=\"form-array-buttons\">\n                        @if (props.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (props.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"field\"></formly-field>\n                </div>\n            }\n        </tabs>\n    } @else {\n        @for (field of field.fieldGroup; track field; let ix = $index) {\n            <div class=\"form-array-item\">\n                <div class=\"form-array-buttons\">\n                    @if (props.removeItem) {\n                        <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                    }\n                    @if (props.insertItem) {\n                        <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                    }\n                </div>\n                <formly-field [field]=\"field\"></formly-field>\n            </div>\n        }\n    }\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", styles: [".form-array-item.hidden-tab{display:none}\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"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "style", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "style", "size"], outputs: ["valueChange"] }, { 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,
-            args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "<label class=\"field-label\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n</label>\n<div class=\"field-container\">\n    @if (props.useTabs) {\n        <ul class=\"form-array-tabs\">\n            @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                <li>\n                    <a class=\"btn\" [ngClass]=\"[currentTab() === ix ? 'btn-primary' : 'btn-secondary']\"\n                       (click)=\"currentTab.set(ix)\">\n                        {{ (field.formControl.value | getValue : props.tabsLabel) || ix + 1 }}\n                    </a>\n                </li>\n            }\n        </ul>\n    }\n    @for (field of field.fieldGroup; track field.key; let ix = $index) {\n        @if (!props.useTabs || ix === currentTab()) {\n            <div class=\"form-array-item\">\n                <div class=\"form-array-buttons\">\n                    @if (props.removeItem) {\n                        <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"remove(ix)\">\n                            <i icon=\"trash-outline\"></i>\n                        </button>\n                    }\n                    @if (props.insertItem) {\n                        <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add(ix)\">\n                            <i icon=\"plus-outline\"></i>\n                        </button>\n                    }\n                </div>\n                <formly-field [field]=\"field\"></formly-field>\n            </div>\n        }\n    }\n    <div class=\"form-array-buttons\">\n        @if (props.clearItems) {\n            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"clear()\">\n                <i icon=\"trash-outline\"></i>\n                {{ 'button.clear-items' | translate }}\n            </button>\n        }\n        @if (props.addItem) {\n            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add()\">\n                <i icon=\"plus-outline\"></i>\n                {{ 'button.insert-item' | translate }}\n            </button>\n        }\n    </div>\n</div>\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "<label class=\"field-label\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n</label>\n<div class=\"field-container\">\n    @if (props.useTabs) {\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                <div class=\"form-array-item\"\n                     [tabsItem]=\"ix\"\n                     [label]=\"(field.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                    <div class=\"form-array-buttons\">\n                        @if (props.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (props.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"field\"></formly-field>\n                </div>\n            }\n        </tabs>\n    } @else {\n        @for (field of field.fieldGroup; track field; let ix = $index) {\n            <div class=\"form-array-item\">\n                <div class=\"form-array-buttons\">\n                    @if (props.removeItem) {\n                        <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                    }\n                    @if (props.insertItem) {\n                        <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                    }\n                </div>\n                <formly-field [field]=\"field\"></formly-field>\n            </div>\n        }\n    }\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", styles: [".form-array-item.hidden-tab{display:none}\n"] }]
         }] });
 
-class DynamicFormChipsComponent extends FieldType {
+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.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
             type: Component,
@@ -1346,7 +1473,7 @@ 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: "14.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<label class=\"field-label\" [for]=\"id\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n    <span class=\"field-required\" *ngIf=\"props.required && props.hideRequiredMarker !== true\" aria-hidden=\"true\">*</span>\n</label>\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            id=\"{{ id }}-formly-validation-error\"\n            [field]=\"field\"\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.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<label class=\"field-label\" [for]=\"id\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n    <span class=\"field-required\" *ngIf=\"props.required && props.hideRequiredMarker !== true\" aria-hidden=\"true\">*</span>\n</label>\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            id=\"{{ id }}-formly-validation-error\"\n            [field]=\"field\"\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,
@@ -1375,9 +1502,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<label class=\"field-label\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n    <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n</label>\n<ng-container #fieldComponent></ng-container>\n" }]
         }] });
 
-class DynamicFormUploadComponent extends FieldType {
+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.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
             type: Component,
@@ -1386,6 +1513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 // --- Components ---
 const components = [
+    DynamicFieldType,
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
@@ -1403,28 +1531,24 @@ const pipes = [];
 
 class NgxDynamicFormModule {
     static getProviders(config) {
-        const { providers } = FormlyModule.forRoot({
-            types: [
-                { name: "array", component: DynamicFormArrayComponent },
-                { name: "chips", component: DynamicFormChipsComponent },
-                { name: "upload", component: DynamicFormUploadComponent, wrappers: ["form-field"] },
-                { name: "file", extends: "upload" },
-                { name: "translation", extends: "array" },
-                ...(config?.types || [])
-            ],
-            wrappers: [
-                { name: "form-field", component: DynamicFormFieldComponent },
-                { name: "form-fieldset", component: DynamicFormFieldsetComponent },
-                { name: "form-group", component: DynamicFormGroupComponent },
-                ...(config?.wrappers || [])
-            ],
-            extras: {
-                renderFormlyFieldElement: false,
-                ...(config?.extras || {})
-            }
-        });
+        const formlyConfigs = (config?.options || []).map(provideFormlyConfig);
         return [
-            ...providers,
+            provideFormlyCore({
+                types: [
+                    { name: "array", component: DynamicFormArrayComponent },
+                    { name: "chips", component: DynamicFormChipsComponent, wrappers: ["form-field"] },
+                    { name: "upload", component: DynamicFormUploadComponent, wrappers: ["form-field"] }
+                ],
+                wrappers: [
+                    { name: "form-field", component: DynamicFormFieldComponent },
+                    { name: "form-fieldset", component: DynamicFormFieldsetComponent },
+                    { name: "form-group", component: DynamicFormGroupComponent }
+                ],
+                extras: {
+                    renderFormlyFieldElement: false
+                }
+            }),
+            ...formlyConfigs,
             DynamicFormService,
             DynamicFormBuilderService,
             DynamicFormSchemaService
@@ -1440,10 +1564,11 @@ class NgxDynamicFormModule {
         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: [DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgxUtilsModule, i3.FormlyModule], exports: [DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective, FormsModule,
+            NgxUtilsModule,
+            FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule] });
@@ -1453,7 +1578,7 @@ class NgxDynamicFormModule {
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule.forChild(), FormsModule,
+            FormlyModule, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule] });
@@ -1471,7 +1596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         NgxUtilsModule,
-                        FormlyModule.forChild()
+                        FormlyModule
                     ],
                     exports: [
                         ...components,
@@ -1492,5 +1617,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_KEY, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, additionalFieldValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, translationValidation, validationMessage };
+export { AsyncSubmitDirective, DynamicFieldType, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_KEY, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, additionalFieldValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, translationValidation, validationMessage };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map