@messaia/cdk 18.0.0-rc15 → 18.0.0-rc17

package/fesm2022/messaia-cdk.mjs

@@ -5,7 +5,7 @@ import { CommonModule, Location, getLocaleNumberSymbol, NumberSymbol, DecimalPip
 import * as i1$6 from '@angular/common/http';
 import { HttpParams, HttpClient, HttpRequest, HttpHeaders, HttpEventType, provideHttpClient, withInterceptorsFromDi, HttpResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Directive, Input, Pipe, HostListener, Component, NgModule, Injectable, Injector, ViewEncapsulation, COMPILER_OPTIONS, CompilerFactory, Compiler, EventEmitter, Output, ViewChild, Optional, SkipSelf, NgZone, forwardRef, Inject, SecurityContext, ContentChildren, HostBinding, Self, ContentChild, TemplateRef, ViewContainerRef, ViewChildren, ElementRef, LOCALE_ID, ChangeDetectionStrategy, SimpleChange, Attribute } from '@angular/core';
+import { Directive, Input, Pipe, HostListener, EventEmitter, Injectable, Component, NgModule, Injector, ViewEncapsulation, COMPILER_OPTIONS, CompilerFactory, Compiler, Output, ViewChild, Optional, SkipSelf, NgZone, forwardRef, Inject, SecurityContext, ContentChildren, HostBinding, Self, ContentChild, TemplateRef, ViewContainerRef, ViewChildren, ElementRef, LOCALE_ID, ChangeDetectionStrategy, SimpleChange, Attribute } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControlName, FormControlDirective, FormArray, FormGroup, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, AbstractControl, FormBuilder, Validators } from '@angular/forms';
 import * as i5$1 from '@angular/material/button';
@@ -45,10 +45,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
 import * as i1$1 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
-import { Subject, BehaviorSubject, of, map as map$1, fromEvent, distinctUntilChanged, debounceTime, merge as merge$1, tap, Observable, filter, takeUntil } from 'rxjs';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { __decorate, __metadata } from 'tslib';
 import 'reflect-metadata';
+import { Subject, filter, BehaviorSubject, of, map as map$1, fromEvent, distinctUntilChanged, debounceTime, merge as merge$1, tap, Observable, takeUntil } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { catchError, map, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, skip, switchMap, tap as tap$1, finalize } from 'rxjs/operators';
 import * as i3$2 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -1056,370 +1056,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
             args: [{ name: 'values', pure: false }]
         }] });
 
-const noop$1 = () => {
-    // empty method
-};
-/** Mixin to augment a component with ngModel support. */
-function mixinControlValueAccessor(base, initialValue) {
-    return class extends base {
-        _value = initialValue instanceof Array ? Object.assign([], initialValue) : initialValue;
-        _subjectValueChanges;
-        valueChanges;
-        constructor(...args) {
-            super(...args);
-            this._subjectValueChanges = new Subject();
-            this.valueChanges = this._subjectValueChanges.asObservable();
-        }
-        set value(v) {
-            if (v !== this._value) {
-                this._value = v;
-                this.onChange(v);
-                this._changeDetectorRef.markForCheck();
-                this._subjectValueChanges.next(v);
-            }
-        }
-        get value() {
-            return this._value;
-        }
-        writeValue(value) {
-            this.value = value;
-            this._changeDetectorRef.markForCheck();
-        }
-        registerOnChange(fn) {
-            this.onChange = fn;
-        }
-        registerOnTouched(fn) {
-            this.onTouched = fn;
-        }
-        onChange = (_) => noop$1;
-        onTouched = () => noop$1;
-    };
-}
-
-/** Mixin to augment a component or directive with a `disabled` property. */
-function mixinDisabled(base) {
-    return class extends base {
-        _disabled = false;
-        constructor(...args) {
-            super(...args);
-        }
-        get disabled() {
-            return this._disabled;
-        }
-        set disabled(value) {
-            let newValue = coerceBooleanProperty(value);
-            if (this._disabled !== newValue) {
-                this._disabled = newValue;
-                this.onDisabledChange(this._disabled);
-            }
-        }
-        onDisabledChange(v) {
-            /** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */
-        }
-    };
-}
-
-const headerMetadataKey = 'customer:vdHeader';
-const endpointMetadataKey = 'customer:vdEndpoint';
-
-var Salutation;
-(function (Salutation) {
-    Salutation[Salutation["Unknown"] = 0] = "Unknown";
-    Salutation[Salutation["Female"] = 1] = "Female";
-    Salutation[Salutation["Male"] = 2] = "Male";
-})(Salutation || (Salutation = {}));
-
-/**
- * Property decorator to add display name to a property
- * @param name
- * @returns
- */
-function Display(name) {
-    return function (target, propertyKey) {
-        Reflect.defineMetadata(headerMetadataKey, name, target, propertyKey);
-    };
-}
-/**
- * Class decorator to add endpoint to an entity
- * @param endpoint
- * @returns
- */
-function Api(endpoint) {
-    return function (target) {
-        Reflect.defineMetadata(endpointMetadataKey, endpoint, target);
-    };
-}
-
-/**
- * Gets the endpoint metadata from a class decorated with @Api.
- *
- * @param origin - The class from which to retrieve the endpoint metadata.
- * @returns The endpoint as a string.
- */
-function getEndpoint(origin) {
-    /* Retrieve and return the endpoint metadata associated with the given class */
-    return Reflect.getMetadata(endpointMetadataKey, origin);
-}
-/**
- * Gets the display header metadata from a class.
- *
- * @param origin - The class from which to retrieve the header metadata.
- * @returns The display header as a string.
- */
-function getDisplay(origin) {
-    /* Retrieve and return the display header metadata associated with the given class */
-    return Reflect.getMetadata(headerMetadataKey, origin);
-}
-
-//@dynamic
-class AppStorage {
+class VdDelayedHoverDirective {
     /**
-     * Gets storage key
-     * @param key
+     * @property
      */
-    static getKey = (key) => `${key}`;
+    duration = 500;
     /**
-     * Sets a string from localStorage
-     * @param key The key of the item to store
-     * @param value The value to store
-     */
-    static setString = (key, value) => localStorage.setItem(AppStorage.getKey(key), value);
+    * @property
+    */
+    delayedhoverEvents = new EventEmitter();
     /**
-     * Gets a string from localStorage
-     * @param key The key of the item
+    * @field
+    */
+    elementRef;
+    /**
+     * @field
      */
-    static getString = (key) => localStorage.getItem(AppStorage.getKey(key));
+    renderer;
     /**
-     * Sets an object from localStorage
-     * @param key The key of the item to store
-     * @param value The value to store
+     * @field
      */
-    static setObject = (key, value) => {
-        try {
-            AppStorage.setString(key, JSON.stringify(value));
-        }
-        catch (error) {
-            console.warn(error);
-        }
-    };
+    unlisteners = null;
     /**
-     * Sets an object from localStorage
-     * @param key The key of the item to store
-     * @param value The value to store
+     * @field
      */
-    static setObjectEncoded = (key, value) => {
-        try {
-            AppStorage.setString(key, btoa(JSON.stringify(value)));
-        }
-        catch (error) {
-            console.warn(error);
-        }
-    };
+    timer = 0;
     /**
-     * Gets an object from localStorage
-     * @param key The key of the item
+     * @field
      */
-    static getObject = (key, defaultValue) => {
-        try {
-            return JSON.parse(AppStorage.getString(key) ?? '{}') || defaultValue;
-        }
-        catch (error) {
-            return defaultValue;
-        }
-    };
+    zone;
     /**
-     * Gets an object from localStorage
-     * @param key The key of the item
+     * Initialize the delayedhover directive.
+     * @param elementRef
+     * @param renderer
+     * @param zone
      */
-    static getObjectEncoded = (key, defaultValue) => {
-        try {
-            return JSON.parse(atob(AppStorage.getString(key) ?? '{}')) || defaultValue;
-        }
-        catch (error) {
-            return defaultValue;
-        }
-    };
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: AppStorage, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppStorage, decorators: [{
-            type: Directive
-        }] });
-
-class DynamicBuilder {
-    compiler;
+    constructor(elementRef, renderer, zone) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.zone = zone;
+    }
     /**
-     * Constructor
-     * @param componentFactoryResolver
+     * I Cancels any pending hesitation timer.
      */
