@messaia/cdk 13.3.3 → 13.3.5-rc02

package/fesm2015/messaia-cdk.mjs

@@ -5,7 +5,7 @@ import { HttpParams, HttpClient, HttpRequest, HttpHeaders, HttpEventType, HttpRe
 import * as i0 from '@angular/core';
 import { Directive, Input, Pipe, HostListener, Component, NgModule, Injectable, Injector, ViewEncapsulation, COMPILER_OPTIONS, CompilerFactory, Compiler, ContentChildren, Optional, SkipSelf, NgZone, ElementRef, ViewChildren, ViewChild, forwardRef, ContentChild, EventEmitter, ViewContainerRef, Output, LOCALE_ID, Inject, HostBinding, Self, Attribute, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormControlName, FormControlDirective, FormGroup as FormGroup$1, NG_VALUE_ACCESSOR, FormArray, FormControl, NG_ASYNC_VALIDATORS, NG_VALIDATORS, AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormControlName, FormControlDirective, FormGroup, NG_VALUE_ACCESSOR, FormArray, FormControl, NG_ASYNC_VALIDATORS, NG_VALIDATORS, AbstractControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/dialog';
 import { MatDialogConfig, MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionPanel } from '@angular/material/expansion';
@@ -3134,48 +3134,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 args: [MatExpansionPanel]
             }] } });
 
-const formFieldGroupMetadataKey = Symbol('vdFormFieldGroup');
-
-class FormFieldGroup {
-    /**
-     * constructor
-     * @param init
-     */
-    constructor(init) {
-        this.name = 'details';
-        this.fields = [];
-        Object.assign(this, init);
-    }
-}
+const formFieldsMetadataKey = Symbol('vdFormFields');
+const formFieldGroupsMetadataKey = Symbol('vdFormFieldGroup');
 
-/**
- * Gets poperties decoarated with @FormField grouped by row
- * @param origin
- * @returns
- * @deprecated
- */
-function getFormGroupsOld(origin) {
-    return Reflect.getMetadata(formFieldGroupMetadataKey, origin);
-}
 /**
  * Gets poperties decoarated with @FormField grouped by row
  * @param origin
  * @returns
  */
 function getFormGroups(origin) {
-    const grouped = Utils.groupArrayBy(Reflect.getMetadata(formFieldGroupMetadataKey, origin), x => x.groupName);
-    return Array.from(grouped).map(([_, value]) => new FormFieldGroup({
-        name: value[0].groupName || null,
-        header: value[0].groupHeader,
-        fields: value,
-        groups: Object.values((value).reduce(function (r, a) {
-            r[a.row] = (r[a.row] || []);
-            r[a.row].push(a);
-            r[a.row].forEach((x, i) => x.index = x.index || i);
-            Utils.sortArray(r[a.row], 'index');
-            return r;
-        }, Object.create(null)))
-    }));
+    return Reflect.getMetadata(formFieldGroupsMetadataKey, origin);
 }
 
 // @dynamic
