@stemy/ngx-dynamic-form 19.9.21 → 19.9.22

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

@@ -592,20 +592,6 @@ function arrayItemActionToExpression(actionName) {
             : true;
     };
 }
-function mergeFormFields(formFields) {
-    const res = [];
-    for (const formModel of formFields) {
-        for (const subModel of formModel) {
-            const index = res.findIndex(t => t.key == subModel.key);
-            if (index >= 0) {
-                res[index] = subModel;
-                continue;
-            }
-            res.push(subModel);
-        }
-    }
-    return res;
-}
 function getFormValidationErrors(controls, parentPath = "") {
     const errors = [];
     Object.entries(controls).forEach(([name, control], ix) => {
@@ -671,6 +657,7 @@ class DynamicFormBuilderService {
         return this.setExpressions({
             id,
             parent,
+            schemas: [],
             fieldGroup: fields,
             wrappers: ["form-fieldset"],
             props: {
@@ -791,7 +778,7 @@ class DynamicFormBuilderService {
                 const root = target.formControl.root;
                 setFieldProp(target, "options", options instanceof Observable
                     ? options
-                    : controlValues(root).pipe(combineLatestWith(this.language), switchMap(async () => {
+                    : controlValues(root).pipe(combineLatestWith(this.language), switchMap(async (a, b) => {
                         const results = await factory(target, this.injector) || [];
                         return this.fixSelectOptions(target, results);
                     })));
@@ -948,7 +935,7 @@ class DynamicFormBuilderService {
         }
         if (options.length === 0 || options.findIndex(o => o.value === control.value) >= 0)
             return options;
-        control.setValue(field.defaultValue);
+        control.setValue(options[0].value);
         return options;
     }
     isFieldset(field) {
@@ -994,6 +981,8 @@ class DynamicFormBuilderService {
             prefixTemplateKey: String(data.prefixTemplateKey || ""),
             suffixTemplateKey: String(data.suffixTemplateKey || ""),
             purposes: toStringArray(data.purposes),
+            schemas: toStringArray(data.schemas),
+            discriminator: data.discriminator,
             priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
             wrappers: wrappers.filter(ObjectUtils.isDefined),
             type: data.componentType || type,
@@ -1116,6 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                     args: [DEFAULT_NUMERIC_STEP]
                 }] }] });
 
+const PRIORITY_DIFF = 20;
 class DynamicFormSchemaService {
     openApi;
     injector;
@@ -1141,13 +1131,36 @@ class DynamicFormSchemaService {
         const keys = Object.keys(schema.properties || {});
         const fields = [];
         // Collect all properties of this schema def
+        let priority = Number.MAX_SAFE_INTEGER - (keys.length * PRIORITY_DIFF);
         for (const key of keys) {
             const property = schema.properties[key];
+            // Property priority is necessary when merging different schemas
+            property.priority = property.priority ?? (priority += PRIORITY_DIFF);
             const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
             fields.push(...propFields);
         }
         return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
     }
+    async getFormFieldsForRefs(subSchemas, parent, options) {
+        const subFields = await Promise.all(subSchemas.map(async (s) => this.getFormFieldsForSchema(s, parent, options)));
+        const res = [];
+        for (const ix in subSchemas) {
+            const schema = subSchemas[ix];
+            const fields = subFields[ix];
+            for (const field of fields) {
+                const index = field.key
+                    ? res.findIndex(t => t.key === field.key)
+                    : res.findIndex(t => t.id === field.id);
+                if (index >= 0) {
+                    res[index].schemas.push(schema.name);
+                    continue;
+                }
+                field.schemas.push(schema.name);
+                res.push(field);
+            }
+        }
+        return this.builder.createFieldSets(res, parent, options);
+    }
     async getFormFieldsForProp(property, schema, options, parent) {
         const field = await this.getFormFieldForProp(property, options, parent);
         return !field ? [] : options.customize(field, property, schema);
@@ -1161,16 +1174,16 @@ class DynamicFormSchemaService {
                 return this.getFormUploadConfig(property, options, parent);
             case "boolean":
                 return this.getFormCheckboxConfig(property, options, parent);
-            case "array":
-                return this.getFormArrayConfig(property, options, parent);
         }
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum) || ObjectUtils.isStringWithValue(property.optionsPath) || ObjectUtils.isStringWithValue(property.endpoint)) {
+            // Handle select after boolean, because there could be a boolean field, with a strict enum [true] for validation
             return this.getFormSelectConfig($enum, property, options, parent);
         }
-        // if (this.checkIsEditorProperty(property)) {
-        //     return this.getFormEditorConfig(property, options, parent);
-        // }
+        if (property.type === "array") {
+            // Handle array after select, because there are also multi select fields
+            return this.getFormArrayConfig(property, options, parent);
+        }
         if (property.format == "file" || property.format == "upload") {
             return this.getFormUploadConfig(property, options, parent);
         }
@@ -1184,6 +1197,9 @@ class DynamicFormSchemaService {
         if (refs.length > 0) {
             return this.getFormGroupConfig(property, options, parent);
         }
+        // if (this.checkIsEditorProperty(property)) {
+        //     return this.getFormEditorConfig(property, options, parent);
+        // }
         return this.getFormInputConfig(property, options, parent);
     }
     getFormFieldData(property, options) {
@@ -1210,6 +1226,7 @@ class DynamicFormSchemaService {
             fieldSet: property.fieldSet,
             labelPrefix: property.labelPrefix,
             purposes: property.purposes || property.purpose,
+            discriminator: property.discriminator,
             priority: property.priority,
             componentType: property.componentType,
             wrappers: wrappers.filter(ObjectUtils.isStringWithValue),
@@ -1224,8 +1241,7 @@ class DynamicFormSchemaService {
         return this.builder.createFormArray(property.id, async (sp) => {
             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));
+                return this.getFormFieldsForRefs(subSchemas, sp, options);
             }
             return this.getFormFieldForProp(property.items, options, sp);
         }, {
@@ -1245,8 +1261,7 @@ class DynamicFormSchemaService {
     async getFormGroupConfig(property, options, parent) {
         return this.builder.createFormGroup(property.id, async (sp) => {
             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);
+            return this.getFormFieldsForRefs(subSchemas, sp, options);
         }, {
             ...this.getFormFieldData(property, options),
         }, parent, options);
@@ -2174,7 +2189,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.19", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (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 [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn [attr.data-testid]=\"field.testId + '-add-item'\" icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\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", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n    @if (label) {\n        <label class=\"field-label\">\n            <span [innerHTML]=\"label | safe: 'html'\"></span>\n            <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n            @if (props.markRequired) {\n                <span class=\"field-required\" aria-hidden=\"true\">*</span>\n            }\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\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n                        }\n                        @if (itemField.insertItem) {\n                            <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (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 [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n            }\n            @if (props.addItem) {\n                <btn [attr.data-testid]=\"field.testId + '-add-item'\" icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n            }\n        </div>\n\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", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\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", "path", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
@@ -2207,7 +2222,7 @@ class DynamicFormPasswordComponent extends DynamicFieldType {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, decorators: [{
             type: Component,
@@ -2304,20 +2319,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
 
 class DynamicFormFieldsetComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\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    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n}\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: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\r\n@if (field.display) {\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n    <legend class=\"field-legend\" *ngIf=\"label\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n    </legend>\r\n    <div class=\"field-container\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                <formly-field [field]=\"itemField\"></formly-field>\r\n            }\r\n        }\r\n    </div>\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\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: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n    <legend class=\"field-legend\" *ngIf=\"label\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\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    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\n}\n" }]
+            args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\r\n@if (field.display) {\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n    <legend class=\"field-legend\" *ngIf=\"label\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n    </legend>\r\n    <div class=\"field-container\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                <formly-field [field]=\"itemField\"></formly-field>\r\n            }\r\n        }\r\n    </div>\r\n    <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n                  [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\n" }]
         }] });
 
 class DynamicFormGroupComponent extends FieldWrapper {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\n    <label class=\"field-label\" [for]=\"id\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n        @if (props.markRequired) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n        @if (props.description) {\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\n        }\n    </label>\n</ng-template>\n<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n                      [context]=\"field\"\n                      [additionalContext]=\"{label: label}\"></ng-container>\n    }\n</ng-template>\n@if (field.display) {\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"itemField.id\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\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        @if (showError && field.key !== null) {\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        }\n    </tabs>\n    @if (props.labelAlign === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { 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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\n    <label class=\"field-label\" [for]=\"id\">\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\n        @if (props.markRequired) {\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\n        }\n        @if (props.description) {\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\n        }\n    </label>\n</ng-template>\n<ng-template #labelTemplate>\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\n    @if (label) {\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n                      [context]=\"field\"\n                      [additionalContext]=\"{label: label}\"></ng-container>\n    }\n</ng-template>\n@if (field.display) {\n    @if (props.labelAlign === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\n        @for (itemField of field.fieldGroup; track itemField) {\n            @if (itemField.display) {\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n                    <div class=\"form-fieldset-item\"\n                         [tabsItem]=\"itemField.id\"\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\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        @if (showError && field.key !== null) {\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        }\n    </tabs>\n    @if (props.labelAlign === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\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"] }]
+            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n    <label class=\"field-label\" [for]=\"id\">\r\n        <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n        @if (props.markRequired) {\r\n            <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n        }\r\n        @if (props.description) {\r\n            <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n        }\r\n    </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n    @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n    @if (label) {\r\n        <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n                      [context]=\"field\"\r\n                      [additionalContext]=\"{label: label}\"></ng-container>\r\n    }\r\n</ng-template>\r\n@if (field.display) {\r\n    @if (props.labelAlign === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n    <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n        @for (itemField of field.fieldGroup; track itemField) {\r\n            @if (itemField.display) {\r\n                @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n                    <div class=\"form-fieldset-item\"\r\n                         [tabsItem]=\"itemField.id\"\r\n                         [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n                         [label]=\"itemField.props.label\">\r\n                        <formly-field [field]=\"itemField\"></formly-field>\r\n                    </div>\r\n                } @else {\r\n                    <formly-field [field]=\"itemField\"></formly-field>\r\n                }\r\n            }\r\n        }\r\n        @if (showError && field.key !== null) {\r\n            <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n                <formly-validation-message\r\n                    [field]=\"field\"\r\n                    id=\"{{ id }}-formly-validation-error\"\r\n                    role=\"alert\"\r\n                ></formly-validation-message>\r\n            </div>\r\n        }\r\n    </tabs>\r\n    @if (props.labelAlign === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n}\r\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"] }]
         }] });
 
 // --- Components ---