@messaia/cdk 18.2.0 → 18.2.1

package/fesm2022/messaia-cdk.mjs

@@ -9406,6 +9406,11 @@ class FormFieldDefinition {
      * Flag indicating if only numeric input is permitted.
      */
     numbersOnly;
+    /**
+     * Flag to enable or disable decimal parsing on input.
+     * If set to true, pasted values will be normalized to a valid decimal format.
+     */
+    parseDecimal;
     /**
      * Indicates whether the first option in a selection should be automatically selected.
      * Defaults to false.
@@ -25187,6 +25192,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['filterInput', { static: false }]
             }] } });
 
+class EmptyStringResetDirective {
+    /**
+     * Method that performs synchronous validation against the provided control.
+     * @param control
+     */
+    validate(control) {
+        if (typeof control?.value === 'string' && control?.value == "") {
+            control.setValue(null);
+        }
+        return null;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngModel],[formControlName],[formControl]',
+                    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }]
+                }]
+        }] });
+
+class MatFormFieldReadonlyDirective {
+    matFormField;
+    /**
+     * Constructor
+     * @param matFormField
+     */
+    constructor(matFormField) {
+        this.matFormField = matFormField;
+    }
+    /**
+     * Checks if the control is readonly
+     */
+    isReadonlyInput() {
+        if (this.matFormField?._control instanceof MatInput) {
+            return this.matFormField._control.readonly;
+        }
+        return false;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i6.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-form-field',
+                    host: { '[class.mat-form-field-readonly]': 'isReadonlyInput()' }
+                }]
+        }], ctorParameters: () => [{ type: i6.MatFormField }] });
+
 class NativeElementInjectorDirective {
     elementRef;
     control;
@@ -25224,56 +25280,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     type: Optional
                 }] }] });
 
