@stemy/ngx-dynamic-form 19.4.8 → 19.4.11

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

@@ -1,8 +1,8 @@
 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 * 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 { BehaviorSubject, Observable, distinctUntilChanged, combineLatestWith, switchMap, startWith, isObservable, firstValueFrom, first, Subject } from 'rxjs';
 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';
@@ -211,8 +211,39 @@ function getFieldsByPredicate(field, cb) {
 function getFieldsByKey(field, key) {
     return getFieldsByPredicate(field, f => f.key === key);
 }
+async function getSelectOptions(field) {
+    const options = field.props?.options || [];
+    if (options instanceof Observable) {
+        return firstValueFrom(options);
+    }
+    return options;
+}
+function replaceFieldArray(field, items) {
+    const model = field.model || [];
+    model.splice(0, model.length, ...items);
+    field.options.build(field);
+}
+function clearFieldArray(field) {
+    const model = field.model || [];
+    model.splice(0, model.length);
+    field.options.build(field);
+}
+function insertToFieldArray(field, item, ix) {
+    const model = field.model || [];
+    ix = ix == null ? model.length : ix;
+    model.splice(ix, 0, item);
+    field.options.build(field);
+}
+function removeFromFieldArray(field, ix) {
+    const model = field.model || [];
+    model.splice(ix, 1);
+    field.options.build(field);
+}
 function setFieldHidden(field, hidden = true) {
-    field.hide = hidden;
+    field.props = {
+        ...(field.props || {}),
+        hidden
+    };
 }
 function setFieldDisabled(field, disabled = true) {
     field.props = {
@@ -236,9 +267,7 @@ function setFieldHooks(field, hooks) {
     });
 }
 function additionalFieldValue(field, path) {
-    field.props = field.props || {};
-    field.props.additional = field.props.additional || {};
-    return ObjectUtils.getValue(field.props.additional, path, null, false);
+    return ObjectUtils.getValue(field.additional, path, null, false);
 }
 function additionalFieldValues(field, values) {
     field.props = field.props || {};
@@ -262,6 +291,9 @@ class ConfigForSchemaWrap {
     get testId() {
         return this.opts.testId;
     }
+    get context() {
+        return this.opts.context;
+    }
     fieldCustomizer;
     constructor(opts, mode, injector, schema) {
         this.opts = opts;
@@ -320,6 +352,17 @@ function findRefs(property) {
         : [property.items?.$ref, property.$ref].filter(isStringWithVal);
     return refs.map(t => t.split("/").pop());
 }
+function arrayItemActionToExpression(action) {
+    const cb = action === false
+        ? () => false
+        : (ObjectUtils.isFunction(action) ? action : () => true);
+    return (field) => {
+        // Needed to immediately reflect the changes on the view
+        field.options.detectChanges(field);
+        // Returns the actual calculated value
+        return cb(field.formControl?.value, Number(field.key), field);
+    };
+}
 function mergeFormFields(formFields) {
     const res = [];
     for (const formModel of formFields) {
@@ -403,9 +446,8 @@ class DynamicFormBuilderService {
             return true;
         });
         for (const field of fields) {
-            const fsName = field.hide ? null : String(field.fieldSet || "");
-            // If we have a fieldset name defined and have actual fields for it
-            // then push the property fields into a group
+            const fsName = String(field.fieldSet || "");
+            // If we have a fieldset name defined, then push the property fields into a group
             if (fsName) {
                 const fsId = !parent?.path ? fsName : `${parent.path}.${fsName}`;
                 const group = groups[fsId] || [];
@@ -424,10 +466,12 @@ class DynamicFormBuilderService {
                 parent,
                 fieldGroup: groups[id],
                 wrappers: ["form-fieldset"],
-                className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`,
                 props: {
                     label: this.getLabel(key, key, parent, options),
-                    hidden: false
+                    hidden: false,
+                    additional: {
+                        className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
+                    }
                 },
                 hooks: {},
                 expressions: {}
@@ -504,7 +548,9 @@ class DynamicFormBuilderService {
     }
     createFormGroup(key, fields, data, parent, options) {
         data = data || {};
-        const group = this.createFormField(key, undefined, data, {}, parent, options);
+        const group = this.createFormField(key, undefined, data, {
+            useTabs: data.useTabs === true
+        }, parent, options);
         group.wrappers = ["form-group"];
         const result = fields(group);
         const handleGroup = (fieldGroup) => {
@@ -523,22 +569,29 @@ class DynamicFormBuilderService {
             useTabs: data.useTabs === true,
             tabsLabel: `${data.tabsLabel || "label"}`,
             addItem: data.addItem !== false,
-            insertItem: data.insertItem !== false,
-            cloneItem: data.cloneItem !== false,
-            moveItem: data.moveItem !== false,
-            removeItem: data.removeItem !== false,
             clearItems: data.clearItems !== false
         }, parent, options);
         const result = fields(array);
         const handleItems = (items) => {
+            const expressions = {
+                insertItem: arrayItemActionToExpression(data.insertItem),
+                cloneItem: arrayItemActionToExpression(data.cloneItem),
+                moveItem: arrayItemActionToExpression(data.moveItem),
+                removeItem: arrayItemActionToExpression(data.removeItem)
+            };
             if (Array.isArray(items)) {
                 array.fieldArray = {
                     wrappers: ["form-group"],
-                    className: "dynamic-form-field dynamic-form-group",
                     fieldGroup: items,
+                    props: {
+                        additional: {
+                            className: "dynamic-form-field dynamic-form-group",
+                        }
+                    },
                     hooks: {},
-                    expressions: {}
+                    expressions
                 };
+                this.setExpressions(array.fieldArray, options);
                 return array;
             }
             const props = items.props || {};
@@ -556,8 +609,10 @@ class DynamicFormBuilderService {
                 ...items,
                 props: {
                     ...items.props,
-                    label: ""
-                }
+                    label: "",
+                },
+                hooks: {},
+                expressions
             };
             return array;
         };
@@ -602,7 +657,6 @@ class DynamicFormBuilderService {
         const field = {
             key,
             validators,
-            hide: data.hidden === true,
             type: data.componentType || type,
             fieldSet: String(data.fieldSet || ""),
             resetOnHide: false,
@@ -615,11 +669,14 @@ class DynamicFormBuilderService {
             props: {
                 ...props,
                 disabled: data.disabled === true,
+                hidden: data.hidden === true,
                 formCheck: "nolabel",
                 required: !!validators.required,
                 label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
                     ?? this.getLabel(key, data.label, parent, options),
-                additional: {}
+                additional: {
+                    classes: data.classes || []
+                }
             },
             modelOptions: {
                 updateOn: "change"
@@ -628,14 +685,7 @@ class DynamicFormBuilderService {
             hooks: {},
             expressions: {
                 serializer: () => data.serializer,
-                serialize: () => data.serialize,
-                additional: (target) => target.props.additional,
-                className: (target) => {
-                    const type = ObjectUtils.isConstructor(target.type)
-                        ? `${target.type.name}`.toLowerCase().replace("component", "")
-                        : `${target.type || "group"}`;
-                    return target.hide ? `` : [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${type}`].concat(Array.isArray(data.classes) ? data.classes : [data.classes || ""]).filter(c => c?.length > 0).join(" ");
-                }
+                serialize: () => data.serialize
             }
         };
         // Parent object will be available for customizers as a property, until it gets redefined by formly
@@ -649,18 +699,31 @@ 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}`
-                        };
-                    });
+            display: target => {
+                const display = target.props?.hidden !== true;
+                if (target.fieldGroup?.length) {
+                    return display && target.fieldGroup.some(f => f.display);
+                }
+                return display;
+            },
+            className: (target) => {
+                if (target.display === false) {
+                    return `dynamic-form-field dynamic-form-hidden`;
                 }
-                return [];
+                const { classes, className } = target.additional || {};
+                if (className) {
+                    return className;
+                }
+                const type = String(target.type || "group").replace("formly-", "");
+                const typeName = ObjectUtils.isConstructor(type)
+                    ? `${target.type.name}`.toLowerCase().replace("component", "")
+                    : type;
+                return [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${typeName}`].concat(Array.isArray(classes) ? classes : [classes || ""]).filter(c => c?.length > 0).join(" ");
+            },
+            additional: (target) => {
+                target.props = target.props || {};
+                target.props.additional = target.props.additional || {};
+                return target.props.additional;
             },
             path: target => {
                 const tp = target.parent;
@@ -739,34 +802,32 @@ class DynamicFormSchemaService {
             return this.getFormSelectConfig($enum, property, options, parent);
         }
         switch (property.type) {
-            case "string":
-            case "number":
-            case "integer":
-            case "textarea":
-                // if (this.checkIsEditorProperty(property)) {
-                //     return this.getFormEditorConfig(property, options, parent);
-                // }
-                if (property.format == "textarea") {
-                    return this.getFormTextareaConfig(property, options, parent);
-                }
-                if (property.format == "date" || property.format == "date-time") {
-                    return this.getFormDatepickerConfig(property, options, parent);
-                }
-                return this.getFormInputConfig(property, options, parent);
             // case "object":
             //     return this.getFormEditorConfig(property, options, parent);
+            case "file":
+            case "upload":
+                return this.getFormUploadConfig(property, options, parent);
             case "boolean":
                 return this.getFormCheckboxConfig(property, options, parent);
             case "array":
                 return this.getFormArrayConfig(property, options, parent);
-            case "file":
-            case "upload":
-                return this.getFormUploadConfig(property, options, parent);
         }
+        // if (this.checkIsEditorProperty(property)) {
+        //     return this.getFormEditorConfig(property, options, parent);
+        // }
         if (findRefs(property).length > 0) {
             return this.getFormGroupConfig(property, options, parent);
         }
-        return null;
+        if (property.format == "file" || property.format == "upload") {
+            return this.getFormUploadConfig(property, options, parent);
+        }
+        if (property.format == "textarea") {
+            return this.getFormTextareaConfig(property, options, parent);
+        }
+        if (property.format == "date" || property.format == "date-time") {
+            return this.getFormDatepickerConfig(property, options, parent);
+        }
+        return this.getFormInputConfig(property, options, parent);
     }
     getFormFieldData(property, options) {
         const validators = {};
@@ -1415,6 +1476,7 @@ class DynamicFormComponent {
     labelPrefix = input("label");
     labelCustomizer = input(null);
     testId = input("");
+    useTabs = input(false);
     data = input({});
     fields = input(null);
     fieldChanges = new Subject();
@@ -1425,11 +1487,19 @@ class DynamicFormComponent {
         initialValue: this.languages.enableTranslations
     });
     config = computed(() => {
-        return this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, {
+        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
+            }, null, options)
+        ];
     });
     group = computed(() => {
         this.config();
@@ -1467,11 +1537,11 @@ 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.LegacyFormlyForm, selector: "formly-form" }], 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 }, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+            args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], ctorParameters: () => [] });
 
 class DynamicFormArrayComponent extends FieldArrayType {
@@ -1494,11 +1564,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: "<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", "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: "<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    <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", 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 });
 }
 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        <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"] }]