-    constructor(compiler) {
-        this.compiler = compiler;
+    cancel() {
+        clearTimeout(this.timer);
     }
     /**
-     * Compiles the specified html
-     * @param viewContainerRef
-     * @param template
-     * @param data
+     * Gets called once when the host element is being unmounted.
      */
-    compileHtml(viewContainerRef, template, data) {
-        /* Create a dynamic component */
-        var component = Component({ template: template })(class {
-        });
-        /* Destroys all views in this container */
-        viewContainerRef.clear();
-        /* Compile the given NgModule and all of its components */
-        const module = this.compiler.compileModuleAndAllComponentsSync(NgModule({
-            declarations: [component],
-            exports: [component],
-            imports: [CommonModule]
-        })(class {
-        }));
-        /* Retrieve the factory object that creates a component of the given type */
-        const componentFactory = module.componentFactories.find((comp) => comp.componentType === component);
-        /* Instantiate a single component and inserts its host view into this container */
-        const componentRef = viewContainerRef.createComponent(componentFactory);
-        if (componentFactory) {
-            /* Add properties to the component */
-            Object.assign(componentRef.instance, data);
-            /* Check this view and its children */
-            componentRef.changeDetectorRef.detectChanges();
-            return componentRef;
+    ngOnDestroy() {
+        this.cancel();
+        /* If we have event-handler bindings, unbind them all */
+        if (this.unlisteners) {
+            for (var unlistener of this.unlisteners) {
+                unlistener();
+            }
         }
-        return null;
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Compiler }] });
-
-class DynamicComponentCompiler {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ActionItem {
-    /**
-     * @property
-     */
-    title;
-    /**
-     * @property
-     */
-    icon = 'radio_button_unchecked';
-    /**
-     * @property
-     */
-    iconFontSet = 'material-symbols-outlined';
-    /**
-     * @property
-     */
-    iconClass;
-    /**
-     * @property
-     */
-    event;
-    /**
-     * @property
-     */
-    hide;
-    /**
-     * @property
-     */
-    disable;
-    /**
-     * @property
-     */
-    items;
-    /**
-     * @property
-     */
-    index;
     /**
-     * constructor
-     * @param init
+     * Gets called once after the host element has been mounted and the inputs
+     * have been bound for the first time.
      */
-    constructor(init) {
-        Object.assign(this, init);
+    ngOnInit() {
+        /*
+        Instead of using host bindings, which would trigger change-detection digests
+        when the events are triggered, we want to drop-down out of the core NgZone so
+        that we can setup our event-handlers without adding processing overhead.
+        */
+        this.zone.runOutsideAngular(() => {
+            this.unlisteners = [
+                this.renderer.listen(this.elementRef.nativeElement, "mouseenter", this.handleMouseenter),
+                this.renderer.listen(this.elementRef.nativeElement, "mousedown", this.handleMousedown),
+                this.renderer.listen(this.elementRef.nativeElement, "mouseleave", this.handleMouseleave)
+            ];
+        });
     }
-}
-
-class AppSetting {
-    /**
-     * @property
-     */
-    production;
-    /**
-     * @property
-     */
-    debug;
-    /**
-     * @property
-     */
-    apiUrl;
-    /**
-     * @property
-     */
-    frontendUrl;
-    /**
-     * @property
-     */
-    projectName;
-    /**
-     * @property
-     */
-    copyright;
-    /**
-     * @property
-     */
-    authUrl;
-    /**
-     * @property
-     */
-    spaUrl;
     /**
-     * @property
+     * Handles the mousedown event inside the host element.
+     * @param event
      */
-    postLoginRoute;
+    handleMousedown = (event) => {
+        /*
+        If the user shows any mouse-activity (other than enter/leave) inside the host
+        element, we want to cancel the hesitation timer. Such mouse activity indicates
+        non-hesitation intent on behalf of the user.
+        */
+        this.cancel();
+    };
     /**
-     * @property
+     * Handles the mouseevent event inside the host element.
+     * @param event
      */
-    authClientId;
+    handleMouseenter = (event) => {
+        /*
+        When the user enters the host, start the hesitation timer. This timer will be
+        fulfilled if the user remains inside of the host without performing any other
+        meaningful actions.
+        */
+        this.timer = setTimeout(this.handleTimerThreshold, this.duration);
+    };
     /**
-     * @property
+     * Handles the mouseleave event inside the host element.
+     * @param event
      */
-    authResponseType;
+    handleMouseleave = (event) => {
+        this.cancel();
+    };
     /**
-     * @property
+     * Handles the timer threshold event.
      */
-    authScope;
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting });
+    handleTimerThreshold = () => {
+        /*
+        Once the hesitation timer threshold has been surpassed, we want to trigger an
+        output event. This time, however, we want to trigger Angular change-detection.
+        As such, we have set up into the Angular zone for the emission.
+        */
+        this.zone.runGuarded(() => { this.delayedhoverEvents.emit(); });
+    };
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdDelayedHoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: { duration: "duration" }, outputs: { delayedhoverEvents: "delayedHover" }, exportAs: ["hesitation"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdDelayedHoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[delayedHover]",
+                    inputs: ["duration"],
+                    outputs: ["delayedhoverEvents: delayedHover"],
+                    exportAs: "hesitation"
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }] });
 
-var Grid;
-(function (Grid) {
-    Grid[Grid["All"] = 0] = "All";
-    Grid[Grid["Xs"] = 1] = "Xs";
-    Grid[Grid["Sm"] = 2] = "Sm";
-    Grid[Grid["Md"] = 3] = "Md";
-    Grid[Grid["Lg"] = 4] = "Lg";
-    Grid[Grid["Xl"] = 5] = "Xl";
-    Grid[Grid["Xxl"] = 6] = "Xxl";
-    Grid[Grid["None"] = 7] = "None";
-})(Grid || (Grid = {}));
+var AppEventType;
+(function (AppEventType) {
+    AppEventType["ClickedOnNotification"] = "CLICKED_ON_NOTIFICATION";
+    AppEventType["SocketEvent"] = "SOCKET_EVENT";
+})(AppEventType || (AppEventType = {}));
 
-const tableDefinitionMetadataKey = 'custom:vdTableDefinition';
-const tableColumnsMetadataKey = 'custom:vdTableColumns';
+var Salutation;
+(function (Salutation) {
+    Salutation[Salutation["Unknown"] = 0] = "Unknown";
+    Salutation[Salutation["Female"] = 1] = "Female";
+    Salutation[Salutation["Male"] = 2] = "Male";
+})(Salutation || (Salutation = {}));
+
+class AppEvent {
+    type;
+    payload;
+    constructor(type, payload) {
+        this.type = type;
+        this.payload = payload;
+    }
+}
 
 var FilterOperator;
 (function (FilterOperator) {
@@ -1436,6 +1224,24 @@ var FilterOperator;
     FilterOperator["Contains"] = "~";
 })(FilterOperator || (FilterOperator = {}));
 
