@stemy/ngx-dynamic-form 19.5.11 → 19.6.0

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

@@ -324,13 +324,6 @@ function setFieldHooks(field, hooks) {
             : hooks[name];
     });
 }
-function additionalFieldValue(field, path) {
-    return ObjectUtils.getValue(field.additional, path, null, false);
-}
-function additionalFieldValues(field, values) {
-    const additional = field.props?.additional || {};
-    setFieldProp(field, "additional", ObjectUtils.assign(additional, values || {}));
-}
 const MIN_INPUT_NUM = -1999999999;
 const MAX_INPUT_NUM = 1999999999;
 const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
@@ -401,15 +394,6 @@ function convertToDate(value) {
 function handleConfigs(configs) {
     return Array.isArray(configs) ? configs : [configs];
 }
-function isStringWithVal(val) {
-    return typeof val == "string" && val.length > 0;
-}
-function findRefs(property) {
-    const refs = Array.isArray(property.allOf)
-        ? property.allOf.map(o => o.$ref).filter(isStringWithVal)
-        : [property.items?.$ref, property.$ref].filter(isStringWithVal);
-    return refs.map(t => t.split("/").pop());
-}
 function arrayItemActionToExpression(actionName) {
     return (field) => {
         const action = field.parent?.props?.[actionName];
@@ -515,7 +499,7 @@ class DynamicFormBuilderService {
                 group.push(field);
                 continue;
             }
-            // Otherwise just push the fields to the others
+            // Otherwise, push the fields to the others
             others.push(field);
         }
         // Create a field-set wrapper for each group and concat the other fields to the end
@@ -529,9 +513,7 @@ class DynamicFormBuilderService {
                 props: {
                     label: this.getLabel(key, key, parent, options),
                     hidden: false,
-                    additional: {
-                        className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
-                    }
+                    className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
                 },
                 hooks: {},
                 expressions: {}
@@ -578,9 +560,10 @@ class DynamicFormBuilderService {
         const type = `${data.type || "select"}`;
         const field = this.createFormField(key, type === "radio" ? type : "select", data, {
             type,
-            multiple: data.multiple,
+            multiple: data.multiple === true,
+            allowEmpty: data.allowEmpty === true,
             groupBy: data.groupBy,
-            allowEmpty: data.allowEmpty
+            invert: data.invert === true
         }, parent, options);
         setFieldHooks(field, {
             onInit: target => {
@@ -622,7 +605,6 @@ class DynamicFormBuilderService {
             useTabs: data.useTabs === true,
         }, parent, options);
         group.defaultValue = {};
-        group.wrappers = ["form-group"];
         const result = fields(group);
         const handleGroup = (fieldGroup) => {
             group.fieldGroup = fieldGroup;
@@ -658,11 +640,7 @@ class DynamicFormBuilderService {
                 array.fieldArray = {
                     wrappers: ["form-group"],
                     fieldGroup: items,
-                    props: {
-                        additional: {
-                            className: "dynamic-form-field dynamic-form-group",
-                        }
-                    },
+                    className: "dynamic-form-field dynamic-form-group",
                     defaultValue: [],
                     hooks: {},
                     expressions
@@ -703,7 +681,7 @@ class DynamicFormBuilderService {
         options = await Promise.all(options.map(async (option) => {
             const classes = Array.isArray(option.classes) ? option.classes : [`${option.classes}`];
             option = Object.assign({}, option);
-            option.className = classes.filter(isStringWithVal).join(" ");
+            option.className = classes.filter(ObjectUtils.isStringWithValue).join(" ");
             option.label = await this.languages.getTranslation(option.label);
             option.value = option.value ?? option.id;
             option.id = option.id ?? option.value;
@@ -725,8 +703,13 @@ class DynamicFormBuilderService {
         return labelItems.filter(l => l.length > 0).join(".");
     }
     createFormField(key, type, data, props, parent, options) {
+        const wrappers = Array.isArray(data.wrappers) ? Array.from(data.wrappers) : [];
+        if (type !== "array") {
+            wrappers.unshift(!type ? "form-group" : "form-field");
+        }
         const field = {
             key,
+            wrappers,
             type: data.componentType || type,
             fieldSet: String(data.fieldSet || ""),
             resetOnHide: false,
@@ -739,13 +722,12 @@ class DynamicFormBuilderService {
                 label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
                     ?? this.getLabel(key, data.label, parent, options),
                 hideLabel: data.hideLabel === true,
+                classes: data.classes || [],
+                layout: data.layout || [],
+                className: data.className || "",
                 hideRequiredMarker: data.hideRequiredMarker === true,
                 formCheck: "nolabel",
-                labelPosition: "before",
-                additional: {
-                    ...(data.additional || {}),
-                    classes: data.classes || []
-                }
+                labelPosition: "before"
             },
             modelOptions: {
                 updateOn: "change"
@@ -789,7 +771,7 @@ class DynamicFormBuilderService {
                 if (!target.display) {
                     return `dynamic-form-field dynamic-form-hidden`;
                 }
-                const { classes, className } = target.additional || {};
+                const { classes, layout, className } = target.props || {};
                 if (className) {
                     return className;
                 }
@@ -797,10 +779,7 @@ class DynamicFormBuilderService {
                 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) => {
-                return target.props?.additional || {};
+                return [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${typeName}`].concat(Array.isArray(classes) ? classes : [classes || ""], (Array.isArray(layout) ? layout : [layout || ""]).map(layout => `dynamic-form-layout-${layout}`)).filter(c => c?.length > 0).join(" ");
             },
             path: target => {
                 const tp = target.parent;
@@ -854,10 +833,7 @@ class DynamicFormSchemaService {
     async getSchema(name) {
         return this.openApi.getSchema(name);
     }
-    async getFormFieldsForSchema(name, parent, customizeOrOptions) {
-        const schema = await this.getSchema(name);
-        if (!schema)
-            return [];
+    async getFormFieldsForSchema(schema, parent, customizeOrOptions) {
         const options = await toWrapOptions(customizeOrOptions, this.injector, schema);
         const keys = Object.keys(schema.properties || {});
         const fields = [];
@@ -875,7 +851,7 @@ class DynamicFormSchemaService {
     }
     async getFormFieldForProp(property, options, parent) {
         const $enum = property.items?.enum || property.enum;
-        if (Array.isArray($enum) || isStringWithVal(property.optionsPath) || isStringWithVal(property.endpoint)) {
+        if (Array.isArray($enum) || ObjectUtils.isStringWithValue(property.optionsPath) || ObjectUtils.isStringWithValue(property.endpoint)) {
             return this.getFormSelectConfig($enum, property, options, parent);
         }
         switch (property.type) {
@@ -892,7 +868,8 @@ class DynamicFormSchemaService {
         // if (this.checkIsEditorProperty(property)) {
         //     return this.getFormEditorConfig(property, options, parent);
         // }
-        if (findRefs(property).length > 0) {
+        const refs = await this.openApi.getReferences(property, options.schema);
+        if (refs.length > 0) {
             return this.getFormGroupConfig(property, options, parent);
         }
         if (property.format == "file" || property.format == "upload") {
@@ -917,16 +894,21 @@ class DynamicFormSchemaService {
         return {
             hidden: property.hidden === true,
             disabled: property.disabled === true,
+            label: property.label,
+            hideRequiredMarker: property.hideRequiredMarker === true,
+            hideLabel: property.hideLabel === true,
+            classes: property.classes,
+            layout: property.layout,
             serialize: property.serialize === true,
-            componentType: property.componentType,
             fieldSet: property.fieldSet,
-            classes: property.classes,
+            componentType: property.componentType,
+            wrappers: property.wrappers,
             validators
         };
     }
     async getFormArrayConfig(property, options, parent) {
         return this.builder.createFormArray(property.id, async (sp) => {
-            const subSchemas = findRefs(property);
+            const subSchemas = await this.openApi.getReferences(property, options.schema);
             if (subSchemas.length > 0) {
                 const subModels = await Promise.all(subSchemas.map(s => this.getFormFieldsForSchema(s, sp, options)));
                 return mergeFormFields(ObjectUtils.copy(subModels));
@@ -948,9 +930,9 @@ class DynamicFormSchemaService {
     }
     async getFormGroupConfig(property, options, parent) {
         return this.builder.createFormGroup(property.id, async (sp) => {
-            const subSchemas = findRefs(property);
-            const subModels = await Promise.all(subSchemas.map(s => this.getFormFieldsForSchema(s, sp, options)));
-            return mergeFormFields(subModels);
+            const subSchemas = await this.openApi.getReferences(property, options.schema);
+            const subFields = await Promise.all(subSchemas.map(s => this.getFormFieldsForSchema(s, sp, options)));
+            return mergeFormFields(subFields);
         }, {
             ...this.getFormFieldData(property, options),
         }, parent, options);
@@ -999,7 +981,7 @@ class DynamicFormSchemaService {
             placeholder: property.placeholder || ""
         }, parent, options);
     }
-    // getFormEditorConfig(property: IOpenApiSchemaProperty, options: ConfigForSchemaWrap): DynamicEditorModelConfig {
+    // getFormEditorConfig(property: OpenApiSchemaProperty, options: ConfigForSchemaWrap): DynamicEditorModelConfig {
     //     const sub = property.type == "array" ? property.items || property : property;
     //     return Object.assign(
     //         this.getFormControlConfig(property, options),
@@ -1034,6 +1016,7 @@ class DynamicFormSchemaService {
             type: property.format || "select",
             multiple: property.type == "array",
             groupBy: property.groupBy,
+            invert: property.invert,
             allowEmpty: property.allowEmpty
         }, parent, options);
     }
@@ -1059,7 +1042,7 @@ class DynamicFormSchemaService {
         if (Array.isArray($enum)) {
             return this.getFormEnumOptions($enum, property.id, options, field);
         }
-        if (isStringWithVal(property.endpoint)) {
+        if (ObjectUtils.isStringWithValue(property.endpoint)) {
             return this.getFormEndpointOptions(property, field);
         }
         return this.getFormPathOptions(property.optionsPath, field);
@@ -1081,8 +1064,10 @@ class DynamicFormSchemaService {
             const endpoint = entries.reduce((res, [key, control]) => {
                 return this.replaceOptionsEndpoint(res, key, control.value);
             }, `${property.endpoint}`);
-            this.api.cache[endpoint] = this.api.cache[endpoint] || this.api.list(endpoint, this.api.makeListParams(1, -1));
-            const data = await this.api.cache[endpoint];
+            const data = await this.api.list(endpoint, this.api.makeListParams(1, -1), {
+                cache: this.api.cached(property.cache),
+                read: String(property.responseProperty || "")
+            });
             const items = ObjectUtils.isArray(data)
                 ? data
                 : (ObjectUtils.isArray(data.items) ? data.items : []);
@@ -1226,7 +1211,7 @@ class DynamicFormService {
         };
         const schema = await this.fs.getSchema(name);
         const wrapOptions = await toWrapOptions(customizeOrOptions, this.injector, schema, `"DynamicFormService.${restrictedMethod}" is called from a customizer, which is not allowed. Please use DynamicFormSchemaService instead!`);
-        const fields = await this.fs.getFormFieldsForSchema(name, config, wrapOptions);
+        const fields = await this.fs.getFormFieldsForSchema(schema, config, wrapOptions);
         const fieldGroup = [...fields];
         config.fieldGroup = fieldGroup;
         // There are no actual fields in the schema, or no schema exists
@@ -1578,9 +1563,7 @@ class DynamicFormComponent {
                 label: "",
                 useTabs: this.useTabs(),
                 hidden: false,
-                additional: {
-                    className: "dynamic-form-root-group"
-                }
+                className: "dynamic-form-root-group"
             }, null, options)
         ];
     });
@@ -1646,7 +1629,7 @@ 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}.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <div class=\"field-container\">\n        <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n            @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n                <ng-template #fieldContent>\n                    <div class=\"form-array-buttons\">\n                        @if (itemField.removeItem) {\n                            <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n                        }\n                    </div>\n                    <formly-field [field]=\"itemField\"></formly-field>\n                </ng-template>\n                @if (props.useTabs) {\n                    <div class=\"form-array-item\"\n                         [tabsItem]=\"ix\"\n                         [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                } @else {\n                    <div class=\"form-array-item\">\n                        <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n                    </div>\n                }\n            }\n        </tabs>\n\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n    </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
@@ -1662,6 +1645,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
         }] });
 
+class DynamicFormUploadComponent extends DynamicFieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-upload", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n" }]
+        }] });
+
+/**
+ * This is just a test wrapper component
+ */
+class DynamicFormAlertComponent extends FieldWrapper {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormAlertComponent, isStandalone: false, selector: "dynamic-form-alert", usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-alert\">\n    <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-alert", encapsulation: ViewEncapsulation.None, template: "<div class=\"dynamic-form-alert\">\n    <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"] }]
+        }] });
+
 class DynamicFormFieldComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "@if (props.label && props.hideLabel !== true) {\n    <label class=\"field-label\" [for]=\"id\">\n        {{ props.label | translate }}\n        <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        @if (props.required && props.hideRequiredMarker !== true) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n    </label>\n}\n<div class=\"field-container\">\n    <ng-container #fieldComponent></ng-container>\n    <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n        <formly-validation-message\n            [field]=\"field\"\n            id=\"{{ id }}-formly-validation-error\"\n            role=\"alert\"\n        ></formly-validation-message>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
@@ -1682,32 +1686,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class DynamicFormGroupComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size"], 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 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: "@if (field.display) {\n    @if (props.label && props.hideLabel !== true) {\n        <label class=\"field-label\">\n            {{ props.label | translate }}\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n        </label>\n    }\n    <tabs class=\"field-container\">\n        @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"ix\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid ? 'valid' : 'invalid']\"\n                         [label]=\"itemField.props.label\">\n                        <formly-field [field]=\"itemField\"></formly-field>\n                    </div>\n                } @else {\n                    <formly-field [field]=\"itemField\"></formly-field>\n                }\n            }\n        }\n    </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
         }] });
 
-class DynamicFormUploadComponent extends DynamicFieldType {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-upload", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n" }]
-        }] });
-
 // --- Components ---
 const components = [
     DynamicFieldType,
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormUploadComponent,
+    DynamicFormAlertComponent,
     DynamicFormFieldComponent,
     DynamicFormFieldsetComponent,
     DynamicFormGroupComponent,
-    DynamicFormUploadComponent
 ];
 // --- Directives ---
 const directives = [
@@ -1723,13 +1719,14 @@ class NgxDynamicFormModule {
             provideFormlyCore({
                 types: [
                     { name: "array", component: DynamicFormArrayComponent },
-                    { name: "chips", component: DynamicFormChipsComponent, wrappers: ["form-field"] },
-                    { name: "upload", component: DynamicFormUploadComponent, wrappers: ["form-field"] }
+                    { name: "chips", component: DynamicFormChipsComponent },
+                    { name: "upload", component: DynamicFormUploadComponent }
                 ],
                 wrappers: [
+                    { name: "form-alert", component: DynamicFormAlertComponent },
                     { name: "form-field", component: DynamicFormFieldComponent },
                     { name: "form-fieldset", component: DynamicFormFieldsetComponent },
-                    { name: "form-group", component: DynamicFormGroupComponent }
+                    { name: "form-group", component: DynamicFormGroupComponent },
                 ],
                 extras: {
                     resetFieldOnHide: false,
@@ -1752,11 +1749,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: [DynamicFieldType, 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, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
-            FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective, FormsModule,
+            FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule] });
@@ -1805,5 +1802,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, controlStatus, controlValues, 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, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, addFieldValidators, clearFieldArray, controlStatus, controlValues, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map