+            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    <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", styles: [".form-array-item.hidden-tab{display:none}\n"] }]
         }] });
 
 class DynamicFormChipsComponent extends DynamicFieldType {
@@ -1512,11 +1582,11 @@ 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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    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 (field.display) {\n    <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\" 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                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\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,
-            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, 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" }]
+            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    <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\" 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                [field]=\"field\"\n                id=\"{{ id }}-formly-validation-error\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n}\n" }]
         }] });
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
@@ -1525,20 +1595,20 @@ class DynamicFormFieldsetComponent extends FieldWrapper {
         // 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: "14.0.0", version: "19.2.14", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "<legend class=\"field-legend\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n</legend>\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n</div>\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        <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 });
 }
 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: "<legend class=\"field-legend\" *ngIf=\"props.label\">\n    {{ props.label | translate }}\n</legend>\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n</div>\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        <ng-container #fieldComponent></ng-container>\n    </div>\n}\n" }]
         }] });
 
 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: "14.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", 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<ng-container #fieldComponent></ng-container>\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: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    <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    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (props.useTabs && itemField.display && itemField.wrappers | includes: 'form-fieldset') {\n                <div class=\"form-fieldset-item\"\n                     [tabsItem]=\"ix\"\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    </tabs>\n}\n", styles: [".form-fieldset-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", "classes"] }, { 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.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,
-            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" }]
+            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n    <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    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (props.useTabs && itemField.display && itemField.wrappers | includes: 'form-fieldset') {\n                <div class=\"form-fieldset-item\"\n                     [tabsItem]=\"ix\"\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    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}\n"] }]
         }] });
 
 class DynamicFormUploadComponent extends DynamicFieldType {
@@ -1656,5 +1726,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_KEY, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, additionalFieldValue, additionalFieldValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, setFieldHooks, 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, additionalFieldValue, additionalFieldValues, clearFieldArray, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, setFieldHooks, translationValidation, validationMessage };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map