-class MatFormFieldReadonlyDirective {
-    matFormField;
+/**
+ * This directive can be added to input elements to parse decimal values.
+ */
+class ParseDecimalDirective {
+    el;
     /**
-     * Constructor
-     * @param matFormField
+     * Whether the directive is enabled
      */
-    constructor(matFormField) {
-        this.matFormField = matFormField;
+    parseDecimalEnabled = true;
+    /**
+     * Constructor to inject ElementRef for accessing the DOM element.
+     * @param el - The ElementRef instance representing the DOM element.
+     */
+    constructor(el) {
+        this.el = el;
     }
     /**
-     * Checks if the control is readonly
+     * Handles the paste event to parse and normalize pasted currency strings into decimals.
+     * @param event - The ClipboardEvent triggered on pasting.
      */
-    isReadonlyInput() {
-        if (this.matFormField?._control instanceof MatInput) {
-            return this.matFormField._control.readonly;
+    onPaste(event) {
+        /* Skip the directive's functionality if disabled */
+        if (!this.parseDecimalEnabled) {
+            return;
         }
-        return false;
+        /* Retrieve the pasted text from the clipboard. */
+        const pastedValue = event.clipboardData?.getData('text');
+        /* Parse the pasted text into a valid decimal. */
+        const parsedValue = this.parseCurrency(pastedValue ?? '');
+        /* If the parsed value is a valid number, update the input value. */
+        if (!isNaN(parsedValue)) {
+            this.el.nativeElement.value = parsedValue;
+        }
+        /* Prevent the default paste behavior to avoid invalid input. */
+        event.preventDefault();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i6.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: MatFormFieldReadonlyDirective, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'mat-form-field',
-                    host: { '[class.mat-form-field-readonly]': 'isReadonlyInput()' }
-                }]
-        }], ctorParameters: () => [{ type: i6.MatFormField }] });
-
-class EmptyStringResetDirective {
     /**
-     * Method that performs synchronous validation against the provided control.
-     * @param control
+     * Parses a currency string into a decimal.
+     * @param value - The formatted currency string.
+     * @returns The parsed decimal or NaN if invalid.
      */
-    validate(control) {
-        if (typeof control?.value === 'string' && control?.value == "") {
-            control.setValue(null);
+    parseCurrency(value) {
+        /* Return NaN if the input value is empty. */
+        if (!value) {
+            return NaN;
         }
-        return null;
+        /* Remove all non-numeric characters except for `,` and `.` to normalize the value. */
+        let normalizedValue = value.replace(/[^\d.,-]/g, '');
+        /* Replace thousands separators (.) with nothing and decimal separators (,) with a dot. */
+        normalizedValue = normalizedValue.replace(/\./g, '').replace(',', '.');
+        /* Convert the cleaned string into a floating-point number. */
+        return parseFloat(normalizedValue);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ParseDecimalDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: { parseDecimalEnabled: "parseDecimalEnabled" }, host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ParseDecimalDirective, decorators: [{
             type: Directive,
-            args: [{
-                    selector: '[ngModel],[formControlName],[formControl]',
-                    providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef((() => EmptyStringResetDirective)), multi: true }]
-                }]
-        }] });
+            args: [{ selector: '[parseDecimal]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { parseDecimalEnabled: [{
+                type: Input
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
 
 /**
  * VdEditorDirective class
@@ -25641,11 +25712,11 @@ class VdGenericFormComponent {
         return func(option, this.formValue, this.formGroup, this.context);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdGenericFormComponent, 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                                   (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                                       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                            <input matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\" [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                            <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(--mdc-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-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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$4.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i21.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: i21.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i21.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i21.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i24.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: i24.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i24.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i24.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i24.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i24.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i25.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i25.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdGenericFormComponent, 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                                       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                            <input matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\" [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                            <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(--mdc-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-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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "directive", type: AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "filters", "removable", "selectFirst", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$4.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i21.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: i21.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i21.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i21.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.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: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i24.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: i24.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i24.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i24.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i24.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i24.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i25.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i25.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <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                                   (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                                       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                            <input matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\" [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                            <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(--mdc-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-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"] }]
+            args: [{ selector: 'vd-generic-form', 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                                       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                            <input matInput\r\n                                   [formControlName]=\"field.name!\"\r\n                                   [min]=\"field.min\" [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                            <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(--mdc-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-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: [{
@@ -26242,39 +26313,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 const DECLARATIONS = [
+    DatePickerHeaderComponent,
+    EmptyStringResetDirective,
     EqualValidator,
-    UniqueValidatorDirective,
-    NativeElementInjectorDirective,
-    MatFormFieldReadonlyDirective,
+    FieldFuncPipe,
+    GroupFilterPipe,
     MatFormFieldEditorDirective,
-    VdEditorDirective,
+    MatFormFieldReadonlyDirective,
+    NativeElementInjectorDirective,
+    ParseDecimalDirective,
+    UniqueValidatorDirective,
     VdCodeDirective,
-    VdFileDirective,
     VdCustomDirective,
-    EmptyStringResetDirective,
+    VdEditorDirective,
+    VdFileDirective,
     VdGenericFormComponent,
-    DatePickerHeaderComponent,
     VdGenericFormCustomFieldDirective,
-    GroupFilterPipe,
-    FieldFuncPipe
 ];
 class VdFormsModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: VdFormsModule, declarations: [EqualValidator,
-            UniqueValidatorDirective,
-            NativeElementInjectorDirective,
-            MatFormFieldReadonlyDirective,
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: VdFormsModule, declarations: [DatePickerHeaderComponent,
+            EmptyStringResetDirective,
+            EqualValidator,
+            FieldFuncPipe,
+            GroupFilterPipe,
             MatFormFieldEditorDirective,
-            VdEditorDirective,
+            MatFormFieldReadonlyDirective,
+            NativeElementInjectorDirective,
+            ParseDecimalDirective,
+            UniqueValidatorDirective,
             VdCodeDirective,
-            VdFileDirective,
             VdCustomDirective,
-            EmptyStringResetDirective,
+            VdEditorDirective,
+            VdFileDirective,
             VdGenericFormComponent,
-            DatePickerHeaderComponent,
-            VdGenericFormCustomFieldDirective,
-            GroupFilterPipe,
-            FieldFuncPipe], imports: [CommonModule,
+            VdGenericFormCustomFieldDirective], imports: [CommonModule,
             VdCommonModule,
             VdSelectModule,
             VdChipsModule,
@@ -26294,21 +26367,22 @@ class VdFormsModule {
             MatNativeDateModule,
             MatAutocompleteModule,
             MatChipsModule,
-            NgxColorsModule], exports: [EqualValidator,
-            UniqueValidatorDirective,
-            NativeElementInjectorDirective,
-            MatFormFieldReadonlyDirective,
+            NgxColorsModule], exports: [DatePickerHeaderComponent,
+            EmptyStringResetDirective,
+            EqualValidator,
+            FieldFuncPipe,
+            GroupFilterPipe,
             MatFormFieldEditorDirective,
-            VdEditorDirective,
+            MatFormFieldReadonlyDirective,
+            NativeElementInjectorDirective,
+            ParseDecimalDirective,
+            UniqueValidatorDirective,
             VdCodeDirective,
-            VdFileDirective,
             VdCustomDirective,
-            EmptyStringResetDirective,
+            VdEditorDirective,
+            VdFileDirective,
             VdGenericFormComponent,
-            DatePickerHeaderComponent,
-            VdGenericFormCustomFieldDirective,
-            GroupFilterPipe,
-            FieldFuncPipe] });
+            VdGenericFormCustomFieldDirective] });
     /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdFormsModule, imports: [CommonModule,
             VdCommonModule,
             VdSelectModule,
@@ -26574,5 +26648,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MapPipe, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, Permission, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MapPipe, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, ParseDecimalDirective, Permission, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map