+var Grid;
+(function (Grid) {
+    Grid[Grid["All"] = 0] = "All";
+    Grid[Grid["Xs"] = 1] = "Xs";
+    Grid[Grid["Sm"] = 2] = "Sm";
+    Grid[Grid["Md"] = 3] = "Md";
+    Grid[Grid["Lg"] = 4] = "Lg";
+    Grid[Grid["Xl"] = 5] = "Xl";
+    Grid[Grid["Xxl"] = 6] = "Xxl";
+    Grid[Grid["None"] = 7] = "None";
+})(Grid || (Grid = {}));
+
+const headerMetadataKey = 'customer:vdHeader';
+const endpointMetadataKey = 'customer:vdEndpoint';
+
+const tableDefinitionMetadataKey = 'custom:vdTableDefinition';
+const tableColumnsMetadataKey = 'custom:vdTableColumns';
+
 var TableColumnType;
 (function (TableColumnType) {
     TableColumnType[TableColumnType["None"] = 0] = "None";
@@ -1906,6 +1712,627 @@ function ColumnObject(type) {
     };
 }
 
+/**
+ * Property decorator to add display name to a property
+ * @param name
+ * @returns
+ */
+function Display(name) {
+    return function (target, propertyKey) {
+        Reflect.defineMetadata(headerMetadataKey, name, target, propertyKey);
+    };
+}
+/**
+ * Class decorator to add endpoint to an entity
+ * @param endpoint
+ * @returns
+ */
+function Api(endpoint) {
+    return function (target) {
+        Reflect.defineMetadata(endpointMetadataKey, endpoint, target);
+    };
+}
+
+class DisplayNameNumberProjection {
+    /**
+     * @property
+     */
+    displayName;
+    /**
+     * @property
+     */
+    number;
+    /**
+     * @property
+     */
+    id;
+}
+__decorate([
+    Column({}),
+    Display($localize `:@@name:Name`),
+    __metadata("design:type", String)
+], DisplayNameNumberProjection.prototype, "displayName", void 0);
+__decorate([
+    Column({ index: 10, filterOperator: FilterOperator.Contains, maxWidth: 90, display: Grid.Md }),
+    Display($localize `:@@number:Number`),
+    __metadata("design:type", Number)
+], DisplayNameNumberProjection.prototype, "number", void 0);
+__decorate([
+    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Display($localize `:@@id:ID`),
+    __metadata("design:type", Number)
+], DisplayNameNumberProjection.prototype, "id", void 0);
+
+class DisplayNameProjection {
+    /**
+     * @property
+     */
+    displayName;
+    /**
+     * @property
+     */
+    id;
+}
+__decorate([
+    Column({}),
+    Display($localize `:@@name:Name`),
+    __metadata("design:type", String)
+], DisplayNameProjection.prototype, "displayName", void 0);
+__decorate([
+    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Display($localize `:@@id:ID`),
+    __metadata("design:type", Number)
+], DisplayNameProjection.prototype, "id", void 0);
+
+/**
+ * Metadata class for enum values, containing display information and ordering.
+ */
+class EnumMetadata {
+    /**
+     * Optional display string associated with the enum value.
+     */
+    display;
+    /**
+     * Optional order number used for sorting enum values.
+     */
+    order;
+}
+
+class NameNumberProjection {
+    /**
+     * @property
+     */
+    name;
+    /**
+     * @property
+     */
+    number;
+    /**
+     * @property
+     */
+    id;
+}
+__decorate([
+    Column({}),
+    Display($localize `:@@name:Name`),
+    __metadata("design:type", String)
+], NameNumberProjection.prototype, "name", void 0);
+__decorate([
+    Column({ index: 10, maxWidth: 90, display: Grid.Md }),
+    Display($localize `:@@number:Number`),
+    __metadata("design:type", Number)
+], NameNumberProjection.prototype, "number", void 0);
+__decorate([
+    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Display($localize `:@@id:ID`),
+    __metadata("design:type", Number)
+], NameNumberProjection.prototype, "id", void 0);
+
+class NameProjection {
+    /**
+     * @property
+     */
+    name;
+    /**
+     * @property
+     */
+    id;
+}
+__decorate([
+    Column({}),
+    Display($localize `:@@name:Name`),
+    __metadata("design:type", String)
+], NameProjection.prototype, "name", void 0);
+__decorate([
+    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Display($localize `:@@id:ID`),
+    __metadata("design:type", Number)
+], NameProjection.prototype, "id", void 0);
+
+class TitleProjection {
+    /**
+     * @property
+     */
+    title;
+    /**
+     * @property
+     */
+    id;
+}
+__decorate([
+    Column({}),
+    Display($localize `:@@title:Title`),
+    __metadata("design:type", String)
+], TitleProjection.prototype, "title", void 0);
+__decorate([
+    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
+    Display($localize `:@@id:ID`),
+    __metadata("design:type", Number)
+], TitleProjection.prototype, "id", void 0);
+
+/**
+ * A custom Angular pipe to bind a function with a given context and arguments.
+ */
+class BindPipe {
+    /**
+     * Transforms the function to be bound with the specified context and arguments.
+     *
+     * @param fn The function to be bound. If it's not a function, the pipe returns undefined.
+     * @param context The context (`this`) to bind to the function.
+     * @param args Additional arguments to be pre-applied to the function.
+     * @returns A new function bound to the specified context with the provided arguments, or undefined if `fn` is not a function.
+     */
+    transform(fn, context, ...args) {
+        /* Check if the provided value is a function */
+        if (typeof fn === 'function') {
+            /* Return a new function bound to the provided context with the specified arguments */
+            return fn.bind(context, ...args);
+        }
+        /* Return undefined if the provided value is not a function */
+        return undefined;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BindPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    /** @nocollapse */ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: BindPipe, name: "bind" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: BindPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'bind' }]
+        }] });
+
+class EventQueueService {
+    /**
+     * @property
+     */
+    eventBrocker = new Subject();
+    /**
+     * Event listener
+     * @param eventType
+     * @returns
+     */
+    on(eventType) {
+        return this.eventBrocker.pipe(filter(event => event.type === eventType));
+    }
+    /**
+     * Triggers an event
+     * @param event
+     */
+    emit(event) {
+        this.eventBrocker.next(event);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const Templates = {
+    /**
+     * Projection template for ID and number
+     * @param x
+     * @returns
+     */
+    idNumberTemplate: (x) => `
+		<div class="labeled">
+			<small>${$localize `:@@id:ID`}:</small>
+			<small class="na">${x?.id || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>Nr.:</small>
+			<small class="na">${x?.number || ''}</small>
+		</div>`,
+    /**
+     * Projection template for ID and name
+     * @param x
+     * @returns
+     */
+    idNameTemplate: (x) => `
+		<div class="labeled">
+			<small>${$localize `:@@id:ID`}:</small>
+			<small class="na">${x?.id || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>Name:</small>
+			<small class="na">${x?.name || ''}</small>
+		</div>`,
+    /**
+     * Projection template for ID and display name
+     * @param x
+     * @returns
+     */
+    idDisplayNameTemplate: (x) => `
+		<div class="labeled">
+			<small>${$localize `:@@id:ID`}:</small>
+			<small class="na">${x?.id || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>${$localize `:@@name:Name`}:</small>
+			<small class="na">${x?.displayName || ''}</small>
+		</div>`,
+    /**
+     * Projection template for number and display name
+     * @param x
+     * @returns
+     */
+    numberDisplayNameTemplate: (x) => `
+		<div class="labeled">
+			<small>Nr.:</small>
+			<small class="na">${x?.number || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>${$localize `:@@name:Name`}:</small>
+			<small class="na">${x?.displayName || ''}</small>
+		</div>`,
+    /**
+     * Projection template for number and name
+     * @param x
+     * @returns
+     */
+    numberNameTemplate: (x) => `
+		<div class="labeled">
+			<small>Nr.:</small>
+			<small class="na">${x?.number || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>${$localize `:@@name:Name`}:</small>
+			<small class="na">${x?.name || ''}</small>
+		</div>`,
+    /**
+     * Projection template for ID and title
+     * @param x
+     * @returns
+     */
+    idTitleTemplate: (x) => `
+		<div class="labeled">
+			<small>${$localize `:@@id:ID`}:</small>
+			<small class="na">${x?.id || ''}</small>
+		</div>
+		<div class="labeled">
+			<small>${$localize `:@@title:Title`}.:</small>
+			<small class="na">${x?.title || ''}</small>
+		</div>`,
+};
+
+const noop$1 = () => {
+    // empty method
+};
+/** Mixin to augment a component with ngModel support. */
+function mixinControlValueAccessor(base, initialValue) {
+    return class extends base {
+        _value = initialValue instanceof Array ? Object.assign([], initialValue) : initialValue;
+        _subjectValueChanges;
+        valueChanges;
+        constructor(...args) {
+            super(...args);
+            this._subjectValueChanges = new Subject();
+            this.valueChanges = this._subjectValueChanges.asObservable();
+        }
+        set value(v) {
+            if (v !== this._value) {
+                this._value = v;
+                this.onChange(v);
+                this._changeDetectorRef.markForCheck();
+                this._subjectValueChanges.next(v);
+            }
+        }
+        get value() {
+            return this._value;
+        }
+        writeValue(value) {
+            this.value = value;
+            this._changeDetectorRef.markForCheck();
+        }
+        registerOnChange(fn) {
+            this.onChange = fn;
+        }
+        registerOnTouched(fn) {
+            this.onTouched = fn;
+        }
+        onChange = (_) => noop$1;
+        onTouched = () => noop$1;
+    };
+}
+
+/** Mixin to augment a component or directive with a `disabled` property. */
+function mixinDisabled(base) {
+    return class extends base {
+        _disabled = false;
+        constructor(...args) {
+            super(...args);
+        }
+        get disabled() {
+            return this._disabled;
+        }
+        set disabled(value) {
+            let newValue = coerceBooleanProperty(value);
+            if (this._disabled !== newValue) {
+                this._disabled = newValue;
+                this.onDisabledChange(this._disabled);
+            }
+        }
+        onDisabledChange(v) {
+            /** NOT IMPLEMENTED, this needs to be overriden by subclasses if needed */
+        }
+    };
+}
+
+/**
+ * Gets the endpoint metadata from a class decorated with @Api.
+ *
+ * @param origin - The class from which to retrieve the endpoint metadata.
+ * @returns The endpoint as a string.
+ */
+function getEndpoint(origin) {
+    /* Retrieve and return the endpoint metadata associated with the given class */
+    return Reflect.getMetadata(endpointMetadataKey, origin);
+}
+/**
+ * Gets the display header metadata from a class.
+ *
+ * @param origin - The class from which to retrieve the header metadata.
+ * @returns The display header as a string.
+ */
+function getDisplay(origin) {
+    /* Retrieve and return the display header metadata associated with the given class */
+    return Reflect.getMetadata(headerMetadataKey, origin);
+}
+
+//@dynamic
+class AppStorage {
+    /**
+     * Gets storage key
+     * @param key
+     */
+    static getKey = (key) => `${key}`;
+    /**
+     * Sets a string from localStorage
+     * @param key The key of the item to store
+     * @param value The value to store
+     */
+    static setString = (key, value) => localStorage.setItem(AppStorage.getKey(key), value);
+    /**
+     * Gets a string from localStorage
+     * @param key The key of the item
+     */
+    static getString = (key) => localStorage.getItem(AppStorage.getKey(key));
+    /**
+     * Sets an object from localStorage
+     * @param key The key of the item to store
+     * @param value The value to store
+     */
+    static setObject = (key, value) => {
+        try {
+            AppStorage.setString(key, JSON.stringify(value));
+        }
+        catch (error) {
+            console.warn(error);
+        }
+    };
+    /**
+     * Sets an object from localStorage
+     * @param key The key of the item to store
+     * @param value The value to store
+     */
+    static setObjectEncoded = (key, value) => {
+        try {
+            AppStorage.setString(key, btoa(JSON.stringify(value)));
+        }
+        catch (error) {
+            console.warn(error);
+        }
+    };
+    /**
+     * Gets an object from localStorage
+     * @param key The key of the item
+     */
+    static getObject = (key, defaultValue) => {
+        try {
+            return JSON.parse(AppStorage.getString(key) ?? '{}') || defaultValue;
+        }
+        catch (error) {
+            return defaultValue;
+        }
+    };
+    /**
+     * Gets an object from localStorage
+     * @param key The key of the item
+     */
+    static getObjectEncoded = (key, defaultValue) => {
+        try {
+            return JSON.parse(atob(AppStorage.getString(key) ?? '{}')) || defaultValue;
+        }
+        catch (error) {
+            return defaultValue;
+        }
+    };
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: AppStorage, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppStorage, decorators: [{
+            type: Directive
+        }] });
+
+class DynamicBuilder {
+    compiler;
+    /**
+     * Constructor
+     * @param componentFactoryResolver
+     */
+    constructor(compiler) {
+        this.compiler = compiler;
+    }
+    /**
+     * Compiles the specified html
+     * @param viewContainerRef
+     * @param template
+     * @param data
+     */
+    compileHtml(viewContainerRef, template, data) {
+        /* Create a dynamic component */
+        var component = Component({ template: template })(class {
+        });
+        /* Destroys all views in this container */
+        viewContainerRef.clear();
+        /* Compile the given NgModule and all of its components */
+        const module = this.compiler.compileModuleAndAllComponentsSync(NgModule({
+            declarations: [component],
+            exports: [component],
+            imports: [CommonModule]
+        })(class {
+        }));
+        /* Retrieve the factory object that creates a component of the given type */
+        const componentFactory = module.componentFactories.find((comp) => comp.componentType === component);
+        /* Instantiate a single component and inserts its host view into this container */
+        const componentRef = viewContainerRef.createComponent(componentFactory);
+        if (componentFactory) {
+            /* Add properties to the component */
+            Object.assign(componentRef.instance, data);
+            /* Check this view and its children */
+            componentRef.changeDetectorRef.detectChanges();
+            return componentRef;
+        }
+        return null;
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicBuilder, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.Compiler }] });
+
+class DynamicComponentCompiler {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ActionItem {
+    /**
+     * @property
+     */
+    title;
+    /**
+     * @property
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * @property
+     */
+    iconFontSet = 'material-symbols-outlined';
+    /**
+     * @property
+     */
+    iconClass;
+    /**
+     * @property
+     */
+    event;
+    /**
+     * @property
+     */
+    hide;
+    /**
+     * @property
+     */
+    disable;
+    /**
+     * @property
+     */
+    items;
+    /**
+     * @property
+     */
+    index;
+    /**
+     * constructor
+     * @param init
+     */
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class AppSetting {
+    /**
+     * @property
+     */
+    production;
+    /**
+     * @property
+     */
+    debug;
+    /**
+     * @property
+     */
+    apiUrl;
+    /**
+     * @property
+     */
+    frontendUrl;
+    /**
+     * @property
+     */
+    projectName;
+    /**
+     * @property
+     */
+    copyright;
+    /**
+     * @property
+     */
+    authUrl;
+    /**
+     * @property
+     */
+    spaUrl;
+    /**
+     * @property
+     */
+    postLoginRoute;
+    /**
+     * @property
+     */
+    authClientId;
+    /**
+     * @property
+     */
+    authResponseType;
+    /**
+     * @property
+     */
+    authScope;
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AppSetting, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Represents the state of being invalid.
  */
@@ -2934,6 +3361,11 @@ class Icon {
      * Font icon name or function returning the icon dynamically.
      */
     fontIcon;
+    /**
+     * Icon color or a function that returns the color dynamically.
+     * If a function is provided, it takes optional parameters x and ctx.
+     */
+    iconColor;
     /**
      * Font set name for font icon.
      */
@@ -3473,7 +3905,8 @@ const COMMON_DECLARATIONS = [
     PropertyPipe,
     SplitPipe,
     JoinPipe,
-    PropertyJoinPipe
+    PropertyJoinPipe,
+    BindPipe
 ];
 class VdCommonModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3500,7 +3933,8 @@ class VdCommonModule {
             PropertyPipe,
             SplitPipe,
             JoinPipe,
-            PropertyJoinPipe], exports: [DataSourcePipe,
+            PropertyJoinPipe,
+            BindPipe], exports: [DataSourcePipe,
             DisableControlDirective,
             EnumPipe,
             FileSizePipe,
@@ -3523,7 +3957,8 @@ class VdCommonModule {
             PropertyPipe,
             SplitPipe,
             JoinPipe,
-            PropertyJoinPipe] });
+            PropertyJoinPipe,
+            BindPipe] });
     /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdCommonModule, providers: [...RUNTIME_COMPILER_PROVIDERS] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdCommonModule, decorators: [{
@@ -3536,137 +3971,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
-class VdDelayedHoverDirective {
-    /**
-     * @property
-     */
-    duration = 500;
-    /**
-    * @property
-    */
-    delayedhoverEvents = new EventEmitter();
-    /**
-    * @field
-    */
-    elementRef;
-    /**
-     * @field
-     */
-    renderer;
-    /**
-     * @field
-     */
-    unlisteners = null;
-    /**
-     * @field
-     */
-    timer = 0;
-    /**
-     * @field
-     */
-    zone;
-    /**
-     * Initialize the delayedhover directive.
-     * @param elementRef
-     * @param renderer
-     * @param zone
-     */
-    constructor(elementRef, renderer, zone) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.zone = zone;
-    }
-    /**
-     * I Cancels any pending hesitation timer.
-     */
-    cancel() {
-        clearTimeout(this.timer);
-    }
-    /**
-     * Gets called once when the host element is being unmounted.
-     */
-    ngOnDestroy() {
-        this.cancel();
-        /* If we have event-handler bindings, unbind them all */
-        if (this.unlisteners) {
-            for (var unlistener of this.unlisteners) {
-                unlistener();
-            }
-        }
-    }
-    /**
-     * Gets called once after the host element has been mounted and the inputs
-     * have been bound for the first time.
-     */
-    ngOnInit() {
-        /*
-        Instead of using host bindings, which would trigger change-detection digests
-        when the events are triggered, we want to drop-down out of the core NgZone so
-        that we can setup our event-handlers without adding processing overhead.
-        */
-        this.zone.runOutsideAngular(() => {
-            this.unlisteners = [
-                this.renderer.listen(this.elementRef.nativeElement, "mouseenter", this.handleMouseenter),
-                this.renderer.listen(this.elementRef.nativeElement, "mousedown", this.handleMousedown),
-                this.renderer.listen(this.elementRef.nativeElement, "mouseleave", this.handleMouseleave)
-            ];
-        });
-    }
-    /**
-     * Handles the mousedown event inside the host element.
-     * @param event
-     */
-    handleMousedown = (event) => {
-        /*
-        If the user shows any mouse-activity (other than enter/leave) inside the host
-        element, we want to cancel the hesitation timer. Such mouse activity indicates
-        non-hesitation intent on behalf of the user.
-        */
-        this.cancel();
-    };
-    /**
-     * Handles the mouseevent event inside the host element.
-     * @param event
-     */
-    handleMouseenter = (event) => {
-        /*
-        When the user enters the host, start the hesitation timer. This timer will be
-        fulfilled if the user remains inside of the host without performing any other
-        meaningful actions.
-        */
-        this.timer = setTimeout(this.handleTimerThreshold, this.duration);
-    };
-    /**
-     * Handles the mouseleave event inside the host element.
-     * @param event
-     */
-    handleMouseleave = (event) => {
-        this.cancel();
-    };
-    /**
-     * Handles the timer threshold event.
-     */
-    handleTimerThreshold = () => {
-        /*
-        Once the hesitation timer threshold has been surpassed, we want to trigger an
-        output event. This time, however, we want to trigger Angular change-detection.
-        As such, we have set up into the Angular zone for the emission.
-        */
-        this.zone.runGuarded(() => { this.delayedhoverEvents.emit(); });
-    };
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdDelayedHoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: { duration: "duration" }, outputs: { delayedhoverEvents: "delayedHover" }, exportAs: ["hesitation"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdDelayedHoverDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[delayedHover]",
-                    inputs: ["duration"],
-                    outputs: ["delayedhoverEvents: delayedHover"],
-                    exportAs: "hesitation"
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }] });
-
 class VdMenuComponent {
     /**
      * Menu items
@@ -8530,6 +8834,10 @@ class FormFieldDefinition {
      * This can be used to display a Material icon in the options list.
      */
     optionMatIconProperty;
+    /**
+     * A function that returns the icon based on the given property, entity, form group, and context.
+     */
+    optionIcon;
     /**
      * The property name in the option object for the SVG icon.
      * This can be used to display an SVG icon in the options list.
@@ -8922,147 +9230,39 @@ __decorate([
 /**
  * @class
  */
-class MenuDepartment {
-    /**
-     * @property
-     */
-    menuId;
-    /**
-     * @property
-     */
-    departmentId;
-    /**
-     * @property
-     */
-    department;
-    /**
-     * @property
-     */
-    departmentName;
-    /**
-     * Constructor
-     * @param init
-     */
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-__decorate([
-    prop(),
-    __metadata("design:type", Number)
-], MenuDepartment.prototype, "menuId", void 0);
-__decorate([
-    required(),
-    __metadata("design:type", Number)
-], MenuDepartment.prototype, "departmentId", void 0);
-
-class TitleProjection {
-    /**
-     * @property
-     */
-    title;
-    /**
-     * @property
-     */
-    id;
-}
-__decorate([
-    Column({}),
-    Display($localize `:@@title:Title`),
-    __metadata("design:type", String)
-], TitleProjection.prototype, "title", void 0);
-__decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
-    Display($localize `:@@id:ID`),
-    __metadata("design:type", Number)
-], TitleProjection.prototype, "id", void 0);
-
-const Templates = {
-    /**
-     * Projection template for ID and number
-     * @param x
-     * @returns
-     */
-    idNumberTemplate: (x) => `
-		<div class="labeled">
-			<small>${$localize `:@@id:ID`}:</small>
-			<small class="na">${x?.id || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>Nr.:</small>
-			<small class="na">${x?.number || ''}</small>
-		</div>`,
-    /**
-     * Projection template for ID and name
-     * @param x
-     * @returns
+class MenuDepartment {
+    /**
+     * @property
      */
-    idNameTemplate: (x) => `
-		<div class="labeled">
-			<small>${$localize `:@@id:ID`}:</small>
-			<small class="na">${x?.id || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>Name:</small>
-			<small class="na">${x?.name || ''}</small>
-		</div>`,
+    menuId;
     /**
-     * Projection template for ID and display name
-     * @param x
-     * @returns
+     * @property
      */
-    idDisplayNameTemplate: (x) => `
-		<div class="labeled">
-			<small>${$localize `:@@id:ID`}:</small>
-			<small class="na">${x?.id || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>${$localize `:@@name:Name`}:</small>
-			<small class="na">${x?.displayName || ''}</small>
-		</div>`,
+    departmentId;
     /**
-     * Projection template for number and display name
-     * @param x
-     * @returns
+     * @property
      */
-    numberDisplayNameTemplate: (x) => `
-		<div class="labeled">
-			<small>Nr.:</small>
-			<small class="na">${x?.number || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>${$localize `:@@name:Name`}:</small>
-			<small class="na">${x?.displayName || ''}</small>
-		</div>`,
+    department;
     /**
-     * Projection template for number and name
-     * @param x
-     * @returns
+     * @property
      */
-    numberNameTemplate: (x) => `
-		<div class="labeled">
-			<small>Nr.:</small>
-			<small class="na">${x?.number || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>${$localize `:@@name:Name`}:</small>
-			<small class="na">${x?.name || ''}</small>
-		</div>`,
+    departmentName;
     /**
-     * Projection template for ID and title
-     * @param x
-     * @returns
+     * Constructor
+     * @param init
      */
-    idTitleTemplate: (x) => `
-		<div class="labeled">
-			<small>${$localize `:@@id:ID`}:</small>
-			<small class="na">${x?.id || ''}</small>
-		</div>
-		<div class="labeled">
-			<small>${$localize `:@@title:Title`}.:</small>
-			<small class="na">${x?.title || ''}</small>
-		</div>`,
-};
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+__decorate([
+    prop(),
+    __metadata("design:type", Number)
+], MenuDepartment.prototype, "menuId", void 0);
+__decorate([
+    required(),
+    __metadata("design:type", Number)
+], MenuDepartment.prototype, "departmentId", void 0);
 
 /**
  * @class
@@ -12612,7 +12812,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
         console.log(message, optionalParams);
     }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AbstractSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: AbstractSelectFormField, inputs: { enum: "enum", enumMetadata: "enumMetadata", textPrefix: "textPrefix", optionTextProperty: "optionTextProperty", optionValueProperty: "optionValueProperty", matIconKey: "matIconKey", svgIconKey: "svgIconKey", fontSet: "fontSet", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", disabled: "disabled", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: AbstractSelectFormField, inputs: { enum: "enum", enumMetadata: "enumMetadata", textPrefix: "textPrefix", optionTextProperty: "optionTextProperty", optionValueProperty: "optionValueProperty", matIconKey: "matIconKey", svgIconKey: "svgIconKey", fontSet: "fontSet", prefix: "prefix", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", cache: "cache", selectFirst: "selectFirst", sortBy: "sortBy", mapper: "mapper", optionIcon: "optionIcon", defaultOption: "defaultOption", multiple: "multiple", sorted: "sorted", endpoint: "endpoint", params: "params", projection: "projection", loadData: "loadData", enumFilter: "enumFilter", disabled: "disabled", compareWith: "compareWith", searchField: "searchField" }, outputs: { onValueChange: "change", onItemChange: "itemChange", onSelected: "selected", onItemSelected: "itemSelected", onLaunch: "launch" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: AbstractSelectFormField, decorators: [{
             type: Directive
@@ -12656,6 +12856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 type: Input
             }], mapper: [{
                 type: Input
+            }], optionIcon: [{
+                type: Input
             }], defaultOption: [{
                 type: Input
             }], multiple: [{
@@ -12890,7 +13092,7 @@ class VdSelectComponent extends AbstractSelectFormField {
                 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>\r\n    <!-- #region Filter input -->\r\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n            <div class=\"mat-mdc-form-field-flex\">\r\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\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>\r\n                    <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"mdc-line-ripple\"></div>\r\n        </div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+        ], 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>\r\n    <!-- #region Filter input -->\r\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n            <div class=\"mat-mdc-form-field-flex\">\r\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\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>\r\n                    <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"mdc-line-ripple\"></div>\r\n        </div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <ng-template *ngIf=\"optionIcon\" #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\r\n                        <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                        <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <ng-template *ngIf=\"optionIcon\" #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\r\n                <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\r\n            </ng-template>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
@@ -12900,7 +13102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", 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>\r\n    <!-- #region Filter input -->\r\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n            <div class=\"mat-mdc-form-field-flex\">\r\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\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>\r\n                    <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"mdc-line-ripple\"></div>\r\n        </div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\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>\r\n    <!-- #region Filter input -->\r\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n            <div class=\"mat-mdc-form-field-flex\">\r\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\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>\r\n                    <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n                </div>\r\n            </div>\r\n            <div class=\"mdc-line-ripple\"></div>\r\n        </div>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for launch button -->\r\n    <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n        <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom trigger template -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Option template as trigger -->\r\n    <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <ng-template *ngIf=\"optionIcon\" #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\r\n                        <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                        <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\r\n                    </ng-template>\r\n                    <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Trigger for icons -->\r\n    <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n        <span layout=\"row\" layout-align=\"start center\">\r\n            <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n                    <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                    <span>{{option[optionTextProperty]}}</span>\r\n                </span>\r\n                <span *ngIf=\"!last\">&nbsp;&nbsp;</span>\r\n            </ng-container>\r\n        </span>\r\n    </mat-select-trigger>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Default option -->\r\n    <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Options -->\r\n    <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n        <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n            <ng-template *ngIf=\"optionIcon\" #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\r\n                <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\r\n            </ng-template>\r\n            <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\r\n        </mat-option>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n    <div *ngIf=\"currentValue\">\r\n        <div class=\"readonly-value\">\r\n            <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n                <span layout=\"row\" layout-align=\"start center\">\r\n                    <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n                        <span layout=\"row\" layout-align=\"start center\">\r\n                            <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n                            <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n                            <span>&nbsp;&nbsp;</span>\r\n                            <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n                        </span>\r\n                        <span *ngIf=\"!last\">,&nbsp;</span>\r\n                    </ng-container>\r\n                </span>\r\n            </span>\r\n            <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n            <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\r\n        </div>\r\n        <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n    </div>\r\n    <div *ngIf=\"!currentValue\">&nbsp;</div>\r\n</div>\r\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-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -22595,165 +22797,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 }]
         }] });
 
-var AppEventType;
-(function (AppEventType) {
-    AppEventType["ClickedOnNotification"] = "CLICKED_ON_NOTIFICATION";
-    AppEventType["SocketEvent"] = "SOCKET_EVENT";
-})(AppEventType || (AppEventType = {}));
-
-class AppEvent {
-    type;
-    payload;
-    constructor(type, payload) {
-        this.type = type;
-        this.payload = payload;
-    }
-}
-
-class DisplayNameNumberProjection {
-    /**
-     * @property
-     */
-    displayName;
-    /**
-     * @property
-     */
-    number;
-    /**
-     * @property
-     */
-    id;
-}
-__decorate([
-    Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
-], DisplayNameNumberProjection.prototype, "displayName", void 0);
-__decorate([
-    Column({ index: 10, filterOperator: FilterOperator.Contains, maxWidth: 90, display: Grid.Md }),
-    Display($localize `:@@number:Number`),
-    __metadata("design:type", Number)
-], DisplayNameNumberProjection.prototype, "number", void 0);
-__decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
-    Display($localize `:@@id:ID`),
-    __metadata("design:type", Number)
-], DisplayNameNumberProjection.prototype, "id", void 0);
-
-class DisplayNameProjection {
-    /**
-     * @property
-     */
-    displayName;
-    /**
-     * @property
-     */
-    id;
-}
-__decorate([
-    Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
-], DisplayNameProjection.prototype, "displayName", void 0);
-__decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
-    Display($localize `:@@id:ID`),
-    __metadata("design:type", Number)
-], DisplayNameProjection.prototype, "id", void 0);
-
-/**
- * Metadata class for enum values, containing display information and ordering.
- */
-class EnumMetadata {
-    /**
-     * Optional display string associated with the enum value.
-     */
-    display;
-    /**
-     * Optional order number used for sorting enum values.
-     */
-    order;
-}
-
-class NameNumberProjection {
-    /**
-     * @property
-     */
-    name;
-    /**
-     * @property
-     */
-    number;
-    /**
-     * @property
-     */
-    id;
-}
-__decorate([
-    Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
-], NameNumberProjection.prototype, "name", void 0);
-__decorate([
-    Column({ index: 10, maxWidth: 90, display: Grid.Md }),
-    Display($localize `:@@number:Number`),
-    __metadata("design:type", Number)
-], NameNumberProjection.prototype, "number", void 0);
-__decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
-    Display($localize `:@@id:ID`),
-    __metadata("design:type", Number)
-], NameNumberProjection.prototype, "id", void 0);
-
-class NameProjection {
-    /**
-     * @property
-     */
-    name;
-    /**
-     * @property
-     */
-    id;
-}
-__decorate([
-    Column({}),
-    Display($localize `:@@name:Name`),
-    __metadata("design:type", String)
-], NameProjection.prototype, "name", void 0);
-__decorate([
-    Column({ filterOperator: FilterOperator.Contains, index: 1100, arrowBefore: true }),
-    Display($localize `:@@id:ID`),
-    __metadata("design:type", Number)
-], NameProjection.prototype, "id", void 0);
-
-class EventQueueService {
-    /**
-     * @property
-     */
-    eventBrocker = new Subject();
-    /**
-     * Event listener
-     * @param eventType
-     * @returns
-     */
-    on(eventType) {
-        return this.eventBrocker.pipe(filter(event => event.type === eventType));
-    }
-    /**
-     * Triggers an event
-     * @param event
-     */
-    emit(event) {
-        this.eventBrocker.next(event);
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    /** @nocollapse */ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: EventQueueService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 const VD_DIALOGS = [
     VdAlertDialogComponent,
     VdConfirmDialogComponent,
@@ -23793,12 +23836,17 @@ class VdGenericFormComponent {
     log(message, ...optionalParams) {
         console.log(message, optionalParams);
     }
+    //---------------------------------------------------------------
+    //TODO delete:
+    myFunction(func, option) {
+        return func(option, this.formValue, this.formGroup, this.context);
+    }
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumMetadata]=\"field.enumMetadata\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i20.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: i20.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i20.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i20.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i24.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i24.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    /** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: VdGenericFormComponent, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumMetadata]=\"field.enumMetadata\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: VdSelectOptionDirective, selector: "[vd-select-option]ng-template" }, { kind: "directive", type: VdSelectTriggerDirective, selector: "[vd-select-trigger]ng-template" }, { kind: "component", type: VdChipsComponent, selector: "vd-chips", inputs: ["classType", "chips", "endpoint", "params", "projection", "paginated", "customValue", "context", "key", "searchField", "searchFields", "removable", "debounce", "autocompleteCssClass", "suffixButtons"], outputs: ["initSelect", "selected", "cleared", "launch", "chipFocus"] }, { kind: "directive", type: VdAutocompleteOptionDirective, selector: "[vd-autocomplete-option]ng-template" }, { kind: "directive", type: VdChipDirective, selector: "[vd-chip]ng-template" }, { kind: "component", type: VdFileInputComponent, selector: "[vd-file-input]", inputs: ["accept", "placeholder", "required", "multiple", "disabled", "errorState"], outputs: ["select", "clear"] }, { kind: "component", type: VdListComponent, selector: "vd-list" }, { kind: "directive", type: VdListOptionDirective, selector: "[vd-list-option]ng-template" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i20.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: i20.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i20.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i20.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i24.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i24.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: MatFormFieldReadonlyDirective, selector: "mat-form-field" }, { kind: "directive", type: EmptyStringResetDirective, selector: "[ngModel],[formControlName],[formControl]" }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumMetadata]=\"field.enumMetadata\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}\n"] }]
+            args: [{ selector: 'vd-generic-form', template: "<div *ngIf=\"formGroup && fieldRows\" [formGroup]=\"formGroup\">\r\n    <!-- #region Fields -->\r\n    <ng-container *ngFor=\"let fields of fieldRows; let i = index\">\r\n        <div layout-gt-sm=\"row\" layout=\"column\">\r\n            <ng-container *ngFor=\"let field of fields\" [ngSwitch]=\"field.type\">\r\n                <ng-container *ngIf=\"!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))\">\r\n                    <ng-container *ngIf=\"field.wrapped\">\r\n                        <!-- #region Text input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Text\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Textarea -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.TextArea\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <textarea matInput [formControlName]=\"field.name!\" rows=\"field.rows||2\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"></textarea>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Enum -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Enum\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [enum]=\"field.enumType\" [enumMetadata]=\"field.enumMetadata\" [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdSelect -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdSelect\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-select [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [defaultOption]=\"field.defaultOption??true\" [matIconKey]=\"field.optionMatIconProperty\" [svgIconKey]=\"field.optionSvgIconProperty\" [fontSet]=\"field.optionIconFontSet\" [multiple]=\"field.multiple\" [selectFirst]=\"field.selectFirst\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [triggerCssClass]=\"field.triggerCssClass\" [triggerMode]=\"field.triggerMode\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" layout=\"row\" flex>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerTemplate\">\r\n                                    <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-trigger let-trigger=\"trigger\" *ngIf=\"field.triggerMapper && field.multiple && field.triggerMode == 'chip'\">\r\n                                    <span *ngFor=\"let item of trigger\" class=\"mat-mdc-chip mat-mdc-standard-chip mat-primary mat-mdc-chip-selected\">\r\n                                        <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\r\n                                    </span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                                <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\r\n                                    <div layout=\"row\" layout-align=\"start center\">\r\n                                        <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\r\n                                            <mat-icon *ngIf=\"optionIcon.svgIcon\" [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\r\n                                            <mat-icon *ngIf=\"optionIcon.matIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\r\n                                        </ng-template>\r\n                                        <span>{{text}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </vd-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdList -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdList\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-list [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params ??{} | func:formValue:formGroup:context\" [projection]=\"field.projection\" [mapper]=\"field.mapper\" [compareWith]=\"field.compareWith\" [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\" [optionValueProperty]=\"field.optionValueProperty\" [optionTextProperty]=\"field.optionTextProperty\" [multiple]=\"field.multiple\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" [style.max-width]=\"field.maxWidth\" [style.max-height]=\"field.maxHeight\" flex>\r\n                                <ng-template vd-list-option let-option=\"option\" *ngIf=\"field.optionTemplate\">\r\n                                    <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\r\n                                </ng-template>\r\n                            </vd-list>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Chips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Chips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                                <mat-chip-row *ngFor=\"let chip of $any(formGroup.controls[field.name!])?.value\" (removed)=\"removeChip(field, chip)\" color=\"primary\" selectable=\"true\" selected>\r\n                                    <span>{{chip}}</span>\r\n                                    <button matChipRemove>\r\n                                        <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\r\n                                    </button>\r\n                                </mat-chip-row>\r\n                                <input [placeholder]=\"$any(field.label)\" #chipInput [matChipInputFor]=\"chipList\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" [matAutocomplete]=\"chipAutocomplete\" (input)=\"filterAutocomplete(field, chipInput)\" (matChipInputTokenEnd)=\"addChip(field, $event)\" autocomplete=\"off\">\r\n                            </mat-chip-grid>\r\n                            <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region VdChips -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.VdChips\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <vd-chips #vdChip [formControlName]=\"field.name!\" [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\" [params]=\"field.params || {} | func:formValue:formGroup:context\" [searchField]=\"field.searchField\" [classType]=\"field.classType\" [projection]=\"field.projection\" [key]=\"field.optionValueProperty\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [removable]=\"!field.clear\" [context]=\"context\" [suffixButtons]=\"field.suffixButtons\" [autocompleteCssClass]=\"field.autocompleteCssClass\" (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\" (selected)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\" (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\" [customValue]=\"field.customValue\" layout=\"row\" flex>\r\n                                <ng-template vd-chip let-chip=\"chip\" *ngIf=\"field.chipTemplate\">\r\n                                    <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                                <ng-template vd-autocomplete-option let-option=\"option\" *ngIf=\"field.autocompleteTemplate\">\r\n                                    <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\r\n                                </ng-template>\r\n                            </vd-chips>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-hint *ngIf=\"vdChip.emptyResult\" class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Select -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Select\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <mat-select [formControlName]=\"field.name!\" [multiple]=\"field.multiple\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex>\r\n                                <mat-option *ngFor=\"let option of $any(field.options)\" [value]=\"option.id\">{{option.name}}</mat-option>\r\n                            </mat-select>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Autocomplete -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Autocomplete\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input type=\"text\" matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" [matAutocomplete]=\"auto\" #autocompleteInput (input)=\"filterAutocomplete(field, autocompleteInput)\" autocomplete=\"off\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\r\n                            <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\r\n                                <mat-option *ngFor=\"let option of autocompleteFilteredOptions[field.name!]\" [value]=\"option.id\">\r\n                                    {{option.name}}\r\n                                </mat-option>\r\n                            </mat-autocomplete>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Date -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Date\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input matInput [formControlName]=\"field.name!\" [min]=\"field.min\" [max]=\"field.max\" autocomplete=\"off\" [matDatepicker]=\"datePicker\" [matDatepickerFilter]=\"field.dateFilter\" [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\">\r\n                            <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\r\n                            <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Calendar -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Calendar\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\r\n                            <mat-calendar #calendar [selected]=\"formGroup.get(field.name!)?.value\" (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\" (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\" [headerComponent]=\"datePickerHeaderComponent\" style=\"width: 100%;\"></mat-calendar>\r\n                            <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n\r\n                        <!-- #region Color input -->\r\n                        <mat-form-field *ngSwitchCase=\"FormFieldType.Color\" [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <input [type]=\"field.inputType ?? 'text'\" [minlength]=\"field.minLength||null\" [maxlength]=\"field.maxLength||null\" [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\" [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" [pattern]=\"(field.pattern??'')\" [onlyNumber]=\"(field.numbersOnly??false)\">\r\n                            <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\r\n                            <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n                                <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n                                </button>\r\n                            </ng-container>\r\n                            <mat-hint *ngIf=\"field.hint\">{{field.hint}}</mat-hint>\r\n                            <mat-error *ngFor=\"let errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']\">{{errorMessage}}</mat-error>\r\n                        </mat-form-field>\r\n                        <!-- #endregion -->\r\n                    </ng-container>\r\n\r\n                    <!-- #region Checkbox -->\r\n                    <div *ngSwitchCase=\"FormFieldType.Checkbox\" [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\r\n                        <mat-checkbox [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">{{field.label}}</mat-checkbox>\r\n                        <mat-error *ngFor=\"let errorMessage of $any(formGroup.controls[field.name!])['errorMessages']\" layout-margin>{{errorMessage}}</mat-error>\r\n                    </div>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Editor -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Editor\">\r\n                        <ng-template *ngIf=\"editorTemplate?.templateRef!\" [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Code -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Code\">\r\n                        <ng-template *ngIf=\"codeTemplate?.templateRef!\" [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region File -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.File\">\r\n                        <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\r\n                            <mat-label>{{field.label}}</mat-label>\r\n                            <div vd-file-input [formControlName]=\"field.name!\" (select)=\"field.change && field.change(field, $event, formGroup, context)\" [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" flex></div>\r\n                        </mat-form-field>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n\r\n                    <!-- #region Custom -->\r\n                    <ng-container *ngSwitchCase=\"FormFieldType.Custom\">\r\n                        <ng-template *ngIf=\"customTemplate?.templateRef!\" [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\r\n                    </ng-container>\r\n                    <!-- #endregion -->\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <!-- #region Template for custom fields -->\r\n            <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n                <ng-template *ngIf=\"customField?.templateRef && customField.row == fields[0]?.row && customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n            </ng-container>\r\n            <!-- #endregion -->\r\n        </div>\r\n\r\n        <!-- #region Template for custom fields -->\r\n        <ng-container *ngIf=\"customFields\" [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\r\n        <ng-container *ngFor=\"let customField of customFieldsTemplates\">\r\n            <ng-template *ngIf=\"customField?.templateRef && customField.row == ((fields[0]?.row??0)+1) && !customField.inline\" [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\r\n        </ng-container>\r\n        <!-- #endregion -->\r\n    </ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Form bottom -->\r\n    <ng-container *ngIf=\"bottom\" [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Template for suffix buttons -->\r\n    <ng-template #suffixButtons let-field>\r\n        <ng-container *ngFor=\"let suffixButton of field.suffixButtons\" matSuffix>\r\n            <button type=\"button\" mat-icon-button *ngIf=\"!suffixButton.hide || !suffixButton.hide(formValue, context)\" (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\r\n                <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n    </ng-template>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Debug value -->\r\n    <code *ngIf=\"debugValue\">\r\n        <pre>{{formValue | json}}</pre>\r\n    </code>\r\n    <!-- #endregion -->\r\n</div>", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mdc-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -24170,6 +24218,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
                 type: Input
             }] } });
 
