@stemy/ngx-dynamic-form 19.5.5 → 19.5.7

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

@@ -1,11 +1,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 { Observable, firstValueFrom, BehaviorSubject, distinctUntilChanged, combineLatestWith, switchMap, startWith, isObservable, first, Subject } from 'rxjs';
+import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import * as i0 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 { Inject, Injectable, input, output, inject, Renderer2, ElementRef, computed, signal, effect, untracked, 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 { debounceTime } from 'rxjs/operators';
 import { outputToObservable, toSignal, rxResource } 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';
@@ -221,6 +221,16 @@ function maxValueValidation(max, each) {
 function replaceSpecialChars(str, to = "-") {
     return `${str}`.replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
 }
+/**
+ * Creates a new observable that always starts with the controls current value.
+ * @param control AbstractControl to retrieve value changes from
+ * @param timeout Additional timeout
+ */
+function controlValues(control, timeout = 500) {
+    const initial$ = of(control.value); // Emit immediately
+    const changes$ = control.valueChanges.pipe(debounceTime(timeout));
+    return merge(initial$, changes$);
+}
 function getFieldByPath(field, path) {
     if (field.path === path) {
         return field;
@@ -311,8 +321,8 @@ function additionalFieldValues(field, values) {
     const additional = field.props?.additional || {};
     setFieldProp(field, "additional", additional);
 }
-const MIN_INPUT_NUM = -999999999;
-const MAX_INPUT_NUM = 999999999;
+const MIN_INPUT_NUM = -1999999999;
+const MAX_INPUT_NUM = 1999999999;
 const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
 
 class ConfigForSchemaWrap {
@@ -524,24 +534,34 @@ class DynamicFormBuilderService {
         data = data || {};
         const type = `${data.type || "text"}`;
         const autocomplete = data.autocomplete || (type === "password" ? "new-password" : "none");
-        return this.createFormField(key, type === "checkbox" || type === "textarea" ? type : "input", data, {
+        const props = {
             type,
             autocomplete,
             pattern: ObjectUtils.isString(data.pattern) ? data.pattern : "",
             step: data.step,
             cols: data.cols || null,
             rows: data.rows || 10,
-            min: isNaN(data.min) ? undefined : data.min,
-            max: isNaN(data.max) ? undefined : data.max,
-            minLength: isNaN(data.minLength) ? 0 : data.minLength,
-            maxLength: isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength,
             placeholder: data.placeholder || "",
             indeterminate: data.indeterminate || false,
             suffix: data.suffix || "",
             attributes: {
                 autocomplete
             },
-        }, parent, options);
+        };
+        switch (type) {
+            case "number":
+            case "integer":
+                props.min = isNaN(data.min) ? MIN_INPUT_NUM : data.min;
+                props.max = isNaN(data.max) ? MAX_INPUT_NUM : data.max;
+                break;
+            case "string":
+            case "text":
+            case "textarea":
+                props.minLength = isNaN(data.minLength) ? 0 : data.minLength;
+                props.maxLength = isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength;
+                break;
+        }
+        return this.createFormField(key, type === "checkbox" || type === "textarea" ? type : "input", data, props, parent, options);
     }
     createFormSelect(key, data, parent, options) {
         data = data || {};
@@ -556,12 +576,12 @@ class DynamicFormBuilderService {
             onInit: target => {
                 const options = data.options(target);
                 const root = target.formControl.root;
-                target.props.options = options instanceof Observable
+                setFieldProp(target, "options", options instanceof Observable
                     ? options
-                    : root.valueChanges.pipe(distinctUntilChanged(), combineLatestWith(this.language), switchMap(async () => {
+                    : controlValues(root).pipe(combineLatestWith(this.language), switchMap(async () => {
                         const results = await data.options(target) || [];
                         return this.fixSelectOptions(target, results);
-                    }));
+                    })));
             }
         });
         return field;
@@ -768,9 +788,7 @@ class DynamicFormBuilderService {
                 return [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${typeName}`].concat(Array.isArray(classes) ? classes : [classes || ""]).filter(c => c?.length > 0).join(" ");
             },
             additional: (target) => {
-                target.props = target.props || {};
-                target.props.additional = target.props.additional || {};
-                return target.props.additional;
+                return target.props?.additional || {};
             },
             path: target => {
                 const tp = target.parent;
@@ -1046,7 +1064,7 @@ class DynamicFormSchemaService {
     }
     getFormEndpointOptions(property, field) {
         const root = field.formControl.root;
-        return root.valueChanges.pipe(distinctUntilChanged(), debounceTime(500), combineLatestWith(this.builder.language), switchMap(async () => {
+        return controlValues(root).pipe(combineLatestWith(this.builder.language), switchMap(async () => {
             const entries = Object.entries(root.controls || {});
             const endpoint = entries.reduce((res, [key, control]) => {
                 return this.replaceOptionsEndpoint(res, key, control.value);
@@ -1082,11 +1100,8 @@ class DynamicFormSchemaService {
             current = current.parent || current;
         }
         control = !path ? control : control.get(path);
-        return control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(), combineLatestWith(this.builder.language), switchMap(async ([ctrlValue]) => {
-            const currentOpts = current.props.options;
-            const finalOpts = isObservable(currentOpts)
-                ? await firstValueFrom(currentOpts)
-                : (Array.isArray(currentOpts) ? currentOpts : []);
+        return controlValues(control).pipe(combineLatestWith(this.builder.language), switchMap(async ([ctrlValue]) => {
+            const finalOpts = await getSelectOptions(current);
             return this.builder.fixSelectOptions(field, (!Array.isArray(ctrlValue) ? [] : ctrlValue).map(value => {
                 const modelOption = finalOpts.find(t => t.value == value);
                 return { value, label: modelOption?.label || value };
@@ -1320,6 +1335,7 @@ 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();
@@ -1344,11 +1360,9 @@ class AsyncSubmitDirective {
         return this.loading();
     }
     constructor() {
-        effect(() => {
-            if (this.elem.nativeElement.tagName === "BUTTON") {
-                this.renderer.setAttribute(this.elem.nativeElement, "type", "button");
-            }
-        });
+        if (this.elem.nativeElement.tagName === "BUTTON") {
+            this.renderer.setAttribute(this.elem.nativeElement, "type", "button");
+        }
         effect(() => {
             const status = this.status();
             const cb = this.callback();
@@ -1361,7 +1375,8 @@ class AsyncSubmitDirective {
         });
         effect(() => {
             const form = this.form();
-            if (!form)
+            const mode = this.mode();
+            if (!form || mode === "click")
                 return;
             const sub = outputToObservable(form.onSubmit)
                 .pipe(debounceTime(200)).subscribe(() => this.callMethod());
@@ -1369,7 +1384,10 @@ class AsyncSubmitDirective {
         });
     }
     click() {
-        const status = this.status();
+        const mode = untracked(() => this.mode());
+        if (mode === "submit")
+            return;
+        const status = untracked(() => this.status());
         if (status !== "VALID" && status !== "INVALID") {
             this.callback.set(() => this.callMethod());
             return;
@@ -1377,10 +1395,12 @@ class AsyncSubmitDirective {
         this.callMethod();
     }
     callMethod() {
-        if (this.loading())
+        const loading = untracked(() => this.loading());
+        if (loading)
             return;
         this.loading.set(true);
-        this.method()(this.form(), this.context).then(result => {
+        const [method, form, context] = untracked(() => [this.method(), this.form(), this.context()]);
+        method(form, context).then(result => {
             this.loading.set(false);
             if (result) {
                 this.onSuccess.emit(result);
@@ -1395,7 +1415,7 @@ class AsyncSubmitDirective {
         });
     }
     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 }, 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 ɵ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,
@@ -1578,8 +1598,7 @@ class DynamicFormComponent {
         });
     }
     submit() {
-        // TODO: Templ disable submit
-        // this.onSubmit.emit(this);
+        this.onSubmit.emit(this);
     }
     reset() {
         this.options?.resetModel?.();
@@ -1612,11 +1631,11 @@ class DynamicFormArrayComponent extends FieldArrayType {
         this.currentTab.set(Math.min(this.currentTab(), length - 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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}\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"], 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 });
+    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"], 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: "@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}\n"] }]
+            args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </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"] }]
         }] });
 
 class DynamicFormChipsComponent extends DynamicFieldType {
@@ -1638,16 +1657,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
-    ngOnInit() {
-        // console.log(this.field.id, this.field.props?.label, this.options);
-        // console.log(this.field.parent);
-    }
     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        <ng-container #fieldComponent></ng-container>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        <ng-container #fieldComponent></ng-container>\n    </div>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n        {{ props.label | translate }}\n    </legend>\n    <div class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                <formly-field [field]=\"itemField\"></formly-field>\n            }\n        }\n    </div>\n}\n" }]
         }] });
 
 class DynamicFormGroupComponent extends FieldWrapper {
@@ -1775,5 +1790,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, 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, additionalFieldValue, additionalFieldValues, clearFieldArray, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, translationValidation };
+export { AsyncSubmitDirective, DynamicFieldType, 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, additionalFieldValue, additionalFieldValues, clearFieldArray, controlValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map