@messaia/cdk 21.1.0-rc.2 → 21.1.0-rc.4

package/fesm2022/messaia-cdk.mjs

@@ -67,13 +67,14 @@ import { MatAutocompleteModule, MatAutocomplete, MatAutocompleteTrigger, MAT_AUT
 import * as i6$2 from '@angular/material/divider';
 import { MatDividerModule, MatDivider } from '@angular/material/divider';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i11 from 'ngx-colors';
+import * as i11 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i12$1 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
 import * as i4$2 from '@angular/material/list';
 import { MatSelectionList, MatListOption, MatListModule } from '@angular/material/list';
 import * as i3$3 from '@angular/cdk/platform';
 import * as i4$1 from '@angular/cdk/text-field';
-import * as i5$2 from '@tinymce/tinymce-angular';
 import * as i2$6 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i3$4 from '@angular/material/sidenav';
@@ -1247,6 +1248,10 @@ class BaseComponent {
      * Service for displaying snack bar notifications.
      */
     snackBarService;
+    /**
+     * Reference to the currently displayed snack bar, if any.
+     */
+    snackBarRef;
     /**
      * Service for displaying confirmation and prompt dialogs.
      */
@@ -1715,12 +1720,18 @@ class BaseComponent {
                 break;
         }
         /* Display the message in the snack bar, with specified duration and CSS class */
-        const snackBarRef = this.snackBarService.open(message, actionLabel, {
+        this.snackBarRef = this.snackBarService.open(message, actionLabel, {
             duration: duration,
             panelClass: [snackBarClass]
         });
         /* Emits when the action button is clicked */
-        return snackBarRef.onAction().pipe(map(() => { }));
+        return this.snackBarRef.onAction().pipe(map(() => { }));
+    }
+    /**
+     * Closes the currently displayed snack bar message, if any.
+     */
+    closeMessage() {
+        this.snackBarRef?.dismiss();
     }
     /**
      * Initializes the TinyMCE editor with custom configuration.
@@ -22153,7 +22164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 const noop = () => { };
-let nextUniqueId$1 = 0;
+let nextUniqueId$2 = 0;
 class VdFileInputComponent {
     ngControl;
     fm;
@@ -22292,7 +22303,7 @@ class VdFileInputComponent {
      * that we want the <mat-form-field> to associate all of its labels and hints with.
      * In this case, we'll use the host element and just generate a unique ID for it.
      */
-    id = `vd-file-input-${nextUniqueId$1++}`;
+    id = `vd-file-input-${nextUniqueId$2++}`;
     /**
      * This property is used to indicate whether the label should be in the floating position.
      * We'll use the same logic as matInput and float the placeholder when the input is focused
@@ -22666,6 +22677,256 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['filterInput', { static: false }]
             }] } });
 
+/* Unique ID counter for generating unique IDs for each instance of the directive. */
+let nextUniqueId$1 = 0;
+/**
+ * Directive that allows a radio button to be used inside a MatFormField.
+ */
+class MatFormFieldRadioDirective {
+    ngControl;
+    _elementRef;
+    platform;
+    autofillMonitor;
+    /**
+     * Tracks the error state of the radio button control.
+     * @type {_ErrorStateTracker}
+     */
+    errorStateTracker;
+    /**
+     * Object used to control when error messages are shown.
+     * @type {ErrorStateMatcher}
+     */
+    get errorStateMatcher() { return this.errorStateTracker.matcher; }
+    set errorStateMatcher(value) { this.errorStateTracker.matcher = value; }
+    /**
+     * Whether the control is in an error state.
+     * @type {boolean}
+     */
+    get errorState() { return this.errorStateTracker.errorState; }
+    set errorState(value) { this.errorStateTracker.errorState = value; }
+    /**
+     * Stream that emits whenever the state of the control changes and should cause the parent
+     * form-field to update. Implemented as part of `MatFormFieldControl`.
+     * @type {Subject<void>}
+     */
+    stateChanges = new Subject();
+    /**
+     * Internal tracking for the disabled state.
+     * @type {boolean}
+     */
+    _disabled = false;
+    /**
+     * Whether the control is disabled.
+     * @type {boolean}
+     */
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        /* Browsers may not fire the blur event if the input is disabled too quickly.
+           Reset focus state here to ensure the element doesn't become stuck. */
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Internal tracking for the unique ID.
+     * @type {string | undefined}
+     */
+    _id;
+    /**
+     * Unique ID of the element.
+     * @type {string}
+     */
+    get id() { return this._id ?? ''; }
+    set id(value) { this._id = value || this.uid; }
+    /**
+     * This input provides the placeholder to the mat-form-field.
+     * Visual setup is handled via TinyMCE placeholder configuration.
+     * @type {string}
+     */
+    placeholder = '';
+    /**
+     * Internal tracking for the required state.
+     * @type {boolean}
+     */
+    _required = false;
+    /**
+     * Whether the control is required.
+     * @type {boolean}
+     */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        /* Coerce the input value to a boolean and store it. */
+        this._required = coerceBooleanProperty(value);
+        /* Notify the parent form-field to update the required state of the label. */
+        this.stateChanges.next();
+    }
+    /**
+     * Internal tracking for the value.
+     * @type {any}
+     */
+    _value;
+    /**
+     * The value of the radio button control.
+     * @type {any}
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        if (value !== this._value) {
+            this._value = value;
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Whether the control is empty.
+     * @type {boolean}
+     */
+    get empty() {
+        return this.value == null || this.value === '';
+    }
+    /**
+     * Whether the control is focused.
+     * @type {boolean}
+     */
+    focused = false;
+    /**
+     * The selector used to identify this control type in the form field.
+     * @type {string}
+     */
+    controlType = 'mat-radio-button';
+    /**
+     * The aria-describedby attribute for the control.
+     * @type {string | null | undefined}
+     */
+    ariaDescribedby;
+    /**
+     * Whether the label should float.
+     * @type {boolean}
+     */
+    get shouldLabelFloat() {
+        return true;
+    }
+    /**
+     * Whether the control is currently autofilled by the browser.
+     * @type {boolean}
+     */
+    autofilled = false;
+    /**
+     * Generated unique ID for the instance.
+     * @type {string}
+     */
+    uid = `mat-radio-form-control-${nextUniqueId$1++}`;
+    /**
+     * Constructor that injects necessary dependencies and initializes the error state tracker.
+     * @param ngControl The NgControl associated with this control, if any.
+     * @param parentForm The parent NgForm, if any.
+     * @param parentFormGroup The parent FormGroupDirective, if any.
+     * @param defaultErrorStateMatcher The default ErrorStateMatcher to use for error state tracking.
+     * @param _elementRef Reference to the host element.
+     * @param platform The Platform service for checking the current platform.
+     * @param autofillMonitor The AutofillMonitor service for monitoring autofill state.
+     */
+    constructor(ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, _elementRef, platform, autofillMonitor) {
+        this.ngControl = ngControl;
+        this._elementRef = _elementRef;
+        this.platform = platform;
+        this.autofillMonitor = autofillMonitor;
+        /* Initialize the error state tracker to manage validation visibility */
+        this.errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
+        /* Monitor autofill state and update the control's appearance accordingly */
+        if (this.platform.isBrowser) {
+            this.autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((event) => {
+                this.autofilled = event.isAutofilled;
+                this.stateChanges.next();
+            });
+        }
+    }
+    /**
+     * Standard Angular lifecycle hook used to check for state changes.
+     */
+    ngDoCheck() {
+        if (this.ngControl) {
+            this.updateErrorState();
+            /* Check if the required state has changed on the underlying control */
+            const isRequired = this.ngControl.control?.hasValidator(Validators.required) ?? this._required;
+            if (isRequired !== this._required) {
+                this._required = isRequired;
+                this.stateChanges.next();
+            }
+        }
+    }
+    /**
+     * Updates the error state of the control.
+     */
+    updateErrorState() {
+        this.errorStateTracker.updateErrorState();
+    }
+    /**
+     * Sets the list of IDs that describe the control.
+     * Implemented as part of MatFormFieldControl.
+     */
+    setDescribedByIds(ids) {
+        this.ariaDescribedby = ids.join(' ');
+    }
+    /**
+     * Handles clicks on the container by focusing the element.
+     * Implemented as part of MatFormFieldControl.
+     */
+    onContainerClick() {
+        if (!this.focused) {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldRadioDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2$5.ErrorStateMatcher }, { token: i0.ElementRef }, { token: i3$3.Platform }, { token: i4$1.AutofillMonitor }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: MatFormFieldRadioDirective, isStandalone: true, selector: "[radioMatFormControl]", inputs: { errorStateMatcher: "errorStateMatcher", disabled: "disabled", id: "id", placeholder: "placeholder", required: "required", value: "value" }, host: { properties: { "attr.id": "id", "attr.aria-describedby": "ariaDescribedby || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()", "class.floating": "this.shouldLabelFloat" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldRadioDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldRadioDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[radioMatFormControl]',
+                    providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldRadioDirective }],
+                    host: {
+                        '[attr.id]': 'id',
+                        '[attr.aria-describedby]': 'ariaDescribedby || null',
+                        '[attr.aria-invalid]': 'errorState',
+                        '[attr.aria-required]': 'required.toString()',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i1$1.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i2$5.ErrorStateMatcher }, { type: i0.ElementRef }, { type: i3$3.Platform }, { type: i4$1.AutofillMonitor }], propDecorators: { errorStateMatcher: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], shouldLabelFloat: [{
+                type: HostBinding,
+                args: ['class.floating']
+            }] } });
+
 /**
  * This directive parses pasted currency strings into decimal values and updates the reactive form control.
  */
