@messaia/cdk 21.1.0-rc.3 → 21.1.0-rc.32

package/fesm2022/messaia-cdk.mjs

@@ -1,11 +1,11 @@
 import * as i3$1 from '@angular/common';
-import { Location, getLocaleNumberSymbol, NumberSymbol, CommonModule, DecimalPipe, JsonPipe } from '@angular/common';
+import { Location, getLocaleNumberSymbol, NumberSymbol, CommonModule, DecimalPipe, NgClass, JsonPipe } from '@angular/common';
 import * as i1$6 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, forwardRef, LOCALE_ID, NgModule, Pipe, HostListener, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, Self, SimpleChange, Attribute, SecurityContext } from '@angular/core';
+import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, HostListener, forwardRef, LOCALE_ID, NgModule, Pipe, input, computed, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, Self, SimpleChange, Attribute, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
-import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA, MatDialogTitle } from '@angular/material/dialog';
 import * as i6$3 from '@angular/material/expansion';
 import { MatExpansionPanel, MatExpansionModule } from '@angular/material/expansion';
 import * as i2$3 from '@angular/material/snack-bar';
@@ -14,7 +14,7 @@ import * as i1$3 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule } from '@angular/router';
-import { fromEvent, Subject, map, of, BehaviorSubject, throwError, filter, distinctUntilChanged, debounceTime, merge as merge$1, tap, Observable, takeUntil as takeUntil$1 } from 'rxjs';
+import { fromEvent, Subject, switchMap, timer, takeUntil as takeUntil$1, filter, map, tap, merge as merge$1, of, BehaviorSubject, firstValueFrom, throwError, distinctUntilChanged, debounceTime, Observable } from 'rxjs';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import * as i8 from '@angular/material/icon';
@@ -25,16 +25,17 @@ import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import * as i3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { takeUntil, map as map$1, catchError, skip, switchMap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, finalize } from 'rxjs/operators';
-import * as i5 from '@angular/material/checkbox';
+import { takeUntil, map as map$1, catchError, skip, switchMap as switchMap$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, tap as tap$1, finalize } from 'rxjs/operators';
+import { CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
+import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i10 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
-import { trigger, state, transition, style, AUTO_STYLE, group, query, animate, animateChild } from '@angular/animations';
+import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i2$2 from '@angular/cdk/table';
 import { DataSource, CdkTableModule } from '@angular/cdk/table';
-import * as i5$1 from '@angular/material/chips';
+import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i6 from '@angular/material/input';
 import { MatInputModule, MatInput } from '@angular/material/input';
@@ -47,7 +48,7 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i1$5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i3$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { __decorate, __metadata } from 'tslib';
 import 'reflect-metadata';
 import * as i2$1 from '@angular/material/select';
@@ -1248,6 +1249,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.
      */
@@ -1480,38 +1485,56 @@ class BaseComponent {
                 /* Otherwise, expand the panel based on the URL hash if set */
                 this.expandPanelPath(this.urlHash ?? '');
             }
-            /* Detect changes for opened panels */
+            /* Array to hold all panel event streams */
+            const panelStateChanges$ = [];
+            /* Used to cancel pending close events when another panel opens */
+            const openedSignal$ = new Subject();
+            /* Prepare observables for all panels */
             this.matExpansionPanelQueryList?.forEach(y => {
-                this.matExpansionPanelSubscriptions.push(y.opened.subscribe(_ => {
+                /* Map closed events to their target parent hash */
+                panelStateChanges$.push(y.closed.pipe(switchMap(_ => {
+                    /* Get the id of the current closed panel */
+                    const currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
+                    const currentPanelIdParts = currentPanelId?.split('.');
+                    /* Extract parent ID if nested */
+                    const parentHash = (currentPanelIdParts && currentPanelIdParts.length > 1)
+                        ? currentPanelIdParts.slice(0, -1).join('.')
+                        : null;
+                    /* Delay close handling so a near-simultaneous open can cancel it */
+                    return timer(50).pipe(takeUntil$1(openedSignal$), 
+                    /* Ignore close when another panel is opening/opened */
+                    filter(_ => !(this.matExpansionPanelQueryList?.toArray()?.some(panel => {
+                        const panelId = panel['_viewContainerRef']?.element?.nativeElement?.id;
+                        return panel.expanded && panelId && panelId !== currentPanelId;
+                    }) ?? false)), map(_ => ({ action: 'close', hash: parentHash })));
+                })));
+                /* Map opened events to their target hash */
+                panelStateChanges$.push(y.opened.pipe(tap(_ => openedSignal$.next()), map(_ => {
+                    /* Get the id of the current opened panel */
+                    const currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
+                    return { action: 'open', hash: currentPanelId };
+                })));
+            });
+            /* Merge all event streams to handle concurrent open/close actions */
+            if (panelStateChanges$.length > 0) {
+                this.matExpansionPanelSubscriptions.push(merge$1(...panelStateChanges$).subscribe(eventState => {
                     if (this.setUrlHash) {
-                        /* Get the id of the current opened panel */
-                        var currentPanelId = y['_viewContainerRef']?.element?.nativeElement?.id;
-                        /* If the panel ID is set, set it as url segment (hash) */
-                        if (currentPanelId) {
-                            this.router.navigate([], { fragment: currentPanelId, replaceUrl: true });
+                        /* If a valid hash exists, set it as url segment */
+                        if (eventState.hash) {
+                            this.router.navigate([], { fragment: eventState.hash, replaceUrl: true });
                         }
-                        /* Otherwise remove the segment from the url */
-                        else {
+                        /*
+                         * Otherwise remove the segment from the url (only on open actions to prevent
+                         * clearing the hash when collapsing a nested child)
+                         */
+                        else if (eventState.action === 'open') {
                             this.router.navigate([], { replaceUrl: true });
                         }
                     }
-                    /* Detect changes */
-                    this.changeDetectorRef.detectChanges();
-                }));
-                /* Detect changes for closed panels */
-                this.matExpansionPanelSubscriptions.push(y.closed.subscribe(_ => {
-                    if (this.setUrlHash) {
-                        /* Get the id of the current opened panel */
-                        var currentPanelIdParts = y['_viewContainerRef']?.element?.nativeElement?.id?.split('.');
-                        /* If the panel ID is set, set it as url segment (hash) */
-                        if (currentPanelIdParts.length > 1) {
-                            this.router.navigate([], { fragment: currentPanelIdParts.slice(0, -1).join('.'), replaceUrl: true });
-                        }
-                    }
-                    /* Detect changes */
+                    /* Detect changes ONCE after the concurrent event storm settles */
                     this.changeDetectorRef.detectChanges();
                 }));
-            });
+            }
         });
         /* Notify expansion panel list changes */
         if (this.matExpansionPanelQueryList) {
@@ -1716,12 +1739,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.
@@ -2007,6 +2036,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [MatExpansionPanel]
             }] } });
 