+class FieldFuncPipe {
+    /**
+     * @param groups - Array of FormFieldGroupDefinition instances to filter.
+     * @param formValue - The current value of the form.
+     * @param form - The FormGroup instance.
+     * @param context - The context of the component.
+     * @returns Filtered array of FormFieldGroupDefinition instances.
+     */
+    transform(func, ...args) {
+        if (args) {
+            console.log('args', args);
+        }
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: FieldFuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    /** @nocollapse */ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: FieldFuncPipe, name: "fieldFunc" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: FieldFuncPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'fieldFunc' }]
+        }] });
+
 class GroupFilterPipe {
     /**
      * Filters an array of FormFieldGroupDefinition instances based on a provided condition.
@@ -24506,7 +24575,8 @@ const DECLARATIONS = [
     DatePickerHeaderComponent,
     VdGenericFormCustomFieldDirective,
     NestedPropertyNgModelDirective,
-    GroupFilterPipe
+    GroupFilterPipe,
+    FieldFuncPipe
 ];
 class VdFormsModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -24524,7 +24594,8 @@ class VdFormsModule {
             DatePickerHeaderComponent,
             VdGenericFormCustomFieldDirective,
             NestedPropertyNgModelDirective,
-            GroupFilterPipe], imports: [CommonModule,
+            GroupFilterPipe,
+            FieldFuncPipe], imports: [CommonModule,
             VdCommonModule,
             VdSelectModule,
             VdChipsModule,
@@ -24558,7 +24629,8 @@ class VdFormsModule {
             DatePickerHeaderComponent,
             VdGenericFormCustomFieldDirective,
             NestedPropertyNgModelDirective,
-            GroupFilterPipe] });
+            GroupFilterPipe,
+            FieldFuncPipe] });
     /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdFormsModule, imports: [CommonModule,
             VdCommonModule,
             VdSelectModule,
@@ -24824,5 +24896,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, ActionItem, Api, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, CachingInterceptor, Column, ColumnObject, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NestedPropertyNgModelDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableDataSource, TableDefinition, TableStaticDataSource, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
+export { AbstractMatFormField, ActionItem, Api, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, ContextHelper, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, JoinPipe, KeyValue, KeysPipe, LoadingScreenInterceptor, LoadingScreenService, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, MaterialModule, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuListProjectionResolve, MenuResolve, MenuScope, MenuService, MenuSettings, MenuSettingsResolve, MessageType, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NestedPropertyNgModelDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PlaceholderPipe, PrintService, PropertyJoinPipe, PropertyPipe, RUNTIME_COMPILER_PROVIDERS, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, ServiceLocator, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableDataSource, TableDefinition, TableStaticDataSource, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdAutocompleteOptionDirective, VdBaseModule, VdChipDirective, VdChipsComponent, VdChipsModule, VdCodeDirective, VdCommonModule, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDialogsModule, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdFormsModule, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdHttpModule, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutModule, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListComponent, VdListModule, VdListOptionDirective, VdListToolbarComponent, VdMediaModule, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdMenuModule, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSearchModule, VdSelectComponent, VdSelectModule, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTableModule, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, createCompiler, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formFieldGroupsMetadataKey, formFieldsMetadataKey, getEndpoint, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinControlValueAccessor, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map