@@ -23527,15 +23788,15 @@ class VdGenericFormComponent {
         console.log(message, optionalParams);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\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>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\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>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\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>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\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>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
                 //--------------------
-                MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: 
+                MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i11.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i11.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { 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: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "ngmodule", type: VdFileModule }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { 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: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: 
                 //--------------------
                 AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "ngmodule", type: 
                 //--------------------
-                NgxColorsModule }, { kind: "component", type: i11.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i11.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: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+                NgxColorsModule }, { kind: "component", type: i12$1.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i12$1.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: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldRadioDirective, selector: "[radioMatFormControl]", inputs: ["errorStateMatcher", "disabled", "id", "placeholder", "required", "value"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
@@ -23552,6 +23813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatInputModule,
                         MatSelectModule,
                         MatCheckboxModule,
+                        MatRadioModule,
                         //--------------------
                         VdChipsComponent,
                         VdFileInputComponent,
@@ -23573,8 +23835,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ParseDecimalDirective,
                         PrefixDirective,
                         RemoveWhitespaceDirective,
-                        NativeElementInjectorDirective
-                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\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>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\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>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
+                        NativeElementInjectorDirective,
+                        MatFormFieldRadioDirective
+                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\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>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\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>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Radio -->\n                            @case(FormFieldType.Radio) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass || 'radio-form-field'\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-radio-group radioMatFormControl [formControlName]=\"field.name!\" layout=\"row\" class=\"radio-group-inside-field\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-radio-button [value]=\"option.id\" class=\"mat-radio-button-wrap\">\n                                                {{option.name}}\n                                            </mat-radio-button>\n                                        }\n                                    </mat-radio-group>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}.radio-form-field{width:100%}.radio-form-field ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}.radio-form-field ::ng-deep .mat-mdc-floating-label{transform:translateY(-1.5em) scale(1)}.radio-form-field mat-radio-group{display:flex;flex-direction:row;gap:20px;padding-top:4px;margin-left:-12px}.radio-form-field .mat-mdc-form-field-infix{min-height:48px;display:flex;align-items:center}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -23619,36 +23882,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 let nextUniqueId = 0;
+/**
+ * Directive that allows a TinyMCE editor to be used inside a MatFormField.
+ */
 class MatFormFieldEditorDirective {
     ngControl;
-    valueAccessor;
     platform;
     autofillMonitor;
-    ngZone;
     /**
-      * Tracks the error state of the select.
-      */
+     * Tracks the error state of the editor control.
+     * @type {_ErrorStateTracker}
+     */
     errorStateTracker;
     /**
      * Object used to control when error messages are shown.
+     * @type {ErrorStateMatcher}
      */
     get errorStateMatcher() { return this.errorStateTracker.matcher; }
     set errorStateMatcher(value) { this.errorStateTracker.matcher = value; }
     /**
      * Whether the control is in an error state.
+     * @type {boolean}
      */
     get errorState() { return this.errorStateTracker.errorState; }
     set errorState(value) { this.errorStateTracker.errorState = value; }
     /**
-     * Emits whenever the component state changes and should cause the parent
+     * Stream that emits whenever the state of the control changes and should cause the parent
      * form-field to update. Implemented as part of `MatFormFieldControl`.
-     * @docs-private
+     * @type {Subject<void>}
      */
     stateChanges = new Subject();
     /**
-     * _disabled: boolean
+     * Internal tracking for the disabled state.
+     * @type {boolean}
      */
     _disabled = false;
+    /**
+     * Whether the control is disabled.
+     * @type {boolean}
+     */
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -23657,32 +23929,52 @@ class MatFormFieldEditorDirective {
     }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
-        // Browsers may not fire the blur event if the input is disabled too quickly.
-        // Reset from here to ensure that the element doesn't become stuck.
+        /* Browsers may not fire the blur event if the input is disabled too quickly.
+           Reset focus state here to ensure the element doesn't become stuck. */
         if (this.focused) {
             this.focused = false;
             this.stateChanges.next();
         }
     }
     /**
-     * _id: string
+     * Internal tracking for the unique ID.
+     * @type {string | undefined}
      */
     _id;
+    /**
+     * Unique ID of the element.
+     * @type {string}
+     */
     get id() { return this._id ?? ''; }
     set id(value) { this._id = value || this.uid; }
     /**
-     * This input just provides the placeholder to the mat-form-field.
-     * Placeholder setup will still have to be done according to the
-     * TinyMCE placeholder plugin being used.
+     * This input provides the placeholder to the mat-form-field.
+     * Visual setup is handled via TinyMCE placeholder configuration.
+     * @type {string}
      */
     placeholder = '';
+    /**
+     * Internal tracking for the required state.
+     * @type {boolean}
+     */
     _required = false;
+    /**
+     * Whether the control is required.
+     * @type {boolean}
+     */
     get required() {
         return this._required;
     }
     set required(value) {
+        /* Coerce the input value to a boolean and store it. */
         this._required = coerceBooleanProperty(value);
+        /* Notify the parent form-field to update the required state of the label. */
+        this.stateChanges.next();
     }
+    /**
+     * The value of the editor control (HTML content).
+     * @type {string}
+     */
     get value() {
         return this.editor ? this.editor.getContent() : '';
     }
@@ -23692,43 +23984,101 @@ class MatFormFieldEditorDirective {
             this.stateChanges.next();
         }
     }
+    /**
+     * Event emitted when the editor content is modified.
+     * @type {EventEmitter<EditorChange>}
+     */
     editorChange = new EventEmitter();
+    /**
+     * Whether the control is empty.
+     * @type {boolean}
+     */
     empty = false;
+    /**
+     * Whether the control is focused.
+     * @type {boolean}
+     */
     focused = false;
+    /**
+     * The selector used to identify this control type in the form field.
+     * @type {string}
+     */
     controlType = 'tinymce-editor';
+    /**
+     * The aria-describedby attribute for the control.
+     * @type {string | null | undefined}
+     */
     ariaDescribedby;
+    /**
+     * Whether the label should float.
+     * @type {boolean}
+     */
     shouldLabelFloat = true;
+    /**
+     * Whether the control is currently autofilled by the browser.
+     * @type {boolean}
+     */
     autofilled = false;
+    /**
+     * Generated unique ID for the instance.
+     * @type {string}
+     */
     uid = `tinymce-mat-form-control-${nextUniqueId++}`;
+    /**
+     * Reference to the TinyMCE editor instance.
+     * @type {Editor | undefined}
+     */
     editor;
+    /**
+     * Reference to the editor's underlying HTML element.
+     * @type {HTMLElement | undefined}
+     */
     editorElement;
-    constructor(ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, valueAccessor, platform, autofillMonitor, ngZone) {
+    /**
+     * Constructor that injects necessary dependencies and initializes the error state tracker.
+     * @param ngControl The NgControl associated with this control, if any.
+     * @param parentForm The parent NgForm, if any.
+     * @param parentFormGroup The parent FormGroupDirective, if any.
+     * @param defaultErrorStateMatcher The default ErrorStateMatcher to use for error state tracking.
+     * @param valueAccessor The NG_VALUE_ACCESSOR for this control, which is the EditorComponent.
+     * @param platform The Platform service for checking the current platform.
+     * @param autofillMonitor The AutofillMonitor service for monitoring autofill state.
+     */
+    constructor(ngControl, parentForm, parentFormGroup, defaultErrorStateMatcher, platform, autofillMonitor) {
         this.ngControl = ngControl;
-        this.valueAccessor = valueAccessor;
         this.platform = platform;
         this.autofillMonitor = autofillMonitor;
-        this.ngZone = ngZone;
+        /* Initialize the error state tracker to manage validation visibility */
         this.errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
     }
+    /**
+     * Standard Angular lifecycle hook used to check for state changes.
+     */
     ngDoCheck() {
         if (this.ngControl) {
             this.updateErrorState();
+            /* Check if the required state has changed on the underlying control */
+            const isRequired = this.ngControl.control?.hasValidator(Validators.required) ?? this._required;
+            if (isRequired !== this._required) {
+                this._required = isRequired;
+                this.stateChanges.next();
+            }
         }
     }
     /**
-     * Updates the error state of the control. This should be called whenever the
-     * inputs bound to the component change.
+     * Updates the error state of the control.
      */
     updateErrorState() {
         this.errorStateTracker.updateErrorState();
     }
+    /**
+     * Handles the editor initialization event and caches references.
+     * @param event The initialization event containing the editor instance.
+     */
     onEditorInit({ editor }) {
-        // Cache a copy of the editor so that we have access to it
-        // elsewhere. This won't be necessary once the '_editor'
-        // property on EditorComponent has a public getter. This was
-        // added in TINY-3772, but it's not published to npm yet.
+        /* Cache a copy of the editor so that we have access to it elsewhere */
         this.editor = editor;
-        // Cache the editor element so that we can focus it on container clicks
+        /* Cache the editor element so that we can focus it on container clicks */
         this.editorElement = editor.getElement();
         if (this.platform.isBrowser) {
             this.autofillMonitor.monitor(this.editorElement).subscribe((event) => {
@@ -23737,15 +24087,23 @@ class MatFormFieldEditorDirective {
             });
         }
     }
+    /**
+     * Sets the list of IDs that describe the control.
+     * Implemented as part of MatFormFieldControl.
+     */
     setDescribedByIds(ids) {
         this.ariaDescribedby = ids.join(' ');
     }
+    /**
+     * Handles clicks on the container by focusing the editor.
+     * Implemented as part of MatFormFieldControl.
+     */
     onContainerClick() {
         if (!this.focused && this.editorElement) {
             this.editorElement.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2$5.ErrorStateMatcher }, { token: NG_VALUE_ACCESSOR, self: true }, { token: i3$3.Platform }, { token: i4$1.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2$5.ErrorStateMatcher }, { token: i3$3.Platform }, { token: i4$1.AutofillMonitor }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: MatFormFieldEditorDirective, isStandalone: true, selector: "[tinyMatFormControl]", inputs: { errorStateMatcher: "errorStateMatcher", disabled: "disabled", id: "id", placeholder: "placeholder", required: "required", value: "value" }, outputs: { editorChange: "editorChange" }, host: { listeners: { "onInit": "onEditorInit($event)" }, properties: { "attr.id": "id", "attr.aria-describedby": "ariaDescribedby || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldEditorDirective }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
@@ -23768,12 +24126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     type: Optional
                 }] }, { type: i1$1.FormGroupDirective, decorators: [{
                     type: Optional
-                }] }, { type: i2$5.ErrorStateMatcher }, { type: i5$2.EditorComponent, decorators: [{
-                    type: Self
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }, { type: i3$3.Platform }, { type: i4$1.AutofillMonitor }, { type: i0.NgZone }], propDecorators: { errorStateMatcher: [{
+                }] }, { type: i2$5.ErrorStateMatcher }, { type: i3$3.Platform }, { type: i4$1.AutofillMonitor }], propDecorators: { errorStateMatcher: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -27959,5 +28312,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AbstractSelectFormField, 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, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, 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, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, 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, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, 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, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, 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, mixinDisableRipple, 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, vdCollapseAnimation, whitelist };
+export { AbstractMatFormField, AbstractSelectFormField, 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, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, 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, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldRadioDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, 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, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, 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, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, 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, mixinDisableRipple, 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, vdCollapseAnimation, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map