+/**
+ * Directive that allows a dialog to be maximized via double-click on the handle.
+ */
+class VdDialogMaximizeDirective {
+    elementRef;
+    renderer;
+    /**
+     * The selector used to identify the root overlay pane to be resized.
+     * @type {string}
+     */
+    rootElementSelector = '.cdk-overlay-pane';
+    /**
+     * Whether the dialog is currently maximized.
+     * @type {boolean}
+     */
+    isMaximized = false;
+    /**
+     * Constructor that injects ElementRef and Renderer2 for DOM manipulation.
+     * @param elementRef The ElementRef of the host element.
+     * @param renderer The Renderer2 instance for DOM manipulation.
+     */
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    /**
+     * Listens for the double-click event on the host element to toggle maximization.
+     */
+    toggle() {
+        /* Find the closest ancestor element that matches the rootElementSelector. This is typically the overlay pane that contains the dialog. */
+        const pane = this.elementRef.nativeElement.closest(this.rootElementSelector);
+        if (!pane) {
+            return;
+        }
+        /* Toggle the maximized state */
+        this.isMaximized = !this.isMaximized;
+        /* Add or remove the 'dialog-maximized' class based on the maximized state */
+        if (this.isMaximized) {
+            this.renderer.addClass(pane, 'dialog-maximized');
+            /* Reset the transform style to ensure the maximized dialog isn't offset by drag coordinates */
+            this.renderer.setStyle(pane, 'transform', 'none', 1);
+        }
+        else {
+            this.renderer.removeClass(pane, 'dialog-maximized');
+            /* Removing the style allows cdkDrag to re-apply its internal transforms when dragged again */
+            this.renderer.removeStyle(pane, 'transform');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogMaximizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogMaximizeDirective, isStandalone: true, selector: "[vdDialogMaximize]", inputs: { rootElementSelector: "rootElementSelector" }, host: { listeners: { "dblclick": "toggle()" } }, exportAs: ["dialogMaximize"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogMaximizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vdDialogMaximize]',
+                    exportAs: 'dialogMaximize',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { rootElementSelector: [{
+                type: Input
+            }], toggle: [{
+                type: HostListener,
+                args: ['dblclick']
+            }] } });
+
+/**
+ * Component that provides standard maximize and close actions for dialogs.
+ */
+class VdDialogHeaderActionsComponent {
+    /**
+     * Reference to the maximize directive instance.
+     * @type {VdDialogMaximizeDirective}
+     */
+    maximize;
+    /**
+     * Reference to the parent dialog to allow closing.
+     * @type {MatDialogRef<any>}
+     */
+    dialogRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogHeaderActionsComponent, isStandalone: true, selector: "vd-dialog-header-actions", inputs: { maximize: "maximize", dialogRef: "dialogRef" }, ngImport: i0, template: `
+        <div class="dialog-actions" layout="row" layout-align="start center">
+            <button mat-icon-button (click)="maximize.toggle()" type="button">
+                <mat-icon>{{ maximize.isMaximized ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+            </button>
+            <button mat-icon-button (click)="dialogRef.close()" type="button">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>`, isInline: true, styles: [".dialog-actions{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-dialog-header-actions', template: `
+        <div class="dialog-actions" layout="row" layout-align="start center">
+            <button mat-icon-button (click)="maximize.toggle()" type="button">
+                <mat-icon>{{ maximize.isMaximized ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+            </button>
+            <button mat-icon-button (click)="dialogRef.close()" type="button">
+                <mat-icon>close</mat-icon>
+            </button>
+        </div>`, imports: [
+                        MatButtonModule,
+                        MatIconModule
+                    ], styles: [".dialog-actions{display:flex;gap:4px}\n"] }]
+        }], propDecorators: { maximize: [{
+                type: Input,
+                args: [{ required: true }]
+            }], dialogRef: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/** * Reusable dialog header that handles dragging, maximizing, and closing.
+ */
+class VdDialogHeaderComponent {
+    /**
+     * Reference to the dialog instance to allow the close button to work.
+     * @type {MatDialogRef<any>}
+     */
+    dialogRef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogHeaderComponent, isStandalone: true, selector: "vd-dialog-header", inputs: { dialogRef: "dialogRef" }, ngImport: i0, template: `
+        <div vdDialogMaximize 
+             #maximize="dialogMaximize" 
+             cdkDrag 
+             cdkDragRootElement=".cdk-overlay-pane" 
+             [cdkDragDisabled]="maximize.isMaximized"
+             cdkDragHandle
+             class="dialog-header-container pad-right-sm push-none" 
+             layout="row" 
+             layout-align="space-between center">            
+            <span mat-dialog-title class="pad-left-sm push-left-sm" flex>
+                <ng-content></ng-content>
+            </span>
+            <vd-dialog-header-actions [maximize]="maximize" [dialogRef]="dialogRef"></vd-dialog-header-actions>
+        </div>`, isInline: true, styles: [".dialog-header-container{cursor:move;display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: VdDialogMaximizeDirective, selector: "[vdDialogMaximize]", inputs: ["rootElementSelector"], exportAs: ["dialogMaximize"] }, { kind: "component", type: VdDialogHeaderActionsComponent, selector: "vd-dialog-header-actions", inputs: ["maximize", "dialogRef"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vd-dialog-header', template: `
+        <div vdDialogMaximize 
+             #maximize="dialogMaximize" 
+             cdkDrag 
+             cdkDragRootElement=".cdk-overlay-pane" 
+             [cdkDragDisabled]="maximize.isMaximized"
+             cdkDragHandle
+             class="dialog-header-container pad-right-sm push-none" 
+             layout="row" 
+             layout-align="space-between center">            
+            <span mat-dialog-title class="pad-left-sm push-left-sm" flex>
+                <ng-content></ng-content>
+            </span>
+            <vd-dialog-header-actions [maximize]="maximize" [dialogRef]="dialogRef"></vd-dialog-header-actions>
+        </div>`, imports: [
+                        MatDialogTitle,
+                        VdDialogMaximizeDirective,
+                        VdDialogHeaderActionsComponent,
+                        CdkDragHandle,
+                        CdkDrag
+                    ], styles: [".dialog-header-container{cursor:move;display:flex;width:100%}\n"] }]
+        }], propDecorators: { dialogRef: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
  * This class sets up a blueprint for creating typed forms by providing a property (formGroup)
  * for handling form data of a specific type (T). Users can extend this class and implement
@@ -11803,6 +11997,139 @@ function mixinDisabled(base) {
     };
 }
 
+class MsaEnumDisplayComponent {
+    /**
+     * The numeric value of the enum to convert.
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * The enum type (as an object) that defines the mapping of values to their string representations.
+     * @type {any}
+     */
+    enumType = input(...(ngDevMode ? [undefined, { debugName: "enumType" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional metadata for the enum values, which can be used to provide additional display information.
+     * This can be either a string prefix or an object containing EnumMetadata for each enum value.
+     */
+    metadata = input(...(ngDevMode ? [undefined, { debugName: "metadata" }] : /* istanbul ignore next */ []));
+    /**
+     * Determines whether to display the icon alongside the text.
+     * Defaults to false (hidden).
+     */
+    showIcon = input(false, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional entity context passed down to evaluate dynamic icon functions.
+     */
+    entity = input(...(ngDevMode ? [undefined, { debugName: "entity" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional execution context passed down to evaluate dynamic icon functions.
+     */
+    context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
+    /**
+     * Extracts the current metadata object if it exists for the given value.
+     */
+    currentMetadata = computed(() => {
+        /* Get the current value and metadata */
+        const val = this.value();
+        const meta = this.metadata();
+        /* Check if the metadata is an object and contains the current value */
+        if (val !== null && val !== undefined && meta && typeof meta === 'object' && val in meta) {
+            return meta[val];
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "currentMetadata" }] : /* istanbul ignore next */ []));
+    /**
+     * Dynamically evaluates the Icon configuration properties based on whether they are static values or context functions.
+     */
+    resolvedIcon = computed(() => {
+        /* Early exit if icons are explicitly configured to be hidden */
+        if (!this.showIcon()) {
+            return null;
+        }
+        /* Retrieve the current metadata and extract the icon configuration */
+        const meta = this.currentMetadata();
+        const iconConfig = meta?.icon;
+        if (!iconConfig) {
+            return null;
+        }
+        /* Retrieve the entity and context for dynamic evaluation */
+        const x = this.entity();
+        const ctx = this.context();
+        /* Evaluate visibility rule from layout configurations */
+        const shouldHide = typeof iconConfig.hide === 'function' ? iconConfig.hide(x, ctx) : iconConfig.hide;
+        if (shouldHide) {
+            return null;
+        }
+        /* Helper to resolve string values or callback functions dynamically */
+        const resolve = (prop) => typeof prop === 'function' ? prop(x, ctx) : prop;
+        /* Return the resolved icon configuration with evaluated properties */
+        return {
+            matIcon: resolve(iconConfig.matIcon),
+            svgIcon: resolve(iconConfig.svgIcon),
+            fontIcon: resolve(iconConfig.fontIcon),
+            fontSet: iconConfig.fontSet ?? 'material-symbols-outlined',
+            color: resolve(iconConfig.iconColor),
+            cssClass: resolve(iconConfig.cssClass)
+        };
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves the text to display based on metadata or enum lookup.
+     */
+    resolvedText = computed(() => {
+        /* Get the current value */
+        const val = this.value();
+        if (val === null || val === undefined) {
+            return '';
+        }
+        /* Attempt to retrieve the display string from the metadata if available */
+        const metaObj = this.currentMetadata();
+        if (metaObj) {
+            return metaObj.display ?? '';
+        }
+        /* Fallback to enum type lookup if metadata is not available */
+        const type = this.enumType();
+        const metaStr = this.metadata();
+        /* If the enum type is an object and contains the value, return the corresponding string representation with optional prefix */
+        if (type && typeof type === 'object' && val in type) {
+            const prefix = typeof metaStr === 'string' ? metaStr : '';
+            return `${prefix}${type[val]}`;
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "resolvedText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MsaEnumDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MsaEnumDisplayComponent, isStandalone: true, selector: "msa-enum-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, enumType: { classPropertyName: "enumType", publicName: "enumType", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, entity: { classPropertyName: "entity", publicName: "entity", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (resolvedIcon(); as iconConfig) {
+            <mat-icon
+                [svgIcon]="iconConfig.svgIcon"
+                [fontIcon]="iconConfig.fontIcon"
+                [fontSet]="iconConfig.fontSet"
+                [style.color]="iconConfig.color"
+                [ngClass]="iconConfig.cssClass"
+                class="enum-icon">
+                @if (iconConfig.matIcon) { {{ iconConfig.matIcon }} }
+            </mat-icon>
+        }
+        @let text = resolvedText();    
+        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, isInline: true, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MsaEnumDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'msa-enum-display', standalone: true, imports: [MatIcon, NgClass], template: `
+        @if (resolvedIcon(); as iconConfig) {
+            <mat-icon
+                [svgIcon]="iconConfig.svgIcon"
+                [fontIcon]="iconConfig.fontIcon"
+                [fontSet]="iconConfig.fontSet"
+                [style.color]="iconConfig.color"
+                [ngClass]="iconConfig.cssClass"
+                class="enum-icon">
+                @if (iconConfig.matIcon) { {{ iconConfig.matIcon }} }
+            </mat-icon>
+        }
+        @let text = resolvedText();    
+        <span class="enum-text" i18n="@@selection">{ text, select, type {type} other { {{text}}} }</span>`, styles: [".enum-icon{margin-right:.2rem;vertical-align:middle}.enum-text{vertical-align:middle}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], enumType: [{ type: i0.Input, args: [{ isSignal: true, alias: "enumType", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "entity", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
+
 const headerMetadataKey = 'customer:vdHeader';
 const endpointMetadataKey = 'customer:vdEndpoint';
 
@@ -12117,6 +12444,15 @@ function getDisplay(origin) {
     return Reflect.getMetadata(headerMetadataKey, origin);
 }
 
+/**
+ * @method graphql
+ * @description A tag function that tells IDEs (VS Code/WebStorm)
+ * to provide GraphQL syntax highlighting without adding runtime dependencies.
+ */
+function graphql(strings, ...values) {
+    return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
+}
+
 //@dynamic
 class AppStorage {
     /**
@@ -12355,6 +12691,18 @@ class TableColumn {
      * @property
      */
     filterOptionText;
+    /**
+     * @property filterTooltip
+     * @description Tooltip for the filter input.
+     * @type {(ctx?: IGenericListComponent<TEntity>) => any}
+     */
+    filterTooltip;
+    /**
+     * @property filterTooltipClass
+     * @description CSS class for the filter tooltip.
+     * @type {string}
+     */
+    filterTooltipClass;
     /**
      * The header text for the column.
      * @property
@@ -13138,6 +13486,12 @@ class EnumMetadata {
      * @type {string}
      */
     display;
+    /**
+     * @property Hint
+     * @description An optional hint string associated with the enum value. This string can be used to provide additional information or guidance in the UI.
+     * @type {string}
+     */
+    hint;
     /**
      * @property Icon
      * @description An optional icon associated with the enum value. This can be used to visually represent the enum value in the UI.
@@ -13446,6 +13800,10 @@ class EnumPipe {
      *          or undefined if the value is not recognized in the provided enum type.
      */
     transform(value, enumType, prefixOrMetadata, suffix = '') {
+        /* Return undefined if the value is null or undefined */
+        if (value === null || value === undefined) {
+            return undefined;
+        }
         /* Determine if prefixOrMetadata is an object containing EnumMetadata for the given value */
         if (prefixOrMetadata && typeof prefixOrMetadata === 'object' && value in prefixOrMetadata) {
             const metadata = prefixOrMetadata[value];
@@ -14195,30 +14553,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+/**
+ * @method parseProjectionString
+ * @description Parses projection input (string, string array, or raw multi-line string) into a flattened API-friendly projection string.
+ * @param {string | string[]} projection The raw selection input
+ * @returns {string} The formatted comma-separated string with no whitespace
+ */
+const parseProjectionString = (projection) => {
+    /* Handle array input: join and proceed to cleaning */
+    let input = Array.isArray(projection) ? projection.join(',') : projection;
+    /* If it's already a clean, flat, comma-separated string without braces, return it */
+    if (!input.includes('{') && !input.includes('}')) {
+        return input.replace(/\s+/g, '');
+    }
+    /* Clean the string: remove newlines, extra spaces, and replace { with ( and } with ) */
+    let cleaned = input
+        .replace(/\s+/g, ' ')
+        .replace(/\s?\{\s?/g, '(')
+        .replace(/\s?\}\s?/g, ')')
+        .trim();
+    /* Remove trailing commas before closing parentheses */
+    cleaned = cleaned.replace(/,\s*\)/g, ')');
+    /* Replace spaces between alphanumeric characters with commas and remove all remaining whitespace */
+    return cleaned
+        .replace(/([a-zA-Z0-9])\s+([a-zA-Z0-9])/g, '$1,$2')
+        .replace(/\)([a-zA-Z_])/g, '),$1')
+        .replace(/\s+/g, '');
+};
+
 class GenericService {
     endpoint;
     /**
-     * Http client
+     * Injected Angular HttpClient instance
      */
     http = inject(HttpClient);
     /**
-     * List of entities
+     * BehaviorSubject holding the current list of entities
      */
     list = new BehaviorSubject([]);
     /**
      * Constructor
-     *
-     * @param http
+     * @param endpoint Optional API endpoint for the service
      */
     constructor(endpoint) {
         this.endpoint = endpoint;
     }
     /**
-     * Gets a single entity
-     *
-     * @param id The id of the entity or relative path
-     * @param params Adds query params to the request
-     * @param headers Adds headers to the request
+     * Retrieves a single entity by ID or relative path
+     * @param id The entity ID or relative path
+     * @param params Optional query parameters
+     * @param headers Optional HTTP headers
+     * @param handleError Whether to handle errors (default: true)
+     * @param observeResponse Whether to observe the full response (default: false)
      */
     get(id, params, headers, handleError = true, observeResponse = false) {
         let request = this.http
@@ -14230,12 +14616,20 @@ class GenericService {
         return request;
     }
     /**
-     * Counts entities
-     *
-     * @param params Adds query params to the request
-     * @param path A relative path to the action
-     * @param headers Adds headers to the request
-     * @param handleError Handle errors
+     * Asynchronously retrieves a single entity by ID or relative path
+     * @param id The entity ID or relative path
+     * @param params Optional query parameters
+     * @returns Promise resolving to the entity
+     */
+    async getAsync(id, params) {
+        return await firstValueFrom(this.get(id, params));
+    }
+    /**
+     * Counts entities on the server
+     * @param params Optional query parameters
+     * @param path Optional relative path to the count action
+     * @param headers Optional HTTP headers
+     * @param handleError Whether to handle errors (default: true)
      */
     count(params, path, headers, handleError = true) {
         let request = this.http
@@ -14247,41 +14641,81 @@ class GenericService {
         return request.pipe(map$1(x => { return x.value; }));
     }
     /**
-     * Gets a list of entities.
-     *
-     * @param params Optional. Adds query params to the request.
-     * @param path Optional. A relative path to the action.
-     * @param headers Optional. Adds headers to the request.
-     * @returns An Observable with the response data.
+     * Asynchronously counts entities on the server
+     * @param params Optional query parameters
+     * @param path Optional relative path to the count action
+     * @returns Promise resolving to the count
+     */
+    async countAsync(params, path) {
+        return await firstValueFrom(this.count(params, path));
+    }
+    /**
+     * Retrieves a list of entities
+     * @param params Optional query parameters
+     * @param path Optional relative path to the action
+     * @param headers Optional HTTP headers
+     * @returns Observable with the response data
      */
     getList(params, path, headers) {
+        const parsedParams = this.normalizeProjectionParam(params);
         return this.http
-            .get(`${this.endpoint}${path ? path : ''}`, { params: params instanceof HttpParams ? params : Utils.toHttpParams(params), headers: this.toHttpHeaders(headers) })
+            .get(`${this.endpoint}${path ? path : ''}`, {
+            params: parsedParams instanceof HttpParams ? parsedParams : Utils.toHttpParams(parsedParams),
+            headers: this.toHttpHeaders(headers)
+        })
             .pipe(catchError(this.handleError('getList')));
     }
     /**
-     * Loads data
-     * @param params Adds query params to the request
-     * @param path A relative path to the action
-     * @param headers Adds headers to the request
+     * Asynchronously retrieves a list of entities
+     * @param params Optional query parameters
+     * @param path Optional relative path to the action
+     * @param headers Optional HTTP headers
+     * @returns Promise resolving to the response data
+     */
+    async getListAsync(params, path, headers) {
+        /* Calling the observable-based method and converting to promise */
+        const request$ = this.getList(params, path, headers);
+        /* Using firstValueFrom to handle the single response value */
+        return await firstValueFrom(request$);
+    }
+    /**
+     * Loads data into the BehaviorSubject list
+     * @param params Optional query parameters
+     * @param path Optional relative path to the action
+     * @param headers Optional HTTP headers
      */
     loadList(params, path, headers) {
         this.getList(params, path, headers)
             .subscribe(x => this.list.next(x));
     }
     /**
-     * Gets result list as Observable
+     * Loads data into the BehaviorSubject list asynchronously
+     * @param params Optional query parameters
+     * @param path Optional relative path to the action
+     * @param headers Optional HTTP headers
+     */
+    /**
+     * Asynchronously loads data into the BehaviorSubject list
+     * @param params Optional query parameters
+     * @param path Optional relative path to the action
+     * @param headers Optional HTTP headers
+     */
+    async loadListAsync(params, path, headers) {
+        const data = await this.getListAsync(params, path, headers);
+        this.list.next(data);
+    }
+    /**
+     * Returns the list BehaviorSubject as an Observable
      */
     getListAsObservable() {
         return this.list.asObservable();
     }
     /**
-     * Creates an entity
-     *
+     * Creates a new entity
      * @param entity The entity to create
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     create(entity, path, httpOptions, handleError = true) {
         let request = this.http
@@ -14293,12 +14727,22 @@ class GenericService {
         return request;
     }
     /**
-     * Updates an entity
-     *
-     * @param entity The entity to update
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * Asynchronously creates a new entity
+     * @param entity The entity to create
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the created entity
+     */
+    async createAsync(entity, path, httpOptions) {
+        return await firstValueFrom(this.create(entity, path, httpOptions));
+    }
+    /**
+     * Updates an existing entity asynchronously
+     * @param id The ID of the entity to update
+     * @param entity The updated entity data
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     update(id, entity, path, httpOptions, handleError = true) {
         let request = this.http
@@ -14310,13 +14754,23 @@ class GenericService {
         return request;
     }
     /**
-     * Patches an entity
-     *
-     * @param id id The id of the item to patch
-     * @param body The body
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * Asynchronously updates an existing entity
+     * @param id The ID of the entity to update
+     * @param entity The updated entity data
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the updated entity
+     */
+    async updateAsync(id, entity, path, httpOptions) {
+        return await firstValueFrom(this.update(id, entity, path, httpOptions));
+    }
+    /**
+     * Applies a JSON Patch to an entity
+     * @param id The ID of the item to patch
+     * @param body The patch body
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     patch(id, body, path, httpOptions, handleError = true) {
         /* Ensure correct content-type for patch */
@@ -14339,13 +14793,23 @@ class GenericService {
         return request;
     }
     /**
-     * Patches multiple entities
-     *
-     * @param ids The ids of the items to patch
-     * @param body The body
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * Asynchronously applies a JSON Patch to an entity
+     * @param id The ID of the item to patch
+     * @param body The patch body
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the patched entity
+     */
+    async patchAsync(id, body, path, httpOptions) {
+        return await firstValueFrom(this.patch(id, body, path, httpOptions));
+    }
+    /**
+     * Applies a JSON Patch to multiple entities
+     * @param ids The IDs of the items to patch
+     * @param body The patch body
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     patchList(ids, body, path, httpOptions, handleError = true) {
         let request = this.http
@@ -14357,12 +14821,22 @@ class GenericService {
         return request;
     }
     /**
-     * Deletes an entity.
-     *
-     * @param id The id of the item to delete
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * Asynchronously applies a JSON Patch to multiple entities
+     * @param ids The IDs of the items to patch
+     * @param body The patch body
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the patched entities
+     */
+    async patchListAsync(ids, body, path, httpOptions) {
+        return await firstValueFrom(this.patchList(ids, body, path, httpOptions));
+    }
+    /**
+     * Deletes an entity by ID
+     * @param id The ID of the item to delete
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     delete(id, path, httpOptions, handleError = true) {
         let request = this.http
@@ -14374,12 +14848,21 @@ class GenericService {
         return request;
     }
     /**
-     * Deletes multiple entities.
-     *
-     * @param ids The ids of the items to delete
-     * @param path A relative path to the action
-     * @param httpOptions Additional http options, like headers and so on
-     * @param handleError Handle errors
+     * Asynchronously deletes an entity by ID
+     * @param id The ID of the item to delete
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the delete result
+     */
+    async deleteAsync(id, path, httpOptions) {
+        return await firstValueFrom(this.delete(id, path, httpOptions));
+    }
+    /**
+     * Deletes multiple entities by IDs
+     * @param ids The IDs of the items to delete
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @param handleError Whether to handle errors (default: true)
      */
     deleteList(ids, path, httpOptions, handleError = true) {
         let request = this.http.delete(`${this.endpoint}${path ? path : ''}`, Object.assign(httpOptions || {}, { params: Utils.toHttpParams({ ids: ids }) }));
@@ -14390,10 +14873,20 @@ class GenericService {
         return request;
     }
     /**
-     * Downloads a file
-     *
-     * @param path A relative path to the action
-     * @param params Some query params
+     * Asynchronously deletes multiple entities by IDs
+     * @param ids The IDs of the items to delete
+     * @param path Optional relative path to the action
+     * @param httpOptions Optional HTTP options (headers, etc.)
+     * @returns Promise resolving to the delete result
+     */
+    async deleteListAsync(ids, path, httpOptions) {
+        return await firstValueFrom(this.deleteList(ids, path, httpOptions));
+    }
+    /**
+     * Downloads a file from the server
+     * @param path Relative path to the download action
+     * @param params Optional query parameters
+     * @param handleError Whether to handle errors (default: true)
      */
     download(path, params, handleError = true) {
         let request = this.http
@@ -14406,17 +14899,35 @@ class GenericService {
         return request;
     }
     /**
-     * Duplicates a record
-     * @param id
+     * Asynchronously downloads a file from the server
+     * @param path Relative path to the download action
+     * @param params Optional query parameters
+     * @returns Promise resolving to the download result
+     */
+    async downloadAsync(path, params) {
+        return await firstValueFrom(this.download(path, params));
+    }
+    /**
+     * Duplicates a record by ID
+     * @param id The ID of the record to duplicate
      */
     duplicate(id) {
         return this.create(null, `/duplicate/${id}`);
     }
     /**
-     * Uploads a file
-     *
+     * Asynchronously duplicates a record by ID
+     * @param id The ID of the record to duplicate
+     * @returns Promise resolving to the duplicated record
+     */
+    async duplicateAsync(id) {
+        return await firstValueFrom(this.duplicate(id));
+    }
+    /**
+     * Uploads a file to the server
      * @param file The file to upload
-     * @param path A relative path to the action
+     * @param path Optional relative path to the upload action (default: 'upload')
+     * @param extraData Optional extra form data to include
+     * @returns Observable of HttpEvent for upload progress tracking
      */
     upload(file, path = 'upload', extraData) {
         /* Creates form data object */
@@ -14440,11 +14951,21 @@ class GenericService {
         return this.http.request(req);
     }
     ;
+    /**
+     * Asynchronously uploads a file to the server
+     * @param file The file to upload
+     * @param path Optional relative path to the upload action (default: 'upload')
+     * @param extraData Optional extra form data to include
+     * @returns Promise resolving to the upload result
+     */
+    async uploadAsync(file, path = 'upload', extraData) {
+        return await firstValueFrom(this.upload(file, path, extraData));
+    }
     ///#region Helpers
     /**
-     * Convert Object to FromData
-     *
-     * @param body
+     * Converts an object to FormData
+     * @param body The object to convert
+     * @returns FormData instance
      */
     toFormData(body) {
         if (!body) {
@@ -14455,9 +14976,9 @@ class GenericService {
             .reduce((p, key) => { p.append(key, body[key]); return p; }, new FormData());
     }
     /**
-     * Convert Object to HttpHeaders
-     *
-     * @param body
+     * Converts an object to HttpHeaders
+     * @param body The object to convert
+     * @returns HttpHeaders instance
      */
     toHttpHeaders(body) {
         if (!body) {
@@ -14468,8 +14989,39 @@ class GenericService {
             .reduce((p, key) => p.set(key, body[key]), new HttpHeaders());
     }
     /**
-     * Gets file name from Httpheaders: Content-Disposition
-     * @param disposition
+     * Normalizes the 'projection' parameter in query parameters
+     * @param params The query parameters (HttpParams or object)
+     * @returns Normalized query parameters with 'projection' formatted
+     */
+    normalizeProjectionParam(params) {
+        /* If params is null or undefined, return it as is */
+        if (!params) {
+            return params;
+        }
+        /* If params is an instance of HttpParams, extract and normalize the 'projection' parameter */
+        if (params instanceof HttpParams) {
+            const projection = params.get('projection');
+            if (!projection) {
+                return params;
+            }
+            /* If projection is present, normalize it and return a new HttpParams instance with the updated projection */
+            return params.set('projection', parseProjectionString(projection));
+        }
+        /* If params is a plain object, normalize the 'projection' property */
+        const typedParams = params;
+        if (typedParams['projection'] == null || typedParams['projection'] === '') {
+            return params;
+        }
+        /* Normalize the 'projection' property and return a new object with the updated projection */
+        return {
+            ...typedParams,
+            projection: parseProjectionString(typedParams['projection'])
+        };
+    }
+    /**
+     * Extracts file name from Content-Disposition header
+     * @param headers HttpHeaders containing Content-Disposition
+     * @returns The extracted file name or empty string
      */
     getFileNameFromHeaders(headers) {
         /* Extract the Content-Disposition header from the HTTP headers */
@@ -14490,12 +15042,9 @@ class GenericService {
     }
     /**
      * Handles an HTTP operation that failed.
-     * Allows the application to continue by throwing a parsed error.
-     *
-     * @template T The type of the observable result.
-     * @param operation The name of the operation that failed. Defaults to 'operation'.
-     * @param result An optional value to return as the observable result.
-     * @returns A function that processes the error and returns an observable.
+     * Throws a parsed error for the application to handle.
+     * @param operation The name of the operation that failed (for logging)
+     * @returns A function that processes the error and returns an observable
      */
     handleError(operation = 'operation') {
         return (error) => throwError(() => {
@@ -14507,10 +15056,10 @@ class GenericService {
         });
     }
     /**
-     * Return distinct message for sent, upload progress, & response events
-     *
-     * @param event The response event
-     * @param file The file beeing uploaded
+     * Returns a distinct message for upload events
+     * @param event The HttpEvent from the upload
+     * @param file The file being uploaded
+     * @returns A user-friendly status message
      */
     getEventMessage(event, file) {
         switch (event.type) {
@@ -14529,9 +15078,8 @@ class GenericService {
         }
     }
     /**
-     * Shows upload progress.
-     *
-     * @param message
+     * Logs upload progress messages to the console
+     * @param message The message to log
      */
     showProgress(message) {
         console.debug(message);
@@ -14621,6 +15169,7 @@ class EnumService {
             return {
                 id: key,
                 name: metadata?.display ?? enumObj[key],
+                hint: metadata?.hint,
                 icon: metadata?.icon,
                 textColor: metadata?.textColor,
                 disabled: metadata?.disabled || metadata?.disable?.(context) || false,
@@ -15395,7 +15944,15 @@ class AbstractSelectFormField extends AbstractMatFormField {
      * @type {boolean}
      */
     get multiple() { return this._multiple; }
-    set multiple(multi) { this._multiple = coerceBooleanProperty(multi); this.stateChanges.next(); }
+    set multiple(multi) {
+        /* Update the control type based on the multiple value */
+        if (multi) {
+            this.controlType = `${this.controlType}${multi ? '-multiple' : ''}`;
+        }
+        /* Update the multiple value and trigger state change */
+        this._multiple = coerceBooleanProperty(multi);
+        this.stateChanges.next();
+    }
     /**
      * @property sorted
      * @description Whether the options should be sorted.
@@ -15836,22 +16393,6 @@ class VdSelectComponent extends AbstractSelectFormField {
         this._triggerCssClass = triggerCssClass;
         this.stateChanges.next();
     }
-    /**
-     * Mode of the trigger.
-     */
-    get triggerMode() { return this._triggerMode; }
-    set triggerMode(triggerMode) {
-        /* Update the trigger mode value */
-        this._triggerMode = triggerMode;
-        /* Update the CSS class based on the trigger mode */
-        this.triggerCssClass = triggerMode;
-        /* If trigger mode is defined, append it to the control type */
-        if (triggerMode) {
-            this.controlType = `${this.controlType}-${triggerMode}`;
-        }
-        /* Notify that the state has changed */
-        this.stateChanges.next();
-    }
     /**
      * Gets the display values of the selected options for the trigger.
      *
@@ -15948,13 +16489,13 @@ class VdSelectComponent extends AbstractSelectFormField {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdSelectComponent, isStandalone: true, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdSelectComponent, isStandalone: true, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass" }, providers: [
             { provide: MatFormFieldControl, useExisting: VdSelectComponent },
             {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\n                        <!-- #region Option icon -->\n                        @if (option.icon?.matIcon) {\n                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                        }\n                        @if (option.icon?.svgIcon) {\n                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                    }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Default option -->\n            @if (!multiple && defaultOption) {\n                <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\n                                        <!-- #region Option icon -->\n                                        @if (option.icon?.matIcon) {\n                                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                                        }\n                                        @if (option.icon?.svgIcon) {\n                                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!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: 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: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        @if (optionTemplate && optionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    } @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if(!this.multiple) {\n                                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                                <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                                <span>&nbsp;&nbsp;</span>\n                                            }\n                                            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                        }\n\n                                        @else if(currentValue[i]){\n                                            <mat-chip>\n                                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                                    <span matChipAvatar>\n                                                        <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                                    </span>\n                                                }\n                                                <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                            </mat-chip>\n                                        }\n                                    </span>\n                                    @if (!last) {\n                                        <span>&nbsp;&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                    }\n                    @if (triggerTemplate && triggerTemplate.templateRef) {\n                        <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <span>&nbsp;&nbsp;</span>\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        </span>\n                    }\n                    @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                        <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <span>&nbsp;&nbsp;</span>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                </div>\n                @if (onLaunch.observed) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n        }\n        @if (!currentValue) {\n            <div>&nbsp;</div>\n        }\n    </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.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: "directive", type: i5.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -15964,6 +16505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatInputModule,
                         MatIconModule,
                         MatChipsModule,
+                        MatTooltip,
                         FormsModule
                     ], providers: [
                         { provide: MatFormFieldControl, useExisting: VdSelectComponent },
@@ -15971,7 +16513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: MAT_SELECT_CONFIG,
                             useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
                         }
-                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\n                        <!-- #region Option icon -->\n                        @if (option.icon?.matIcon) {\n                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                        }\n                        @if (option.icon?.svgIcon) {\n                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                    }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Default option -->\n            @if (!multiple && defaultOption) {\n                <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\n                                        <!-- #region Option icon -->\n                                        @if (option.icon?.matIcon) {\n                                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                                        }\n                                        @if (option.icon?.svgIcon) {\n                                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"] }]
+                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Selection template -->\n    <ng-template #selectionTemplate let-label=\"label\">\n        <span i18n=\"@@selection\">{ label, select, option {option} other { {{ label }} } }</span>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option template -->\n    <ng-template #optionTextTemplate let-option=\"option\">\n        <span layout=\"column\" class=\"option-text\" [ngClass]=\"{'option-has-hint': option.hint?.length > 0}\">\n            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n            <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n        </span>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option icon template -->\n    <ng-template #optionIconTemplate let-option=\"option\" let-isAvatar=\"isAvatar\">\n        <!-- #region Property icon -->\n        @if (matIconKey && !svgIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n        }\n        @if (svgIconKey && !matIconKey) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option icon -->\n        @if (option.icon?.matIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n        }\n        @if (option.icon?.svgIcon) {\n            <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Dynamic icon -->\n        @if (optionIcon; as optionIcon) {\n            <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                    <mat-icon [class.mat-mdc-chip-avatar]=\"isAvatar\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n            </ng-template>\n        }\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Option icon template -->\n    <ng-template #optionIconChipAvatarTemplate let-option=\"option\">\n        <!-- #region Property icon -->\n        <span class=\"option-icon\" matChipAvatar>\n            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n        </span>\n        <!-- #endregion -->\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observed) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Custom trigger template -->\n    @if (!onLaunch.observed && triggerTemplate && triggerTemplate.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Option template as trigger -->\n    @if (!onLaunch.observed && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        @if (optionTemplate && optionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Trigger for icons -->\n    @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n        <mat-select-trigger>\n            <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    @if (multiple) {\n                        <mat-chip>\n                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                <span matChipAvatar>\n                                    <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                                </span>\n                            }\n                            <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        </mat-chip>\n                    } @else {\n                        <ng-template [ngTemplateOutlet]=\"optionIconChipAvatarTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                        <ng-template [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\n                    }\n\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                }\n            </span>\n        </mat-select-trigger>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Default option -->\n    @if (!multiple && defaultOption) {\n        <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Options -->\n    @for (option of filteredOptions; track option; let first = $first) {\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Text -->\n            <span layout=\"column\" layout-align=\"start center\" class=\"option-text\" [ngClass]=\"{'option-has-hint':option.hint?.length>0}\">\n                @if (!optionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: option[optionTextProperty] }\"></ng-template>\n                }\n                @if (optionTemplate && optionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                }\n                <!-- #endregion -->\n                <span class=\"mat-caption text-secondary option-hint\" [matTooltip]=\"option.hint\">{{option.hint}}</span>\n            </span>\n        </mat-option>\n    }\n    <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if(!this.multiple) {\n                                            @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                                <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                                                <span>&nbsp;&nbsp;</span>\n                                            }\n                                            <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[optionTextProperty] }\"></ng-template>\n                                        }\n\n                                        @else if(currentValue[i]){\n                                            <mat-chip>\n                                                @if(optionIcon || matIconKey || svgIconKey || option.icon) {\n                                                    <span matChipAvatar>\n                                                        <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue[i] }\"></ng-template>\n                                                    </span>\n                                                }\n                                                <ng-template [ngTemplateOutlet]=\"selectionTemplate\" [ngTemplateOutletContext]=\"{ label: currentValue[i][optionTextProperty] }\"></ng-template>\n                                            </mat-chip>\n                                        }\n                                    </span>\n                                    @if (!last) {\n                                        <span>&nbsp;&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                    }\n                    @if (triggerTemplate && triggerTemplate.templateRef) {\n                        <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <span>&nbsp;&nbsp;</span>\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        </span>\n                    }\n                    @if (optionTemplate && optionTemplate.templateRef && !triggerTemplate?.templateRef) {\n                        <span layout=\"row\" layout-align=\"start center\" class=\"option-trigger\">\n                            <ng-template [ngTemplateOutlet]=\"optionIconTemplate\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\n                            <span>&nbsp;&nbsp;</span>\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        </span>\n                    }\n                </div>\n                @if (onLaunch.observed) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n        }\n        @if (!currentValue) {\n            <div>&nbsp;</div>\n        }\n    </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-multiple .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important}.mat-mdc-select mat-select-trigger .option-text,.mat-mdc-select .mat-mdc-option .option-text{display:contents!important}.mat-mdc-select mat-select-trigger .option-text.option-has-hint,.mat-mdc-select .mat-mdc-option .option-text.option-has-hint{line-height:.92em}.mat-mdc-select mat-select-trigger .option-text .option-hint,.mat-mdc-select .mat-mdc-option .option-text .option-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .option-text,.mat-mdc-select:not(.mat-mdc-select-multiple) .mat-mdc-option .option-text{width:calc(100% - 36px)}.mat-mdc-select:not(.mat-mdc-select-multiple) mat-select-trigger .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -15986,8 +16528,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['filterInput', { static: false }]
             }], triggerCssClass: [{
                 type: Input
-            }], triggerMode: [{
-                type: Input
             }] } });
 
 /**
@@ -16201,14 +16741,14 @@ class TableDataSource extends DataSource {
             this.onSortChange.subscribe(() => { this.paginator.pageIndex = 0; });
         }
         return merge$1(...displayDataChanges)
-            .pipe(skip(1), switchMap(() => {
+            .pipe(skip(1), switchMap$1(() => {
             /* Flip flag to show that loading has begun */
             this.isLoading = true;
             /* Remove empty filters */
             Utils.cleanObject(this.fieldFilters);
             Utils.cleanObject(this.staticFieldFilters);
-            /* Load data and return it */
-            return this.service.getList(Utils.cleanObject(Object.assign({
+            /* Build parameters for the data query */
+            var params = Object.assign({
                 includes: this.includes,
                 projection: Array.isArray(this.projection) ? this.projection.join(',') : this.projection,
                 page: (this.paginator?.pageIndex ?? 0) + 1,
@@ -16216,7 +16756,9 @@ class TableDataSource extends DataSource {
                 search: this.filter.toLowerCase(),
                 sortBy: this.sort?.active,
                 sortOrder: this.sort?.direction
-            }, this.fieldFilters ?? {}, this.staticFieldFilters ?? {})), this.path ?? '', { 'CheckOut': 'Yes' });
+            }, this.fieldFilters ?? {}, this.staticFieldFilters ?? {});
+            /* Load data and return it */
+            return this.service.getList(Utils.cleanObject(params), this.path ?? '', { 'CheckOut': 'Yes' });
         }), map$1((result) => {
             /* Flip flag to show that loading has finished */
             this.isLoading = false;
@@ -16836,25 +17378,28 @@ class FilterInputComponent {
      * @param event
      */
     onKeyDown(event) {
-        let e = event;
         if (this.onlyNumber) {
-            if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
-                /* Allow: Ctrl+A */
-                (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+C */
-                (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+V */
-                (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: Ctrl+X */
-                (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
-                /* Allow: home, end, left, right */
-                (e.keyCode >= 35 && e.keyCode <= 39)) {
-                /* let it happen, don't do anything */
+            /* Allow navigation keys and control keys */
+            const allowedKeys = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+            /* Allow Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X */
+            if ((event.ctrlKey || event.metaKey) && ['a', 'c', 'v', 'x'].includes(event.key.toLowerCase())) {
                 return;
             }
-            /* Ensure that it is a number and stop the keypress */
-            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
-                e.preventDefault();
+            /* Allow Ctrl+Z, Ctrl+Y */
+            if ((event.ctrlKey || event.metaKey) && ['z', 'y'].includes(event.key.toLowerCase())) {
+                return;
+            }
+            /* Allow control keys */
+            if (event.ctrlKey || event.metaKey) {
+                return;
+            }
+            /* Allow navigation keys */
+            if (allowedKeys.includes(event.key)) {
+                return;
+            }
+            /* Block non-numeric characters */
+            if (event.key < '0' || event.key > '9') {
+                event.preventDefault();
             }
         }
     }
@@ -17956,9 +18501,9 @@ class VdDynamicTableComponent {
         this.changeDetector.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: MatChipsModule }, { 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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: MatChipsModule }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
                 //----------------------
-                DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: 
+                DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
                 MapPipe, name: "map" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: PropertyPipe, name: "property" }], animations: [
             trigger('detailExpand', [
@@ -18010,7 +18555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             state('expanded', style({ height: AUTO_STYLE })),
                             transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                         ]),
-                    ], template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
+                    ], template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [matTooltip]=\"column.filterTooltip ? column.filterTooltip(context):null\" [matTooltipClass]=\"column.filterTooltipClass??''\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']
@@ -18380,7 +18925,7 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
         this.genericList?.updateColumns();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RxFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Close button -->\r\n    <button mat-icon-button (click)=\"dialogRef.close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<vd-dialog-header [dialogRef]=\"dialogRef\" i18n=\"@@tableConfiguration\">Table configuration</vd-dialog-header>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.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: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.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: 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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: VdDialogHeaderComponent, selector: "vd-dialog-header", inputs: ["dialogRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
             type: Component,
@@ -18393,8 +18938,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatDialogModule,
                         MatPaginatorModule,
                         MatButtonModule,
-                        VdDynamicTableComponent
-                    ], template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Close button -->\r\n    <button mat-icon-button (click)=\"dialogRef.close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"] }]
+                        VdDynamicTableComponent,
+                        VdDialogHeaderComponent
+                    ], template: "<!-- Title bar with close button -->\r\n<vd-dialog-header [dialogRef]=\"dialogRef\" i18n=\"@@tableConfiguration\">Table configuration</vd-dialog-header>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container vd-dynamic-table{max-height:100%!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -20379,9 +20925,13 @@ class GenericFormBaseComponent extends BaseComponent {
                     : $localize `:@@snackbar.error.required-fields:All fields marked with an asterisk (*) are required.`;
                 /* Show a notice */
                 this.snackBarService.open(message, 'Ok', { duration: 3000, panelClass: ['error'] });
+                /* Call the onAfterFormInvalid hook with the collected errors */
+                this.onAfterFormInvalid(errors);
             })();
             return false;
         }
+        /* Call the onAfterFormValid hook if the form is valid */
+        this.onAfterFormValid();
         return true;
     }
     /**
@@ -20427,46 +20977,6 @@ class GenericFormBaseComponent extends BaseComponent {
             });
         }
     }
-    /**
-     * Checks if the form is valid.
-     * This method validates the form, marks invalid controls, and shows error messages if any.
-     * @param form The form to check for validity.
-     * @returns A boolean indicating whether the form is valid.
-     */
-    isFormValidOld(form) {
-        /* Print some debug information */
-        this.debugForm(form);
-        /* If the form is not valid */
-        if (form && !form.valid) {
-            /* Mark invalid controls as dirty and touched */
-            Object.keys(form.controls)
-                .filter(x => !form.controls[x].valid)
-                .forEach(key => this.invalidateControl(form.controls[key]));
-            /* Show error messages */
-            (async () => {
-                /* Wait until 'mat-error' is displayed */
-                await new Promise(y => setTimeout(y, 200));
-                /* Parse the error messages */
-                var errors = Array();
-                Object.keys(form.controls)
-                    .filter(x => !form.controls[x].valid)
-                    .forEach(key => {
-                    /* Get error text */
-                    var error = this.getElementError(form.controls[key]?.nativeElement);
-                    if (error) {
-                        errors.push(error);
-                    }
-                });
-                /* Build error message */
-                var message = errors.length ? errors.slice(0, 3).join('\n') : $localize `:@@snackbar.error.required-fields:All fields marked with an asterisk (*) are required.`;
-                /* Show a notice */
-                this.snackBarService.open(message, 'Ok', { duration: 3000, panelClass: ['error'] });
-                return false;
-            })();
-            return false;
-        }
-        return true;
-    }
     /**
      * Resets form controls.
      * This method marks all controls in the form as pristine, untouched, and updates their validity.
@@ -20546,24 +21056,6 @@ class GenericFormBaseComponent extends BaseComponent {
             }
         }
     }
-    // /**
-    //  * Shows form errors.
-    //  * This method logs form control errors to the console if debugging is enabled.
-    //  * @param form The form to debug.
-    //  */
-    // protected debugForm(form?: NgForm | FormGroup | FormArray): void {
-    //     if (form && this.debug) {
-    //         console.log('Form:', form);
-    //         Object.keys(form.controls).forEach(key => {
-    //             const controlErrors: ValidationErrors | null = form.controls[key].errors;
-    //             if (controlErrors != null) {
-    //                 Object.keys(controlErrors).forEach(keyError => {
-    //                     console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
-    //                 });
-    //             }
-    //         });
-    //     }
-    // }
     /**
      * Adds toolbar menu items.
      * This method adds the 'Delete' menu item to the toolbar if the entity is deletable.
@@ -20755,6 +21247,17 @@ class GenericFormBaseComponent extends BaseComponent {
             });
         }
     }
+    /**
+     * Event emitted when the form is invalid.
+     * This method allows performing operations when the form is found to be invalid.
+     * @param errors The validation errors found in the form.
+     */
+    onAfterFormInvalid(errors) { }
+    /**
+     * Event emitted when the form is valid.
+     * This method allows performing operations when the form is found to be valid.
+     */
+    onAfterFormValid() { }
     /**
      * Event emitted when the entity has been created.
      */
@@ -21504,7 +22007,7 @@ class VdChipsComponent extends AbstractMatFormField {
     /**
      * Current active sort column.
      */
-    sortActive;
+    sortActive = 'id';
     /**
      * Current direction of sorting.
      */
@@ -21836,6 +22339,10 @@ class VdChipsComponent extends AbstractMatFormField {
             this.dataSourceSubscription?.unsubscribe();
             this.dataSourceSubscription = this.dataSource?.connect().subscribe();
         }
+        /* Reload the data source if it is already connected */
+        else if (this.dataSource?.isConnected) {
+            this.dataSource?.reload();
+        }
         /* Trigger change detection */
         this.changeDetectorRef.detectChanges();
     }
@@ -22061,7 +22568,7 @@ class VdChipsComponent extends AbstractMatFormField {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
             }
-        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { 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: "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: "directive", type: i5$1.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
+        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
@@ -22081,7 +22588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatIconModule,
                         MatInputModule,
                         VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"] }]
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate && chipTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate && autocompleteOptionTemplate.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" [sticky]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total ?? 0\" [pageIndex]=\"dataSource?.pageIndex ?? 0\" [pageSize]=\"dataSource?.pageSize ?? 15\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mat-mdc-notch-piece,::ng-deep .mat-mdc-table .mat-mdc-form-field .mdc-text-field--outlined .mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline))!important;border-width:var(--mat-form-field-outlined-outline-width, 1px)!important}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: false }]
@@ -22594,6 +23101,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     args: [MAT_DATE_FORMATS]
                 }] }, { type: i0.ChangeDetectorRef }] });
 
+/**
+ * @component EditFormActionsComponent
+ * @description
+ * Reusable action row for edit forms.
+ * Uses the provided form context to derive button states and trigger
+ * standard form actions (save, apply, cancel/back).
+ */
+class MsaEditFormActionsComponent {
+    /**
+     * Reference to the generic form context used by this action row.
+     * @type {IGenericFormBaseComponent<any>}
+     */
+    context;
+    /**
+     * Determines if the save action is disabled.
+     * Save is disabled while saving is in progress or when form is readonly.
+     * @type {boolean}
+     */
+    get isSaveDisabled() {
+        return !!(this.context.isSaving || this.context.readonly);
+    }
+    /**
+     * Determines whether the apply button should be displayed.
+     * Apply is only visible when the form is in edit mode.
+     * @type {boolean}
+     */
+    get isApplyVisible() {
+        return !!this.context.isEditMode;
+    }
+    /**
+     * Determines if the apply action is disabled.
+     * Apply is disabled while saving is in progress or when form is readonly.
+     * @type {boolean}
+     */
+    get isApplyDisabled() {
+        return !!(this.context.isSaving || this.context.readonly);
+    }
+    /**
+     * Determines if the cancel action is disabled.
+     * Cancel remains enabled by default.
+     * @type {boolean}
+     */
+    get isCancelDisabled() {
+        return false;
+    }
+    /**
+     * Triggers the context save action.
+     */
+    onSave() {
+        this.context.save();
+    }
+    /**
+     * Triggers the context apply action.
+     */
+    onApply() {
+        this.context.apply();
+    }
+    /**
+     * Triggers the context back action.
+     */
+    onCancel() {
+        this.context.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MsaEditFormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MsaEditFormActionsComponent, isStandalone: true, selector: "[msa-edit-form-actions]", inputs: { context: "context" }, ngImport: i0, template: "<button type=\"button\" mat-flat-button color=\"primary\" [disabled]=\"isSaveDisabled\" (click)=\"onSave()\" i18n=\"@@save\">Save</button>\r\n@if (isApplyVisible) {\r\n    <button type=\"button\" mat-button [disabled]=\"isApplyDisabled\" (click)=\"onApply()\" i18n=\"@@apply\">Apply</button>\r\n}\r\n<button type=\"button\" mat-button [disabled]=\"isCancelDisabled\" (click)=\"onCancel()\" i18n=\"@@cancel\">Cancel</button>\r\n<span class=\"spacer\"></span>", styles: [".spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MsaEditFormActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[msa-edit-form-actions]', imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatExpansionModule
+                    ], template: "<button type=\"button\" mat-flat-button color=\"primary\" [disabled]=\"isSaveDisabled\" (click)=\"onSave()\" i18n=\"@@save\">Save</button>\r\n@if (isApplyVisible) {\r\n    <button type=\"button\" mat-button [disabled]=\"isApplyDisabled\" (click)=\"onApply()\" i18n=\"@@apply\">Apply</button>\r\n}\r\n<button type=\"button\" mat-button [disabled]=\"isCancelDisabled\" (click)=\"onCancel()\" i18n=\"@@cancel\">Cancel</button>\r\n<span class=\"spacer\"></span>", styles: [".spacer{flex:1 1 auto}\n"] }]
+        }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
 /**
  * VdListOptionDirective class
  */
@@ -23422,6 +24006,13 @@ class VdGenericFormComponent {
      * @type {boolean}
      */
     readonly;
+    /**
+     * @property onInit
+     * @description Emitted after fields are built and filtered, allowing parent components to mutate `formGroup`,
+     * `fieldRows`, or `fields` before dynamic subscriptions are attached.
+     * @type {EventEmitter<VdGenericFormInitEvent>}
+     */
+    onInit = new EventEmitter();
     /**
      * @property Key codes used for separating input values.
      * @description The `separatorKeysCodes` is an array of key codes (e.g., for comma or enter) used for
@@ -23542,8 +24133,15 @@ class VdGenericFormComponent {
         if (fields) {
             this.fields = fields.map(a => ({ ...a }));
         }
+        /* Allow parent components to adjust form controls and field metadata before subscriptions are created. */
+        this.onInit.emit({
+            formGroup: this.formGroup,
+            fieldRows: this.fieldRows,
+            fields: this.fields,
+            context: this.context
+        });
         /* Subscribe to value change events for fields with custom 'change' handlers */
-        fields
+        this.fields
             ?.filter(y => y.type != FormFieldType.File && y.change)
             ?.forEach(x => {
             this.formGroup
@@ -23582,7 +24180,7 @@ class VdGenericFormComponent {
             }
         };
         /* Update dynamic properties for each field and subscribe to form value changes */
-        fields?.forEach(x => {
+        this.fields?.forEach(x => {
             const orgField = this.fields?.find(y => y.name == x.name);
             if (orgField) {
                 updateFormField(orgField, x);
@@ -23778,11 +24376,11 @@ 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\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: 
+    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" }, outputs: { onInit: "init" }, 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                                               [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                                               (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                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of (field?.options | func:formValue:formGroup:context) ?? []; track option.id) {\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  && 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  && 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  && 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: "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: 
+                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.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.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5.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$1.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: 
+                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"] }, { 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: 
                 //--------------------
@@ -23827,7 +24425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         RemoveWhitespaceDirective,
                         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"] }]
+                    ], 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                                               [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                                               (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                                                (selectionChange)=\"field.itemSelect && field.itemSelect($event.value, formValue, formGroup, context);\"\n                                                flex>\n                                        @for (option of (field?.options | func:formValue:formGroup:context) ?? []; track option.id) {\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  && 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  && 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  && 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: [{
@@ -23846,6 +24444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
+            }], onInit: [{
+                type: Output,
+                args: ['init']
             }], separatorKeysCodes: [{
                 type: Input
             }], editorTemplate: [{
@@ -24634,6 +25235,7 @@ class FormFieldDefinition {
     triggerMapper;
     /**
      * Mode of the trigger (e.g., chip).
+     * @deprecated This property is no longer used and will be removed in a future version.
      */
     triggerMode;
     /**
@@ -25283,6 +25885,12 @@ class VdMenuComponent {
      */
     ngOnInit() {
         this.media.registerQuery(`gt-sm`).subscribe((x) => { this.mobile = !x; });
+        // if (this.items.length > 0) {
+        //     var testMenuItem = this.items.find((x: MenuItem) => x.id === 9);
+        //     if (testMenuItem) {
+        //         this.itemMouseEnter({ type: 'mouseenter' }, testMenuItem);
+        //     }
+        // }
     }
     /**
      * Event emitted when a meni item is clicked.
@@ -25310,10 +25918,10 @@ class VdMenuComponent {
      * Event emitted when the cursor of the mouse is moved out of it.
      */
     itemMouseLeave($event, item) {
-        this.onMouseLeave.emit({ event: $event, item: item });
+        // this.onMouseLeave.emit({ event: $event, item: item });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\"\r\n                                                  [style.color]=\"subItem.iconColor\"\r\n                                                  [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n                                                  [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n                                                  aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                </a>\r\n                            }\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                        }\r\n                    </mat-nav-list>\r\n                </mat-expansion-panel>\r\n            } @else {\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                      [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                    </a>\r\n                }\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n            }\r\n        }\r\n    </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta\r\n                                              [matBadge]=\"subItem.badge()\"\r\n                                              matBadgeOverlap=\"false\"\r\n                                              matBadgePosition=\"above before\"\r\n                                              class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta\r\n                                  [matBadge]=\"item.badge()\"\r\n                                  matBadgeOverlap=\"false\"\r\n                                  matBadgePosition=\"above before\"\r\n                                  class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$2.MatListItemMeta, selector: "[matListItemMeta]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
@@ -25327,7 +25935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         MatBadgeModule,
                         VdDelayedHoverDirective,
                         FuncPipe
-                    ], template: "<mat-nav-list>\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\"\r\n                                                  [style.color]=\"subItem.iconColor\"\r\n                                                  [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n                                                  [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n                                                  aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                </a>\r\n                            }\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                        }\r\n                    </mat-nav-list>\r\n                </mat-expansion-panel>\r\n            } @else {\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                      [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                    </a>\r\n                }\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n            }\r\n        }\r\n    </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"] }]
+                    ], template: "<mat-nav-list>\r\n    <!-- #region main-menu-accordion -->\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            <!-- #region mobile-item-with-submenu -->\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <!-- #region mobile-parent-item-header -->\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            <!-- #region parent-item-icon-and-title -->\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region mobile-submenu-items -->\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            <!-- #region visible-submenu-link -->\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    <!-- #region submenu-icon-and-text -->\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\" aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n\r\n                                    @if (subItem.badge && subItem.badge() !== 0) {\r\n                                        <span matListItemMeta\r\n                                              [matBadge]=\"subItem.badge()\"\r\n                                              matBadgeOverlap=\"false\"\r\n                                              matBadgePosition=\"above before\"\r\n                                              class=\"menu-badge-align\">\r\n                                        </span>\r\n                                    }\r\n                                    <!-- #endregion -->\r\n                                </a>\r\n                            }\r\n                            <!-- #endregion -->\r\n\r\n                            <!-- #region submenu-divider-lines -->\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                            <!-- #endregion -->\r\n                        }\r\n                    </mat-nav-list>\r\n                    <!-- #endregion -->\r\n                </mat-expansion-panel>\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-menu-item -->\r\n            } @else {\r\n                <!-- #region regular-item-link -->\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n\r\n                        @if (item.badge && item.badge() !== 0) {\r\n                            <span matListItemMeta\r\n                                  [matBadge]=\"item.badge()\"\r\n                                  matBadgeOverlap=\"false\"\r\n                                  matBadgePosition=\"above before\"\r\n                                  class=\"menu-badge-align\">\r\n                            </span>\r\n                        }\r\n                    </a>\r\n                }\r\n                <!-- #endregion -->\r\n\r\n                <!-- #region regular-item-divider-lines -->\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n                <!-- #endregion -->\r\n            }\r\n            <!-- #endregion -->\r\n        }\r\n    </mat-accordion>\r\n    <!-- #endregion -->\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}:host ::ng-deep .menu-badge-align{padding-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
@@ -25815,7 +26423,6 @@ __decorate([
             };
         },
         multiple: true,
-        triggerMode: 'chip',
         hide: (_, __, ctx) => !ctx.isAdmin || (!ctx.settings?.multitenantable && !ctx.settings?.multiClients),
         compareWith: (o, v) => o.clientId === v.clientId,
         mapper: (x) => x.map(y => new MenuItemClient({ clientId: y.id, clientName: y.displayName })),
@@ -25848,7 +26455,6 @@ __decorate([
             };
         },
         multiple: true,
-        triggerMode: 'chip',
         hide: (_, __, ctx) => (!ctx.isAdmin && !ctx.isClientAdmin) || (!ctx.settings?.multitenantable && !ctx.settings?.multiDepartments),
         compareWith: (o, v) => o.departmentId === v.departmentId,
         mapper: (x) => x.map(y => new MenuItemDepartment({ departmentId: y.id, departmentName: y.displayName })),
@@ -28302,5 +28908,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, 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 };
+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, MsaEditFormActionsComponent, MsaEnumDisplayComponent, 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, VdDialogHeaderActionsComponent, VdDialogHeaderComponent, VdDialogMaximizeDirective, 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, graphql, 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, parseProjectionString, 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