@@ -3478,12 +3446,14 @@ class GenericFormBaseComponent extends BaseComponent {
     validateForm(form = null) {
         var form = form || this.form;
         /* Set the form as submitted */
-        if (form && form instanceof FormGroup$1) {
+        if (form && form instanceof FormGroup) {
             /* Set form as submitted */
             form['submitted'] = true;
             /* Update value and validity */
             form.updateValueAndValidity();
         }
+        /* Print some debug information */
+        this.debugForm(form);
     }
     /**
      * Validates the form
@@ -3491,9 +3461,7 @@ class GenericFormBaseComponent extends BaseComponent {
      */
     isFormValid(form = null) {
         /* Print some debug information */
-        if (this.debug) {
-            this.debugForm(form);
-        }
+        this.debugForm(form);
         /* If the form ist not valid.. */
         if (!form.valid) {
             /* Mark invalid controls as dirtty and touched */
@@ -3568,15 +3536,17 @@ class GenericFormBaseComponent extends BaseComponent {
      * @param form
      */
     debugForm(form = null) {
-        console.log('Form:', form);
-        Object.keys(form.controls).forEach(key => {
-            const controlErrors = form.controls[key].errors;
-            if (controlErrors != null) {
-                Object.keys(controlErrors).forEach(keyError => {
-                    console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
-                });
-            }
-        });
+        if (this.debug) {
+            console.log('Form:', form);
+            Object.keys(form.controls).forEach(key => {
+                const controlErrors = form.controls[key].errors;
+                if (controlErrors != null) {
+                    Object.keys(controlErrors).forEach(keyError => {
+                        console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+                    });
+                }
+            });
+        }
     }
     /**
      * Add toolbar menu items
@@ -7012,10 +6982,10 @@ function isResetControl(controlName, control, options) {
                     isReset = control instanceof FormControl;
                     break;
                 case ResetFormType.ControlsAndFormGroupsOnly:
-                    isReset = control instanceof FormControl || control instanceof FormGroup$1;
+                    isReset = control instanceof FormControl || control instanceof FormGroup;
                     break;
                 case ResetFormType.FormGroupsOnly:
-                    isReset = control instanceof FormGroup$1;
+                    isReset = control instanceof FormGroup;
                     break;
                 case ResetFormType.FormArraysOnly:
                     isReset = control instanceof FormArray;
@@ -7056,7 +7026,7 @@ function getNestedOptions(controlName, options) {
     return undefined;
 }
 
-class RxFormGroup extends FormGroup$1 {
+class RxFormGroup extends FormGroup {
     constructor(model, entityObject, controls, validatorOrOpts, asyncValidator) {
         super(controls, validatorOrOpts, asyncValidator);
         this.model = model;
@@ -7123,7 +7093,7 @@ class RxFormGroup extends FormGroup$1 {
         let isDirty = false;
         for (let name in this.value) {
             let currentValue = this.modelInstance[name];
-            if (!(this.controls[name] instanceof FormGroup$1 || this.controls[name] instanceof FormArray)) {
+            if (!(this.controls[name] instanceof FormGroup || this.controls[name] instanceof FormArray)) {
                 isDirty = ApplicationUtil.notEqualTo(this.baseObject[name], currentValue);
             }
             else if (this.controls[name] instanceof RxFormGroup)
@@ -7142,7 +7112,7 @@ class RxFormGroup extends FormGroup$1 {
     resetForm(options) {
         for (let name in this.controls) {
             if (isResetControl(name, this.controls[name], options)) {
-                if (this.controls[name] instanceof FormGroup$1)
+                if (this.controls[name] instanceof FormGroup)
                     this.controls[name].resetForm(getNestedOptions(name, options));
                 else if (this.controls[name] instanceof FormArray) {
                     this.controls[name].resetForm(options && options.value ? options.value[name] : undefined);
@@ -7158,7 +7128,7 @@ class RxFormGroup extends FormGroup$1 {
     }
     commit() {
         for (let name in this.controls) {
-            if (this.controls[name] instanceof FormGroup$1)
+            if (this.controls[name] instanceof FormGroup)
                 this.controls[name].commit();
             else if (this.controls[name] instanceof FormArray) {
                 this.controls[name].commit();
@@ -7189,7 +7159,7 @@ class RxFormGroup extends FormGroup$1 {
     getErrorSummary(onlyMessage) {
         let jObject = {};
         Object.keys(this.controls).forEach(columnName => {
-            if (this.controls[columnName] instanceof FormGroup$1) {
+            if (this.controls[columnName] instanceof FormGroup) {
                 let error = this.controls[columnName].getErrorSummary(false);
                 if (Object.keys(error).length > 0)
                     jObject[columnName] = error;
@@ -7222,7 +7192,7 @@ class RxFormGroup extends FormGroup$1 {
     }
     valueChangedSync() {
         Object.keys(this.controls).forEach(columnName => {
-            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup$1 || this.controls[columnName] instanceof RxFormGroup) && !(this.entityObject[columnName] instanceof FormControl || this.entityObject[columnName] instanceof RxFormControl) && this.controls[columnName].getControlValue && ApplicationUtil.notEqualTo(this.controls[columnName].getControlValue(), this.entityObject[columnName])) {
+            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup || this.controls[columnName] instanceof RxFormGroup) && !(this.entityObject[columnName] instanceof FormControl || this.entityObject[columnName] instanceof RxFormControl) && this.controls[columnName].getControlValue && ApplicationUtil.notEqualTo(this.controls[columnName].getControlValue(), this.entityObject[columnName])) {
                 this.controls[columnName].setValue(this.entityObject[columnName], { updateChanged: true });
             }
             else if ((this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray)) {
@@ -7237,7 +7207,7 @@ class RxFormGroup extends FormGroup$1 {
     }
     refreshDisable() {
         Object.keys(this.controls).forEach(columnName => {
-            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup$1 || this.controls[columnName] instanceof RxFormGroup)) {
+            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup || this.controls[columnName] instanceof RxFormGroup)) {
                 this.controls[columnName].refresh();
             }
             else if ((this.controls[columnName] instanceof RxFormGroup)) {
@@ -7247,7 +7217,7 @@ class RxFormGroup extends FormGroup$1 {
     }
     bindErrorMessages() {
         Object.keys(this.controls).forEach(columnName => {
-            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup$1 || this.controls[columnName] instanceof RxFormGroup)) {
+            if (!(this.controls[columnName] instanceof FormArray || this.controls[columnName] instanceof RxFormArray) && !(this.controls[columnName] instanceof FormGroup || this.controls[columnName] instanceof RxFormGroup)) {
                 this.controls[columnName].bindError();
             }
             else if ((this.controls[columnName] instanceof RxFormGroup)) {
@@ -7266,7 +7236,7 @@ class RxFormGroup extends FormGroup$1 {
                 for (let formGroup of formArray.controls)
                     formGroup.submitted = value;
             }
-            else if (this.controls[columnName] instanceof FormGroup$1) {
+            else if (this.controls[columnName] instanceof FormGroup) {
                 this.controls[columnName].submitted = value;
             }
             else
@@ -7303,7 +7273,7 @@ class RxFormGroup extends FormGroup$1 {
     setBackEndErrors(errors) {
         Object.keys(errors).forEach(controlName => {
             if (this.controls[controlName]) {
-                if (this.controls[controlName] instanceof FormGroup$1)
+                if (this.controls[controlName] instanceof FormGroup)
                     this.controls[controlName].setBackEndErrors(errors[controlName]);
                 else
                     this.controls[controlName].setBackEndErrors(errors[controlName]);
@@ -7314,7 +7284,7 @@ class RxFormGroup extends FormGroup$1 {
         let clearErrors = errors ? Object.keys(errors) : Object.keys(this.controls);
         clearErrors.forEach(controlName => {
             if (this.controls[controlName]) {
-                if (this.controls[controlName] instanceof FormGroup$1)
+                if (this.controls[controlName] instanceof FormGroup)
                     errors ? this.controls[controlName].clearBackEndErrors(errors[controlName]) : this.controls[controlName].clearBackEndErrors();
                 else
                     errors ? this.controls[controlName].clearBackEndErrors(errors[controlName]) : this.controls[controlName].clearBackEndErrors();
@@ -9504,7 +9474,7 @@ class RxwebFormDirective extends BaseDirective {
     }
     updateValueAndValidity(controls) {
         Object.keys(controls).forEach(key => {
-            if (controls[key] instanceof FormGroup$1)
+            if (controls[key] instanceof FormGroup)
                 this.updateValueAndValidity(controls[key].controls);
             else if (controls[key] instanceof FormArray)
                 this.updateValueAndValidity(controls[key].controls);
@@ -9541,7 +9511,7 @@ class RxwebFormDirective extends BaseDirective {
                     }
                 });
             }
-            else if (formControl instanceof FormGroup$1) {
+            else if (formControl instanceof FormGroup) {
                 this.expressionProcessor(formControl.controls, `${fieldName}.`);
             }
             else if (formControl instanceof FormArray) {
@@ -9558,7 +9528,7 @@ class RxwebFormDirective extends BaseDirective {
             if (this.validationRule.conditionalValidationProps && this.validationRule.conditionalValidationProps[fieldName]) {
                 controls[fieldName][CONDITIONAL_VALIDATOR] = conditionalChangeValidator(this.validationRule.conditionalValidationProps[fieldName]);
             }
-            else if (controls[fieldName] instanceof FormGroup$1 && this.validationRule.conditionalObjectProps) {
+            else if (controls[fieldName] instanceof FormGroup && this.validationRule.conditionalObjectProps) {
                 var fields = this.validationRule.conditionalObjectProps.filter(t => t.objectPropName == fieldName);
                 let nestedFormGroup = controls[fieldName];
                 let propWiseConditionalControls = {};
@@ -11025,10 +10995,10 @@ class RxFormBuilder extends BaseFormBuilder {
             }
             else if (typeof prop == OBJECT_STRING && !(prop instanceof FormControl || prop instanceof RxFormControl)) {
                 let formGroup = (prop instanceof FormArray) ? prop.controls[0] : prop;
-                if (!formGroup.model && (prop instanceof FormGroup$1 || prop instanceof RxFormGroup)) {
+                if (!formGroup.model && (prop instanceof FormGroup || prop instanceof RxFormGroup)) {
                     formGroup = this.group(formGroup.controls);
                 }
-                if (prop instanceof FormGroup$1 || prop instanceof RxFormGroup) {
+                if (prop instanceof FormGroup || prop instanceof RxFormGroup) {
                     entityObject[propName] = prop;
                     defaultContainer.initPropertyObject(propName, OBJECT_PROPERTY, formGroup.model, modelInstance);
                 }
@@ -11169,7 +11139,7 @@ class RxFormBuilder extends BaseFormBuilder {
                         break;
                     case OBJECT_PROPERTY:
                         let objectValue = entityObject[property.name];
-                        if (objectValue && objectValue instanceof Object && !(objectValue instanceof FormGroup$1 || objectValue instanceof RxFormGroup)) {
+                        if (objectValue && objectValue instanceof Object && !(objectValue instanceof FormGroup || objectValue instanceof RxFormGroup)) {
                             this.isNestedBinding = this.isNested = true;
                             if (instanceContainer && instanceContainer.conditionalObjectProps)
                                 this.conditionalObjectProps = instanceContainer.conditionalObjectProps.filter(t => t.objectPropName == property.name);
@@ -11184,7 +11154,7 @@ class RxFormBuilder extends BaseFormBuilder {
                             this.builderConfigurationConditionalObjectProps = [];
                             this.isNestedBinding = this.isNested = false;
                         }
-                        else if (objectValue instanceof FormGroup$1 || objectValue instanceof RxFormGroup)
+                        else if (objectValue instanceof FormGroup || objectValue instanceof RxFormGroup)
                             formGroupObject[property.name] = objectValue;
                         break;
                     case ARRAY_PROPERTY:
@@ -14124,10 +14094,10 @@ class VdGenericFormComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName", context: "context", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i4$4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "context", "key", "searchField", "searchFields", "termMinlength", "limit", "removable", "debounce", "suffixButtons", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { type: i4$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$4.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
+/** @nocollapse */ /** @nocollapse */ VdGenericFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", fieldGroups: "fieldGroups", groupName: "groupName", context: "context", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""], components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: VdSelectComponent, selector: "vd-select", inputs: ["multiple", "disabled", "sorted", "textPrefix", "endpoint", "params", "projection", "enum", "key", "text", "prefix", "options", "filteredOptions", "filterable", "cache", "sortBy", "mapper", "compareWith", "searchField"], outputs: ["change", "itemChange", "selected", "itemSelected", "launch"] }, { type: i4$4.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i2$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: VdChipsComponent, selector: "vd-chips", inputs: ["chips", "endpoint", "params", "projection", "path", "context", "key", "searchField", "searchFields", "termMinlength", "limit", "removable", "debounce", "suffixButtons", "default"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { type: i4$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i4$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { type: i1$3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i1$3.MatError, selector: "mat-error", inputs: ["id"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { type: i4$4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4$4.MatChipRemove, selector: "[matChipRemove]" }, { type: i4$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: VdChipDirective, selector: "[vd-chip]ng-template" }, { type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { type: i9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$3.MatSuffix, selector: "[matSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results found</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
+            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <div layout-gt-sm=\"row\" layout=\"column\" *ngFor=\"let fields of fieldRows\">\r\n        <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n            <!-- #region Error handling -->\r\n            <ng-template #fieldErrors>\r\n                <div *ngFor=\"let errorMessage of formGroup.controls[field.name]['errorMessages']\">{{errorMessage}}</div>\r\n            </ng-template>\r\n            <!-- #endregion -->\r\n            <ng-container *ngIf=\"!field.hide || !field.hide(formGroup?.value, formGroup, context)\">\r\n                <!-- #region Text input -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input [type]=\"field.inputType\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" matInput [formControlName]=\"field.name\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Text area -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <textarea matInput [formControlName]=\"field.name\" rows=\"field.rows||2\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\"></textarea>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Enum -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [enum]=\"field.enumType\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdSelect -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-select [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup.value, formGroup, context):{}\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [key]=\"field.optionValue\" [text]=\"field.optionText\" [multiple]=\"field.multiple\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                            <div [innerHTML]=\"field.triggerTemplate(trigger)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                            <div [outerHTML]=\"field.optionTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Chips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-chip-list #chipList [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                        <mat-chip *ngFor=\"let chip of formGroup.controls[field.name]?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                            <span>{{chip}}</span>\r\n                            <button matChipRemove>\r\n                                <mat-icon>cancel</mat-icon>\r\n                            </button>\r\n                        </mat-chip>\r\n                        <input [placeholder]=\"field.header\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                    </mat-chip-list>\r\n                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region VdChips -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <vd-chips #vdChip [formControlName]=\"field.name\" [endpoint]=\"field.endpoint\" [params]=\"field.params?field.params(formGroup?.value, formGroup, context):{}\" [searchField]=\"field.searchField\" [projection]=\"field.projection\" [key]=\"field.optionValue\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formGroup?.value, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formGroup?.value, formGroup, context);\" (cleared)=\"field.clear && field.clear(formGroup?.value, formGroup, context);\" flex>\r\n                        <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                            <div [outerHTML]=\"field.chipTemplate(chip)\"></div>\r\n                        </ng-template>\r\n                        <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                            <div [outerHTML]=\"field.autocompleteTemplate(option)\"></div>\r\n                        </ng-template>\r\n                    </vd-chips>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Select -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <mat-select [formControlName]=\"field.name\" [multiple]=\"field.multiple\" flex>\r\n                        <mat-option *ngFor=\"let option of field.options\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                    </mat-select>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Autocomplete -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input type=\"text\" matInput [formControlName]=\"field.name\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name]\" [value]=\"option.id\">\r\n                            {{option.name}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Date -->\r\n                <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" layout-margin appearance=\"outline\">\r\n                    <mat-label>{{field.header}}</mat-label>\r\n                    <input matInput [formControlName]=\"field.name\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [readonly]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">\r\n                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                    <mat-datepicker #datePicker></mat-datepicker>\r\n                    <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                    <mat-error>\r\n                        <ng-container *ngTemplateOutlet=\"fieldErrors\"></ng-container>\r\n                    </mat-error>\r\n                </mat-form-field>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Checkbox -->\r\n                <div *ngSwitchCase=\"FormFieldType.Checkbox\" layout-margin appearance=\"outline\" class=\"pad-bottom-xs\">\r\n                    <mat-checkbox [formControlName]=\"field.name\" [disableControl]=\"field.readonly && field.readonly(formGroup?.value, formGroup, context)\">{{field.header}}</mat-checkbox>\r\n                </div>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Editor -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                    <ng-template *ngIf=\"editorTemplate?.templateRef\" [ngTemplateOutlet]=\"editorTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Code -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                    <ng-template *ngIf=\"codeTemplate?.templateRef\" [ngTemplateOutlet]=\"codeTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region File -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                    <ng-template *ngIf=\"fileTemplate?.templateRef\" [ngTemplateOutlet]=\"fileTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region Custom -->\r\n                <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                    <ng-template *ngIf=\"customTemplate?.templateRef\" [ngTemplateOutlet]=\"customTemplate?.templateRef\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                </ng-container>\r\n                <!-- #endregion -->\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <!-- #endregion -->\r\n</div>", styles: [""] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], fieldGroups: [{
@@ -14537,88 +14507,18 @@ class FormFieldDefinition {
     }
 }
 
-/**
- * Property decorator to create form fields
- * @param args
- * @returns
- */
-function FormFieldOld(args) {
-    return function (target, propertyKey) {
-        var _a, _b;
-        /* Get property name */
-        var propertyName = args.name || propertyKey;
-        /* Get property type */
-        var propertyType = (_a = Reflect.getMetadata("design:type", target, propertyKey)) === null || _a === void 0 ? void 0 : _a.name;
-        /* Create table column */
-        var formField = new FormFieldDefinition(Object.assign(args, {
-            name: args.name || propertyKey,
-            header: args.header || Reflect.getMetadata(headerMetadataKey, target, propertyKey) || propertyName,
-            autocompleteTemplate: args.autocompleteTemplate || ((option) => option[formField.autocompleteText]),
-            chipTemplate: args.chipTemplate || ((chip) => chip[formField.chipText])
-        }));
-        /* Type enum */
-        if (formField.enumType) {
-            formField.type || (formField.type = FormFieldType.Enum);
-        }
-        /* Type VdSelect */
-        else if (formField.endpoint) {
-            formField.type || (formField.type = FormFieldType.VdSelect);
-        }
-        /* Type Select */
-        else if (formField.options) {
-            formField.type || (formField.type = FormFieldType.Select);
-        }
-        /* Type TextArea */
-        else if (formField.rows) {
-            formField.type || (formField.type = FormFieldType.TextArea);
-        }
-        /* Type File */
-        else if (formField.filePath) {
-            formField.type || (formField.type = FormFieldType.File);
-        }
-        /* Other types */
-        else {
-            switch (propertyType.toLowerCase()) {
-                case 'number':
-                    formField.type || (formField.type = FormFieldType.Text);
-                    formField.inputType || (formField.inputType = 'number');
-                    break;
-                case 'date':
-                    formField.type || (formField.type = FormFieldType.Date);
-                    break;
-                case 'boolean':
-                    formField.type || (formField.type = FormFieldType.Checkbox);
-                    break;
-                default:
-                    formField.type || (formField.type = FormFieldType.Text);
-                    break;
-            }
-        }
-        /* Get existing table groups */
-        let formFieldGroups = Reflect.getMetadata(formFieldGroupMetadataKey, target) || [];
-        /* Get the group */
-        var group = formFieldGroups.filter(x => { var _a, _b; return ((_a = x.name) === null || _a === void 0 ? void 0 : _a.trim()) == ((_b = formField.groupName) === null || _b === void 0 ? void 0 : _b.trim()); })[0];
-        /* The group already exists, add the new form field */
-        if (group) {
-            group.fields.push(formField);
-        }
-        /* Create a new group */
-        else {
-            group = new FormFieldGroup({ name: formField.groupName || null, header: formField.groupHeader, fields: [formField] });
-            formFieldGroups.push(group);
-        }
-        /* Sort the fields by row */
-        group.fields = ((_b = group.fields) === null || _b === void 0 ? void 0 : _b.sort((a, b) => (a.row || 0 > b.row || 0) ? 1 : ((b.row || 0 > a.row || 0) ? -1 : 0))) || [];
-        /* Group the fields */
-        group.groups = Object.values((group.fields).reduce(function (r, a) {
-            r[a.row] = r[a.row] || [];
-            r[a.row].push(a);
-            return r;
-        }, Object.create(null)));
-        /* Add new table column */
-        Reflect.defineMetadata(formFieldGroupMetadataKey, formFieldGroups, target);
-    };
-}
+class FormFieldGroupDefinition {
+    /**
+     * constructor
+     * @param init
+     */
+    constructor(init) {
+        this.name = 'details';
+        this.fields = [];
+        Object.assign(this, init);
+    }
+}
+
 /**
  * Property decorator to create form fields
  * @param args
@@ -14677,51 +14577,62 @@ function FormField(args) {
             }
         }
         /* Get old form fields */
-        const previousFormFields = Reflect.getMetadata(formFieldGroupMetadataKey, target);
+        const previousFormFields = Reflect.getMetadata(formFieldsMetadataKey, target);
         /* Create a copy of the result */
         let formFields = previousFormFields ? previousFormFields.concat([formField]) : [formField];
         /* Override the result in the metadata */
-        Reflect.defineMetadata(formFieldGroupMetadataKey, formFields, target);
+        Reflect.defineMetadata(formFieldsMetadataKey, formFields, target);
+        /* Group the fields */
+        var groups = Array.from(Utils.groupArrayBy(formFields, x => x.groupName))
+            .map(([_, value]) => new FormFieldGroupDefinition({
+            name: value[0].groupName || null,
+            header: value[0].groupHeader,
+            fields: value,
+            groups: Object.values((value).reduce(function (r, a) {
+                r[a.row] = (r[a.row] || []);
+                r[a.row].push(a);
+                r[a.row].forEach((x, i) => x.index = x.index || i);
+                Utils.sortArray(r[a.row], 'index');
+                return r;
+            }, Object.create(null)))
+        }));
+        /* Override the result in the metadata */
+        Reflect.defineMetadata(formFieldGroupsMetadataKey, groups, target);
     };
 }
 /**
  * Property decorator to create form fields
- * @param args
+ * @param type
+ * @param header
+ * @param init
  * @returns
  */
-function FormGroup(type, header, name) {
+function FormFieldGroup(type, header, init) {
     return function (target, propertyKey) {
-        var _a;
-        /* Set proprety name as group name, if empty */
-        name || (name = propertyKey);
+        /* Create an instance of the group object */
+        var instance = Reflect.construct(type, []);
         /* Get from groups */
-        var groups = getFormGroups(Reflect.construct(type, []));
-        /* Get all fields */
-        var fields = groups.map(x => x.fields).reduce((a, b) => a.concat(b), []) || [];
-        /* Get existing table groups */
-        let formFieldGroups = Reflect.getMetadata(formFieldGroupMetadataKey, target) || [];
-        /* Get the group */
-        var group = formFieldGroups.filter(x => { var _a; return ((_a = x.name) === null || _a === void 0 ? void 0 : _a.trim()) == (name === null || name === void 0 ? void 0 : name.trim()); })[0];
-        /* The group already exist, add the fields to it */
-        if (group) {
-            fields.forEach(x => x.groupName = name);
-            group.fields.push(...fields);
-        }
-        /* Create the new group */
-        else {
-            group = new FormFieldGroup({ name: name, header: header, fields: fields });
-            formFieldGroups.push(group);
-        }
-        /* Sort the fields by row */
-        group.fields = ((_a = group === null || group === void 0 ? void 0 : group.fields) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.row || 0 > b.row || 0) ? 1 : ((b.row || 0 > a.row || 0) ? -1 : 0))) || [];
-        /* Group the fields */
-        group.groups = Object.values((group.fields).reduce(function (r, a) {
-            r[a.row] = r[a.row] || [];
-            r[a.row].push(a);
-            return r;
-        }, Object.create(null)));
-        /* Add new table column */
-        Reflect.defineMetadata(formFieldGroupMetadataKey, formFieldGroups, target);
+        var groups = getFormGroups(instance);
+        /* Get the fields from the groups */
+        groups === null || groups === void 0 ? void 0 : groups.forEach(x => {
+            Object.assign(x, {
+                name: propertyKey,
+                header: header,
+                type: type,
+                instance: init || instance
+            });
+            /* Set the name of the group in the fields */
+            x.fields.forEach(y => Object.assign(y, {
+                groupName: propertyKey,
+                groupHeader: header
+            }));
+        });
+        /* Get old form field groups */
+        const previousGroups = Reflect.getMetadata(formFieldGroupsMetadataKey, target);
+        /* Create a copy of the result */
+        let combinedGroups = previousGroups ? previousGroups.concat(groups) : groups;
+        /* Override the result in the metadata */
+        Reflect.defineMetadata(formFieldGroupsMetadataKey, combinedGroups, target);
     };
 }
 
@@ -16954,5 +16865,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, ActionMenuItem, Api, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, CachingInterceptor, Column, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DisableControlDirective, Display, DynamicBuilder, DynamicComponentCompiler, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterPipe, FilterSelectComponent, FirstLetterPipe, FormBuilderConfiguration, FormField, FormFieldDefinition, FormFieldGroup, FormFieldType, FormGroup, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, HtmlControlTemplateDirective, IAbstractControl, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuItem, MenuItemService, MenuResolve, MenuScope, MenuService, MessageType, MonthNamePipe, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnType, TableDataSource, TableDefinition, TableMenuItem, TableStaticDataSource, TimePipe, TitleCase, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicTableComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormToolbarComponent, VdFormToolbarMenuComponent, VdFormsModule, VdGenericFormComponent, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListToolbarComponent, VdListToolbarMenuComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchBoxComponent, VdSearchInputComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, ActionMenuItem, Api, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, CachingInterceptor, Column, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DisableControlDirective, Display, DynamicBuilder, DynamicComponentCompiler, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterPipe, FilterSelectComponent, FirstLetterPipe, FormBuilderConfiguration, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, HtmlControlTemplateDirective, IAbstractControl, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuItem, MenuItemService, MenuResolve, MenuScope, MenuService, MessageType, MonthNamePipe, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnType, TableDataSource, TableDefinition, TableMenuItem, TableStaticDataSource, TimePipe, TitleCase, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicTableComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormToolbarComponent, VdFormToolbarMenuComponent, VdFormsModule, VdGenericFormComponent, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListToolbarComponent, VdListToolbarMenuComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchBoxComponent, VdSearchInputComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldsMetadataKey as formFieldGroupMetadataKey, formFieldGroupsMetadataKey as formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map