@messaia/cdk 20.1.1 → 20.2.0

package/fesm2022/messaia-cdk.mjs

@@ -19659,11 +19659,21 @@ class FormFieldGroupDefinition {
 }
 
 /**
- * Gets classes decoarated with @Form
- * @param origin
- * @returns
+ * Retrieves the form definition for a given object decorated with @Form.
+ *
+ * This function reads metadata defined via decorators on the class
+ * to build a FormDefinition instance, including field groups and
+ * an optional API endpoint.
+ *
+ * @template TEntity The type of the entity associated with the form.
+ * @param origin The entity instance for which to retrieve the form definition. Must not be undefined.
+ * @param form Optional NgForm or FormGroup associated with the entity.
+ * @param context Optional context object to customize form definition generation,
+ *                e.g., for conditional fields or groups.
+ * @returns The FormDefinition object containing field groups and endpoint metadata.
+ * @throws Error if the `origin` argument is not provided.
  */
-function getFormDefinition(origin) {
+function getFormDefinition(origin, form, context) {
     /* Check if origin is not defined */
     if (!origin) {
         throw new Error('Origin object must be defined.');
@@ -19671,8 +19681,8 @@ function getFormDefinition(origin) {
     /* Save the form defintion in the metadata */
     var formDefinition = Reflect.getMetadata(formDefinitionMetadataKey, origin.constructor) ?? new FormDefinition({});
     if (formDefinition) {
-        /* Set column in the form definition */
-        formDefinition.fieldGroups = getFormGroups(origin);
+        /* Populate form groups from decorated fields, passing the optional context */
+        formDefinition.fieldGroups = getFormGroups(origin, undefined, undefined, form, context);
         /* Set endpoint from the decorator @Api, if any */
         var endpoint = Reflect.getMetadata(endpointMetadataKey, origin);
         if (endpoint) {
@@ -19682,11 +19692,22 @@ function getFormDefinition(origin) {
     return formDefinition;
 }
 /**
- * Gets poperties decoarated with @FormField grouped by row
- * @param instance
- * @returns
+ * Retrieves properties decorated with @FormField, grouped by row.
+ *
+ * This function reads metadata from the instance (or type) to generate
+ * an array of FormFieldGroupDefinition objects. It can use additional
+ * arguments, the form instance, or a context object to customize group creation.
+ *
+ * @template TEntity The type of the entity associated with the form fields.
+ * @param instance The instance of the object containing decorated properties.
+ * @param type Optional constructor of the class; used if instance is not provided.
+ * @param args Optional partial configuration to customize the resulting FormFieldGroupDefinition.
+ * @param form Optional NgForm or FormGroup associated with the entity, for dynamic field logic.
+ * @param context Optional context object for conditional logic or dynamic modifications
+ *                when generating form groups.
+ * @returns An array of FormFieldGroupDefinition objects representing the grouped form fields.
  */
-function getFormGroups(instance, type, args) {
+function getFormGroups(instance, type, args, form, context) {
     /* Create a new instance */
     instance ??= Reflect.construct(type, []);
     /* Check if origin is not defined */
@@ -19706,12 +19727,26 @@ function getFormGroups(instance, type, args) {
         hide: args?.hide,
         groups: Object.values((value).reduce(function (r, a) {
             if (a.row) {
-                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');
+                /*
+                 * Determine the row number for this field:
+                 * - If `a.row` is a function, call it with instance, form, and context.
+                 * - Otherwise, use the number directly.
+                 */
+                const rowNumber = typeof a.row === 'function'
+                    ? a.row(instance, form, context)
+                    : a.row;
+                /* Initialize the row array if it doesn't exist */
+                r[rowNumber] = r[rowNumber] || [];
+                /* Add the current field to the corresponding row */
+                r[rowNumber].push(a);
+                /* Assign index to each field in the row if not already set */
+                r[rowNumber].forEach((x, i) => x.index = x.index || i);
+                /* Sort the row fields by index to ensure consistent ordering */
+                Utils.sortArray(r[rowNumber], 'index');
+                /* Return the accumulator for the next iteration */
                 return r;
             }
+            /* If the field has no row defined, skip it by returning an empty array */
             return [];
         }, Object.create(null)))
     }));
@@ -19894,6 +19929,13 @@ class GenericFormBaseComponent extends BaseComponent {
         this._form = form;
         this.onAfterFormBuild();
     }
+    /**
+     * @property List of field sets.
+     * @description The `fieldSets` array is used to filter and group form fields based on specific sets,
+     * allowing dynamic field rendering.
+     * @type {string[]}
+     */
+    fieldSets;
     /**
      * Form definition.
      */
@@ -20148,7 +20190,7 @@ class GenericFormBaseComponent extends BaseComponent {
             return;
         }
         /* Get form definition */
-        this.formDefinition = getFormDefinition(this.newInstance());
+        this.formDefinition = getFormDefinition(this.newInstance(), this.form, this);
         /* Set includes from form definition, if any */
         this.formDefinition?.includes?.forEach(x => this.include(x.entity, x.update));
         /* Add toolbar menu items, if any */
@@ -20571,7 +20613,7 @@ class GenericFormBaseComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GenericFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: GenericFormBaseComponent, isStandalone: true, inputs: { id: "id", _item: "_item", item: "item", includes: "includes", updateIncludes: "updateIncludes", projection: "projection", query: "query", readonly: "readonly", disabled: "disabled", form: "form" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: GenericFormBaseComponent, isStandalone: true, inputs: { id: "id", _item: "_item", item: "item", includes: "includes", updateIncludes: "updateIncludes", projection: "projection", query: "query", readonly: "readonly", disabled: "disabled", form: "form", fieldSets: "fieldSets" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: GenericFormBaseComponent, decorators: [{
             type: Directive
@@ -20601,6 +20643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                 args: ['focus']
             }], form: [{
                 type: Input
+            }], fieldSets: [{
+                type: Input
             }], handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -23019,7 +23063,7 @@ class VdGenericFormComponent {
             throw new Error('Invalid classType. Please ensure classType is defined, not null, and is a constructor function.');
         }
         /* Generate the form definition using the class type's metadata. */
-        this.formDefinition = getFormDefinition(new this.classType());
+        this.formDefinition = getFormDefinition(new this.classType(), this.formGroup, this.context);
         /* Create form field groups, excluding any hidden fields. */
         this.fieldGroups = this.formDefinition?.fieldGroups?.filter(x => !x.hidden)?.map(a => { return { ...a }; });
     }
@@ -23033,7 +23077,7 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", 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 }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\r\n                                   [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   parseDecimal\r\n                                   [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput\r\n                                      [formControlName]=\"field.name!\"\r\n                                      rows=\"field.rows||2\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            </textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [enum]=\"field.enumType\"\r\n                                       [enumMetadata]=\"field.enumMetadata\"\r\n                                       [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                       [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n                                       [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n                                       [compareWith]=\"field.compareWith\"\r\n                                       [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [matIconKey]=\"field.optionMatIconProperty\"\r\n                                       [svgIconKey]=\"field.optionSvgIconProperty\"\r\n                                       [fontSet]=\"field.optionIconFontSet\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [selectFirst]=\"field.selectFirst\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                       (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <mat-chip-set>\r\n                                        <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                        </mat-chip>\r\n                                    </mat-chip-set>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\"\r\n                                     [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                     [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n                                     [projection]=\"field.projection\"\r\n                                     [mapper]=\"field.mapper\"\r\n                                     [compareWith]=\"field.compareWith\"\r\n                                     [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                     [optionValueProperty]=\"field.optionValueProperty\"\r\n                                     [optionTextProperty]=\"field.optionTextProperty\"\r\n                                     [multiple]=\"field.multiple\"\r\n                                     [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                     (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                     (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                     [style.max-width]=\"field.maxWidth\"\r\n                                     [style.max-height]=\"field.maxHeight\"\r\n                                     flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n                                              (removed)=\"removeChip(field, chip)\"\r\n                                              [color]=\"field.chipColor\"\r\n                                              selectable=\"true\"\r\n                                              highlighted\r\n                                              selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\"\r\n                                       #chipInput\r\n                                       [matChipInputFor]=\"chipList\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matAutocomplete]=\"chipAutocomplete\"\r\n                                       (input)=\"filterAutocomplete(field, chipInput)\"\r\n                                       (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n                                       (paste)=\"onPasteChips(field, $event)\"\r\n                                       autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip\r\n                                      [formControlName]=\"field.name!\"\r\n                                      [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                      [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n                                      [searchField]=\"field.searchField\"\r\n                                      [searchFields]=\"field.searchFields\"\r\n                                      [filters]=\"field.filters\"\r\n                                      [selectFirst]=\"field.selectFirst\"\r\n                                      [classType]=\"field.classType\"\r\n                                      [projection]=\"field.projection\"\r\n                                      [key]=\"field.optionValueProperty\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      [removable]=\"!field.clear\"\r\n                                      [context]=\"context\"\r\n                                      [suffixButtons]=\"field.suffixButtons\"\r\n                                      [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n                                      (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                      (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n                                      (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n                                      [customValue]=\"field.customValue\"\r\n                                      layout=\"row\"\r\n                                      flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></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, formValue, formGroup, context)\"></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 *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\"\r\n                                        [multiple]=\"field.multiple\"\r\n                                        [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                        flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\"\r\n                                   matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\"\r\n                                   [max]=\"field.max\"\r\n                                   [matAutocomplete]=\"auto\"\r\n                                   (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n                                   autocomplete=\"off\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                   #autocompleteInput>\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <!-- Row container inside one mat-form-field -->\r\n                            <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n                                <!-- Date input -->\r\n                                <input matInput\r\n                                       [formControlName]=\"field.name!\"\r\n                                       [min]=\"field.min\"\r\n                                       [max]=\"field.max\"\r\n                                       autocomplete=\"off\"\r\n                                       [matDatepicker]=\"datePicker\"\r\n                                       [matDatepickerFilter]=\"field.dateFilter\"\r\n                                       [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n                                       (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n                                <!-- Time display -->\r\n                                @if(field.showTime) {\r\n                                <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n                                }\r\n                            </div>\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar\r\n                                          [selected]=\"formGroup.get(field.name!)?.value\"\r\n                                          (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n                                          (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n                                          [headerComponent]=\"datePickerHeaderComponent\"\r\n                                          (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                          style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\"\r\n                                      [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            {{field.label}}\r\n                        </mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input\r\n                                 [formControlName]=\"field.name!\"\r\n                                 (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n                                 [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                 flex>\r\n                            </div>\r\n                        </mat-form-field>\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\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", 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 }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\r\n                                   [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   parseDecimal\r\n                                   [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput\r\n                                      [formControlName]=\"field.name!\"\r\n                                      rows=\"field.rows||2\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            </textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [enum]=\"field.enumType\"\r\n                                       [enumMetadata]=\"field.enumMetadata\"\r\n                                       [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                       [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n                                       [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n                                       [compareWith]=\"field.compareWith\"\r\n                                       [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [matIconKey]=\"field.optionMatIconProperty\"\r\n                                       [svgIconKey]=\"field.optionSvgIconProperty\"\r\n                                       [fontSet]=\"field.optionIconFontSet\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [selectFirst]=\"field.selectFirst\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                       (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <mat-chip-set>\r\n                                        <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                        </mat-chip>\r\n                                    </mat-chip-set>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\"\r\n                                     [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                     [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n                                     [projection]=\"field.projection\"\r\n                                     [mapper]=\"field.mapper\"\r\n                                     [compareWith]=\"field.compareWith\"\r\n                                     [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                     [optionValueProperty]=\"field.optionValueProperty\"\r\n                                     [optionTextProperty]=\"field.optionTextProperty\"\r\n                                     [multiple]=\"field.multiple\"\r\n                                     [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                     (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                     (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                     [style.max-width]=\"field.maxWidth\"\r\n                                     [style.max-height]=\"field.maxHeight\"\r\n                                     flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n                                              (removed)=\"removeChip(field, chip)\"\r\n                                              [color]=\"field.chipColor\"\r\n                                              selectable=\"true\"\r\n                                              highlighted\r\n                                              selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\"\r\n                                       #chipInput\r\n                                       [matChipInputFor]=\"chipList\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matAutocomplete]=\"chipAutocomplete\"\r\n                                       (input)=\"filterAutocomplete(field, chipInput)\"\r\n                                       (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n                                       (paste)=\"onPasteChips(field, $event)\"\r\n                                       autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip\r\n                                      [formControlName]=\"field.name!\"\r\n                                      [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                      [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n                                      [searchField]=\"field.searchField\"\r\n                                      [searchFields]=\"field.searchFields\"\r\n                                      [filters]=\"field.filters\"\r\n                                      [selectFirst]=\"field.selectFirst\"\r\n                                      [classType]=\"field.classType\"\r\n                                      [projection]=\"field.projection\"\r\n                                      [key]=\"field.optionValueProperty\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      [removable]=\"!field.clear\"\r\n                                      [context]=\"context\"\r\n                                      [suffixButtons]=\"field.suffixButtons\"\r\n                                      [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n                                      (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                      (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n                                      (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n                                      [customValue]=\"field.customValue\"\r\n                                      layout=\"row\"\r\n                                      flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></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, formValue, formGroup, context)\"></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 *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\"\r\n                                        [multiple]=\"field.multiple\"\r\n                                        [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                        flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\"\r\n                                   matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\"\r\n                                   [max]=\"field.max\"\r\n                                   [matAutocomplete]=\"auto\"\r\n                                   (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n                                   autocomplete=\"off\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                   #autocompleteInput>\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <!-- Row container inside one mat-form-field -->\r\n                            <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n                                <!-- Date input -->\r\n                                <input matInput\r\n                                       [formControlName]=\"field.name!\"\r\n                                       [min]=\"field.min\"\r\n                                       [max]=\"field.max\"\r\n                                       autocomplete=\"off\"\r\n                                       [matDatepicker]=\"datePicker\"\r\n                                       [matDatepickerFilter]=\"field.dateFilter\"\r\n                                       [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n                                       (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n                                <!-- Time display -->\r\n                                @if(field.showTime) {\r\n                                <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n                                }\r\n                            </div>\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar\r\n                                          [selected]=\"formGroup.get(field.name!)?.value\"\r\n                                          (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n                                          (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n                                          [headerComponent]=\"datePickerHeaderComponent\"\r\n                                          (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                          style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\"\r\n                                      [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            {{field.label}}\r\n                        </mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input\r\n                                 [formControlName]=\"field.name!\"\r\n                                 (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n                                 [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                 flex>\r\n                            </div>\r\n                        </mat-form-field>\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\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
                 //--------------------
                 MatAutocompleteModule }, { kind: "component", type: i4$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: 
                 //--------------------
@@ -23077,7 +23121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         NgxColorsModule,
                         OnlyNumberDirective,
                         ParseDecimalDirective
-                    ], template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\r\n                                   [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   parseDecimal\r\n                                   [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput\r\n                                      [formControlName]=\"field.name!\"\r\n                                      rows=\"field.rows||2\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            </textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [enum]=\"field.enumType\"\r\n                                       [enumMetadata]=\"field.enumMetadata\"\r\n                                       [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                       [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n                                       [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n                                       [compareWith]=\"field.compareWith\"\r\n                                       [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [matIconKey]=\"field.optionMatIconProperty\"\r\n                                       [svgIconKey]=\"field.optionSvgIconProperty\"\r\n                                       [fontSet]=\"field.optionIconFontSet\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [selectFirst]=\"field.selectFirst\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                       (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <mat-chip-set>\r\n                                        <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                        </mat-chip>\r\n                                    </mat-chip-set>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\"\r\n                                     [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                     [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n                                     [projection]=\"field.projection\"\r\n                                     [mapper]=\"field.mapper\"\r\n                                     [compareWith]=\"field.compareWith\"\r\n                                     [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                     [optionValueProperty]=\"field.optionValueProperty\"\r\n                                     [optionTextProperty]=\"field.optionTextProperty\"\r\n                                     [multiple]=\"field.multiple\"\r\n                                     [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                     (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                     (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                     [style.max-width]=\"field.maxWidth\"\r\n                                     [style.max-height]=\"field.maxHeight\"\r\n                                     flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n                                              (removed)=\"removeChip(field, chip)\"\r\n                                              [color]=\"field.chipColor\"\r\n                                              selectable=\"true\"\r\n                                              highlighted\r\n                                              selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\"\r\n                                       #chipInput\r\n                                       [matChipInputFor]=\"chipList\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matAutocomplete]=\"chipAutocomplete\"\r\n                                       (input)=\"filterAutocomplete(field, chipInput)\"\r\n                                       (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n                                       (paste)=\"onPasteChips(field, $event)\"\r\n                                       autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip\r\n                                      [formControlName]=\"field.name!\"\r\n                                      [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                      [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n                                      [searchField]=\"field.searchField\"\r\n                                      [searchFields]=\"field.searchFields\"\r\n                                      [filters]=\"field.filters\"\r\n                                      [selectFirst]=\"field.selectFirst\"\r\n                                      [classType]=\"field.classType\"\r\n                                      [projection]=\"field.projection\"\r\n                                      [key]=\"field.optionValueProperty\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      [removable]=\"!field.clear\"\r\n                                      [context]=\"context\"\r\n                                      [suffixButtons]=\"field.suffixButtons\"\r\n                                      [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n                                      (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                      (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n                                      (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n                                      [customValue]=\"field.customValue\"\r\n                                      layout=\"row\"\r\n                                      flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></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, formValue, formGroup, context)\"></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 *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\"\r\n                                        [multiple]=\"field.multiple\"\r\n                                        [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                        flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\"\r\n                                   matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\"\r\n                                   [max]=\"field.max\"\r\n                                   [matAutocomplete]=\"auto\"\r\n                                   (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n                                   autocomplete=\"off\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                   #autocompleteInput>\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <!-- Row container inside one mat-form-field -->\r\n                            <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n                                <!-- Date input -->\r\n                                <input matInput\r\n                                       [formControlName]=\"field.name!\"\r\n                                       [min]=\"field.min\"\r\n                                       [max]=\"field.max\"\r\n                                       autocomplete=\"off\"\r\n                                       [matDatepicker]=\"datePicker\"\r\n                                       [matDatepickerFilter]=\"field.dateFilter\"\r\n                                       [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n                                       (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n                                <!-- Time display -->\r\n                                @if(field.showTime) {\r\n                                <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n                                }\r\n                            </div>\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar\r\n                                          [selected]=\"formGroup.get(field.name!)?.value\"\r\n                                          (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n                                          (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n                                          [headerComponent]=\"datePickerHeaderComponent\"\r\n                                          (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                          style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\"\r\n                                      [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            {{field.label}}\r\n                        </mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input\r\n                                 [formControlName]=\"field.name!\"\r\n                                 (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n                                 [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                 flex>\r\n                            </div>\r\n                        </mat-form-field>\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\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
+                    ], template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup!\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput\r\n                                   [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\"\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\r\n                                   [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   parseDecimal\r\n                                   [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput\r\n                                      [formControlName]=\"field.name!\"\r\n                                      rows=\"field.rows||2\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            </textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [enum]=\"field.enumType\"\r\n                                       [enumMetadata]=\"field.enumMetadata\"\r\n                                       [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\"\r\n                                        mat-icon-button\r\n                                        *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\"\r\n                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\"\r\n                                       [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                       [params]=\"field.params??{} | func:formValue:formGroup:context\"\r\n                                       [projection]=\"field.projection\" [mapper]=\"field.mapper\"\r\n                                       [compareWith]=\"field.compareWith\"\r\n                                       [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                       [optionValueProperty]=\"field.optionValueProperty\"\r\n                                       [optionTextProperty]=\"field.optionTextProperty\"\r\n                                       [defaultOption]=\"field.defaultOption??true\"\r\n                                       [matIconKey]=\"field.optionMatIconProperty\"\r\n                                       [svgIconKey]=\"field.optionSvgIconProperty\"\r\n                                       [fontSet]=\"field.optionIconFontSet\"\r\n                                       [multiple]=\"field.multiple\"\r\n                                       [selectFirst]=\"field.selectFirst\"\r\n                                       [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                       [triggerCssClass]=\"field.triggerCssClass\"\r\n                                       [triggerMode]=\"field.triggerMode\"\r\n                                       (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                       (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                       layout=\"row\"\r\n                                       flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <mat-chip-set>\r\n                                        <mat-chip *ngFor=\"let item of trigger\" [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\r\n                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                        </mat-chip>\r\n                                    </mat-chip-set>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate\r\n                                                     [ngTemplateOutlet]=\"optionIconTemplate\"\r\n                                                     let-optionIcon=\"optionIcon\"\r\n                                                     [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\"\r\n                                     [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                     [params]=\"field.params ??{} | func:formValue:formGroup:context\"\r\n                                     [projection]=\"field.projection\"\r\n                                     [mapper]=\"field.mapper\"\r\n                                     [compareWith]=\"field.compareWith\"\r\n                                     [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\r\n                                     [optionValueProperty]=\"field.optionValueProperty\"\r\n                                     [optionTextProperty]=\"field.optionTextProperty\"\r\n                                     [multiple]=\"field.multiple\"\r\n                                     [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                     (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                     (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\r\n                                     [style.max-width]=\"field.maxWidth\"\r\n                                     [style.max-height]=\"field.maxHeight\"\r\n                                     flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\"\r\n                                              (removed)=\"removeChip(field, chip)\"\r\n                                              [color]=\"field.chipColor\"\r\n                                              selectable=\"true\"\r\n                                              highlighted\r\n                                              selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\"\r\n                                       #chipInput\r\n                                       [matChipInputFor]=\"chipList\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matAutocomplete]=\"chipAutocomplete\"\r\n                                       (input)=\"filterAutocomplete(field, chipInput)\"\r\n                                       (matChipInputTokenEnd)=\"addChip(field, $event)\"\r\n                                       (paste)=\"onPasteChips(field, $event)\"\r\n                                       autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip\r\n                                      [formControlName]=\"field.name!\"\r\n                                      [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\r\n                                      [params]=\"field.params || {} | func:formValue:formGroup:context\"\r\n                                      [searchField]=\"field.searchField\"\r\n                                      [searchFields]=\"field.searchFields\"\r\n                                      [filters]=\"field.filters\"\r\n                                      [selectFirst]=\"field.selectFirst\"\r\n                                      [classType]=\"field.classType\"\r\n                                      [projection]=\"field.projection\"\r\n                                      [key]=\"field.optionValueProperty\"\r\n                                      [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                      [removable]=\"!field.clear\"\r\n                                      [context]=\"context\"\r\n                                      [suffixButtons]=\"field.suffixButtons\"\r\n                                      [autocompleteCssClass]=\"field.autocompleteCssClass\"\r\n                                      (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\r\n                                      (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\r\n                                      (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\r\n                                      [customValue]=\"field.customValue\"\r\n                                      layout=\"row\"\r\n                                      flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></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, formValue, formGroup, context)\"></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 *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\"\r\n                                        [multiple]=\"field.multiple\"\r\n                                        [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                        flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\"\r\n                                   matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\"\r\n                                   [max]=\"field.max\"\r\n                                   [matAutocomplete]=\"auto\"\r\n                                   (input)=\"filterAutocomplete(field, autocompleteInput)\"\r\n                                   autocomplete=\"off\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                   #autocompleteInput>\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\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                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</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\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <!-- Row container inside one mat-form-field -->\r\n                            <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\r\n                                <!-- Date input -->\r\n                                <input matInput\r\n                                       [formControlName]=\"field.name!\"\r\n                                       [min]=\"field.min\"\r\n                                       [max]=\"field.max\"\r\n                                       autocomplete=\"off\"\r\n                                       [matDatepicker]=\"datePicker\"\r\n                                       [matDatepickerFilter]=\"field.dateFilter\"\r\n                                       [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\r\n                                       (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n\r\n                                <!-- Time display -->\r\n                                @if(field.showTime) {\r\n                                <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\r\n                                }\r\n                            </div>\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar\r\n                                          [selected]=\"formGroup.get(field.name!)?.value\"\r\n                                          (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\r\n                                          (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\r\n                                          [headerComponent]=\"datePickerHeaderComponent\"\r\n                                          (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\r\n                                          style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\"\r\n                                   [minlength]=\"field.minLength | func:formValue:formGroup:context\"\r\n                                   [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\r\n                                   [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\r\n                                   [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                   [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\r\n                                   [onlyNumber]=\"(field.numbersOnly??false)\"\r\n                                   (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\"\r\n                                      [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            {{field.label}}\r\n                        </mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\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                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input\r\n                                 [formControlName]=\"field.name!\"\r\n                                 (select)=\"field.change && field.change(field, $event, formGroup, context)\"\r\n                                 [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\r\n                                 flex>\r\n                            </div>\r\n                        </mat-form-field>\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\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -23723,6 +23767,12 @@ class FormFieldDefinition {
     required;
     /**
      * The row number indicating the display position of the field.
+     * Can be a fixed number or a callback returning a number.
+     *
+     * @param x The entity associated with the field.
+     * @param f The FormGroup containing this field.
+     * @param ctx The context of the generic form component.
+     * @returns The row number for display.
      * Defaults to 1.
      */
     row = 1;
@@ -23897,16 +23947,22 @@ function FormField(args) {
     };
 }
 /**
- * Property decorator to create form fields
- * @param args
- * @returns
+ * Property decorator to create and register form field groups.
+ *
+ * This decorator can be applied to a class property to automatically
+ * generate and register form groups based on the provided type and arguments.
+ *
+ * @param type The class type whose decorated properties will be grouped.
+ * @param args Optional partial configuration to customize the resulting FormFieldGroupDefinition.
+ * @param context Optional context object to influence form group generation, e.g., for conditional fields.
+ * @returns A property decorator function.
  */
-function FormFieldGroup(type, args) {
+function FormFieldGroup(type, args, context) {
     return function (target, propertyKey) {
         /* Create an instance of the group object */
         var instance = Reflect.construct(type, []);
-        /* Get from groups */
-        var groups = getFormGroups(undefined, type, args);
+        /* Retrieve form groups from the type, passing args and context */
+        var groups = getFormGroups(undefined, type, args, context);
         /* Get the header of the groups or create one using the property name */
         var groupHeader = args?.header || Reflect.getMetadata(headerMetadataKey, target, propertyKey) || propertyKey;
         /* Get the fields from the groups */